#E8C200 + #C6A00F + #302C23 + #7E6B5A + #484F5F - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#E8C200

Autumn Sage · Gold · Honey Gold

HEX

#E8C200

RGB

rgb(232, 194, 0)

HSL

hsl(50, 100%, 45%)

HSB

hsb(50, 100%, 91%)

CMYK

cmyk(0%, 16%, 100%, 9%)

Oklch

oklch(82.3% 0.169 94.7)

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

#C6A00F

Ochre · GoldenRod · Honey Gold

HEX

#C6A00F

RGB

rgb(198, 160, 15)

HSL

hsl(48, 86%, 42%)

HSB

hsb(48, 92%, 78%)

CMYK

cmyk(0%, 19%, 92%, 22%)

Oklch

oklch(72.0% 0.145 91.3)

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

#302C23

Ochre · DarkSlateGray · Amber Gold

HEX

#302C23

RGB

rgb(48, 44, 35)

HSL

hsl(42, 16%, 16%)

HSB

hsb(42, 27%, 19%)

CMYK

cmyk(0%, 8%, 27%, 81%)

Oklch

oklch(29.4% 0.017 86.9)

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

#7E6B5A

Tangerine · DimGray · Amber Brown

HEX

#7E6B5A

RGB

rgb(126, 107, 90)

HSL

hsl(28, 17%, 42%)

HSB

hsb(28, 29%, 49%)

CMYK

cmyk(0%, 15%, 29%, 51%)

Oklch

oklch(54.1% 0.035 63.8)

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

#484F5F

Indigo · DarkSlateGray · Prussian Blue

HEX

#484F5F

RGB

rgb(72, 79, 95)

HSL

hsl(222, 14%, 33%)

HSB

hsb(222, 24%, 37%)

CMYK

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

Oklch

oklch(42.8% 0.028 266.6)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E8C200

0026E6

Analogous

E64C00

E8C200

99E600

Triadic

E8C200

00E6BF

BF00E6

Split-Comp.

E8C200

0099E6

4C00E6

Tetradic

E8C200

00E64D

0026E6

E60099

Contrast Matrix WCAG 2.1 Contrast

E8C200	C6A00F	302C23	7E6B5A	484F5F
—	1.4 Fail	8.0 AAA	2.9 Fail	4.7 AA
1.4 Fail	—	5.6 AA	2.0 Fail	3.3 AA Large
8.0 AAA	5.6 AA	—	2.7 Fail	1.7 Fail
2.9 Fail	2.0 Fail	2.7 Fail	—	1.6 Fail
4.7 AA	3.3 AA Large	1.7 Fail	1.6 Fail	—

White BG

1.7Fail

2.5Fail

13.9AAA

5.1AA

8.2AAA

Black BG

12.1AAA

8.4AAA

1.5Fail

4.1AA Large

2.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D8D72F

B6B532

2E2E25

76765E

4B4B5B

Deuteranopia

DADD3A

B8BB3B

2F2F26

77785F

4B4A5A

Tritanopia

E6545C

C44E54

302727

7D6162

485857

Achromatopsia

B7B7B7

9B9B9B

2C2C2C

6F6F6F

4F4F4F

Shades & Tints Shades & Tints

#E8C200

Dark

Light

#C6A00F

Dark

Light

#302C23

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e8c200;
  --color-2: #c6a00f;
  --color-3: #302c23;
  --color-4: #7e6b5a;
  --color-5: #484f5f;
}

SCSS

$color-1: #e8c200;
$color-2: #c6a00f;
$color-3: #302c23;
$color-4: #7e6b5a;
$color-5: #484f5f;

TAILWIND

colors: {
  'brand-1': '#e8c200',
  'brand-2': '#c6a00f',
  'brand-3': '#302c23',
  'brand-4': '#7e6b5a',
  'brand-5': '#484f5f',
}

RGB Array

[232, 194, 0], [198, 160, 15], [48, 44, 35], [126, 107, 90], [72, 79, 95]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E8C200, #C6A00F, #302C23, #7E6B5A, #484F5F 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: #e8c200; --color-2: #c6a00f; --color-3: #302c23; --color-4: #7e6b5a; --color-5: #484f5f. 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