#8A9F3A + #3F746E + #362B27 + #553538 + #331C0E - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#8A9F3A

Grass Green · Olive · Olive Green

HEX

#8A9F3A

RGB

rgb(138, 159, 58)

HSL

hsl(72, 47%, 43%)

HSB

hsb(72, 64%, 62%)

CMYK

cmyk(13%, 0%, 64%, 38%)

Oklch

oklch(66.6% 0.129 120.0)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

#3F746E

Mineral Blue · SeaGreen · Mint Ice

HEX

#3F746E

RGB

rgb(63, 116, 110)

HSL

hsl(173, 30%, 35%)

HSB

hsb(173, 46%, 45%)

CMYK

cmyk(46%, 0%, 5%, 55%)

Oklch

oklch(52.0% 0.058 186.2)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#362B27

Tangerine · DarkSlateGray · Cinnamon

HEX

#362B27

RGB

rgb(54, 43, 39)

HSL

hsl(16, 16%, 18%)

HSB

hsb(16, 28%, 21%)

CMYK

cmyk(0%, 20%, 28%, 79%)

Oklch

oklch(30.0% 0.018 41.0)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

#553538

Crimson · DarkSlateGray · Wine Red

HEX

#553538

RGB

rgb(85, 53, 56)

HSL

hsl(354, 23%, 27%)

HSB

hsb(354, 38%, 33%)

CMYK

cmyk(0%, 38%, 34%, 67%)

Oklch

oklch(36.8% 0.046 13.4)

Traditional「Crimson」· Paint「Wine Red」· Creative Blush Sunrise

#331C0E

Tangerine · Black · Cinnamon

HEX

#331C0E

RGB

rgb(51, 28, 14)

HSL

hsl(23, 57%, 13%)

HSB

hsb(23, 73%, 20%)

CMYK

cmyk(0%, 45%, 73%, 80%)

Oklch

oklch(25.4% 0.043 51.1)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8A9F3A

4F3AA1

Analogous

A1823A

8A9F3A

59A13A

Triadic

8A9F3A

3A8DA1

A13A8D

Split-Comp.

8A9F3A

3A59A1

823AA1

Tetradic

8A9F3A

3AA182

4F3AA1

A13A59

Contrast Matrix WCAG 2.1 Contrast

8A9F3A	3F746E	362B27	553538	331C0E
—	1.8 Fail	4.6 AA	3.6 AA Large	5.4 AA
1.8 Fail	—	2.6 Fail	2.0 Fail	3.0 Fail
4.6 AA	2.6 Fail	—	1.3 Fail	1.2 Fail
3.6 AA Large	2.0 Fail	1.3 Fail	—	1.5 Fail
5.4 AA	3.0 Fail	1.2 Fail	1.5 Fail	—

White BG

3.0Fail

5.3AA

13.7AAA

10.8AAA

16.0AAA

Black BG

7.1AAA

3.9AA Large

1.5Fail

2.0Fail

1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

939352

56566F

313128

474737

292911

Deuteranopia

929058

534F70

323328

494B37

2A2C12

Tritanopia

8B666A

427171

352929

533737

321415

Achromatopsia

8D8D8D

636363

2E2E2E

3F3F3F

212121

Shades & Tints Shades & Tints

#8A9F3A

Dark

Light

#3F746E

Dark

Light

#362B27

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8a9f3a;
  --color-2: #3f746e;
  --color-3: #362b27;
  --color-4: #553538;
  --color-5: #331c0e;
}

SCSS

$color-1: #8a9f3a;
$color-2: #3f746e;
$color-3: #362b27;
$color-4: #553538;
$color-5: #331c0e;

TAILWIND

colors: {
  'brand-1': '#8a9f3a',
  'brand-2': '#3f746e',
  'brand-3': '#362b27',
  'brand-4': '#553538',
  'brand-5': '#331c0e',
}

RGB Array

[138, 159, 58], [63, 116, 110], [54, 43, 39], [85, 53, 56], [51, 28, 14]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8A9F3A, #3F746E, #362B27, #553538, #331C0E is ideal for: tech websites, dark mode UIs, game UIs. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #8a9f3a; --color-2: #3f746e; --color-3: #362b27; --color-4: #553538; --color-5: #331c0e. LangColor editor supports one-click export to CSS, SCSS, Tailwind, JSON and more. Click the "Export" button to choose your format.

What UI/UX design tips apply to this palette?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. Use the "Contrast Matrix" tool in LangColor editor to check WCAG accessibility levels for every color pair.

Which industries or brands suit this palette?

This general-style 5-color scheme is especially suited for tech, SaaS, healthcare, eco industries. Click "AI Analysis" in the editor for more detailed brand color suggestions.

🎨 Open this palette in Editor →

Generated by LangColor online color tool · Breaking the barrier between language and color