#8B9815 + #806227 + #58856F + #4D4335 + #6E6050 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#8B9815

Autumn Sage · Olive · Honey Gold

HEX

#8B9815

RGB

rgb(139, 152, 21)

HSL

hsl(66, 76%, 34%)

HSB

hsb(66, 86%, 60%)

CMYK

cmyk(9%, 0%, 86%, 40%)

Oklch

oklch(64.7% 0.142 115.8)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#806227

Ochre · Sienna · Honey Gold

HEX

#806227

RGB

rgb(128, 98, 39)

HSL

hsl(40, 53%, 33%)

HSB

hsb(40, 70%, 50%)

CMYK

cmyk(0%, 23%, 70%, 50%)

Oklch

oklch(51.5% 0.085 81.6)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#58856F

Mineral Blue · DimGray · Olive Green

HEX

#58856F

RGB

rgb(88, 133, 111)

HSL

hsl(151, 20%, 43%)

HSB

hsb(151, 34%, 52%)

CMYK

cmyk(34%, 0%, 17%, 48%)

Oklch

oklch(57.7% 0.060 162.5)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

#4D4335

Ochre · DarkOliveGreen · Cinnamon

HEX

#4D4335

RGB

rgb(77, 67, 53)

HSL

hsl(35, 18%, 25%)

HSB

hsb(35, 31%, 30%)

CMYK

cmyk(0%, 13%, 31%, 70%)

Oklch

oklch(38.9% 0.026 76.1)

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

#6E6050

Ochre · DimGray · Amber Brown

HEX

#6E6050

RGB

rgb(110, 96, 80)

HSL

hsl(32, 16%, 37%)

HSB

hsb(32, 27%, 43%)

CMYK

cmyk(0%, 13%, 27%, 57%)

Oklch

oklch(49.8% 0.030 70.8)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8B9815

221599

Analogous

996415

8B9815

4A9915

Triadic

8B9815

158B99

99158B

Split-Comp.

8B9815

154A99

641599

Tetradic

8B9815

159964

221599

99154A

Contrast Matrix WCAG 2.1 Contrast

8B9815	806227	58856F	4D4335	6E6050
—	1.8 Fail	1.3 Fail	3.0 AA Large	1.9 Fail
1.8 Fail	—	1.4 Fail	1.7 Fail	1.1 Fail
1.3 Fail	1.4 Fail	—	2.3 Fail	1.4 Fail
3.0 AA Large	1.7 Fail	2.3 Fail	—	1.6 Fail
1.9 Fail	1.1 Fail	1.4 Fail	1.6 Fail	—

White BG

3.2AA Large

5.7AA

4.2AA Large

9.7AAA

6.1AA

Black BG

6.6AA

3.7AA Large

5.0AA

2.2Fail

3.5AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

919135

737335

6B6C74

494938

686854

Deuteranopia

908F3C

757739

696676

494A39

696A55

Tritanopia

8C4E53

7F4143

5A7979

4C3B3C

6D5758

Achromatopsia

858585

646464

757575

444444

626262

Shades & Tints Shades & Tints

#8B9815

Dark

Light

#806227

Dark

Light

#58856F

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8b9815;
  --color-2: #806227;
  --color-3: #58856f;
  --color-4: #4d4335;
  --color-5: #6e6050;
}

SCSS

$color-1: #8b9815;
$color-2: #806227;
$color-3: #58856f;
$color-4: #4d4335;
$color-5: #6e6050;

TAILWIND

colors: {
  'brand-1': '#8b9815',
  'brand-2': '#806227',
  'brand-3': '#58856f',
  'brand-4': '#4d4335',
  'brand-5': '#6e6050',
}

RGB Array

[139, 152, 21], [128, 98, 39], [88, 133, 111], [77, 67, 53], [110, 96, 80]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8B9815, #806227, #58856F, #4D4335, #6E6050 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: #8b9815; --color-2: #806227; --color-3: #58856f; --color-4: #4d4335; --color-5: #6e6050. 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