#5E4E2A + #686346 + #564624 + #C99616 + #CDAD3C - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#5E4E2A

Ochre · DarkOliveGreen · Honey Gold

HEX

#5E4E2A

RGB

rgb(94, 78, 42)

HSL

hsl(42, 38%, 27%)

HSB

hsb(42, 55%, 37%)

CMYK

cmyk(0%, 17%, 55%, 63%)

Oklch

oklch(43.1% 0.057 86.1)

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

#686346

Autumn Sage · DarkOliveGreen · Honey Gold

HEX

#686346

RGB

rgb(104, 99, 70)

HSL

hsl(51, 20%, 34%)

HSB

hsb(51, 33%, 41%)

CMYK

cmyk(0%, 5%, 33%, 59%)

Oklch

oklch(49.6% 0.044 99.5)

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

#564624

Ochre · DarkOliveGreen · Amber Gold

HEX

#564624

RGB

rgb(86, 70, 36)

HSL

hsl(41, 41%, 24%)

HSB

hsb(41, 58%, 34%)

CMYK

cmyk(0%, 19%, 58%, 66%)

Oklch

oklch(40.3% 0.055 84.7)

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

#C99616

Ochre · GoldenRod · Honey Gold

HEX

#C99616

RGB

rgb(201, 150, 22)

HSL

hsl(43, 80%, 44%)

HSB

hsb(43, 89%, 79%)

CMYK

cmyk(0%, 25%, 89%, 21%)

Oklch

oklch(70.3% 0.140 83.2)

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

#CDAD3C

Ginger · GoldenRod · Sunflower

HEX

#CDAD3C

RGB

rgb(205, 173, 60)

HSL

hsl(47, 59%, 52%)

HSB

hsb(47, 71%, 80%)

CMYK

cmyk(0%, 16%, 71%, 20%)

Oklch

oklch(75.6% 0.133 92.8)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5E4E2A

2B3A5F

Analogous

5F352B

5E4E2A

555F2B

Triadic

5E4E2A

2B5F4F

4F2B5F

Split-Comp.

5E4E2A

2B555F

352B5F

Tetradic

5E4E2A

2B5F35

2B3A5F

5F2B55

Contrast Matrix WCAG 2.1 Contrast

5E4E2A	686346	564624	C99616	CDAD3C
—	1.3 Fail	1.1 Fail	3.0 AA Large	3.7 AA Large
1.3 Fail	—	1.5 Fail	2.3 Fail	2.8 Fail
1.1 Fail	1.5 Fail	—	3.4 AA Large	4.2 AA Large
3.0 AA Large	2.3 Fail	3.4 AA Large	—	1.2 Fail
3.7 AA Large	2.8 Fail	4.2 AA Large	1.2 Fail	—

White BG

8.1AAA

6.1AA

9.1AAA

2.7Fail

2.2Fail

Black BG

2.6Fail

3.5AA Large

2.3Fail

7.9AAA

9.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

575733

66664D

4F4F2C

B3B235

BFBF57

Deuteranopia

585935

66674F

50512E

B6BA3C

C1C35E

Tritanopia

5D3A3B

685354

553334

C64D53

CB6D72

Achromatopsia

4F4F4F

616161

474747

979797

AAAAAA

Shades & Tints Shades & Tints

#5E4E2A

Dark

Light

#686346

Dark

Light

#564624

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5e4e2a;
  --color-2: #686346;
  --color-3: #564624;
  --color-4: #c99616;
  --color-5: #cdad3c;
}

SCSS

$color-1: #5e4e2a;
$color-2: #686346;
$color-3: #564624;
$color-4: #c99616;
$color-5: #cdad3c;

TAILWIND

colors: {
  'brand-1': '#5e4e2a',
  'brand-2': '#686346',
  'brand-3': '#564624',
  'brand-4': '#c99616',
  'brand-5': '#cdad3c',
}

RGB Array

[94, 78, 42], [104, 99, 70], [86, 70, 36], [201, 150, 22], [205, 173, 60]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #5E4E2A, #686346, #564624, #C99616, #CDAD3C 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: #5e4e2a; --color-2: #686346; --color-3: #564624; --color-4: #c99616; --color-5: #cdad3c. 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