← Back to Editor

#E0AE16 · #CFA423 · #AB8E38 · #7D6D3E · #171617

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#E0AE16

Ochre · GoldenRod · Honey Gold

HEX
#E0AE16
RGB
rgb(224, 174, 22)
HSL
hsl(45, 82%, 48%)
HSB
hsb(45, 90%, 88%)
CMYK
cmyk(0%, 22%, 90%, 12%)
Oklch
oklch(77.5% 0.155 87.1)

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

#CFA423

Ochre · GoldenRod · Honey Gold

HEX
#CFA423
RGB
rgb(207, 164, 35)
HSL
hsl(45, 71%, 47%)
HSB
hsb(45, 83%, 81%)
CMYK
cmyk(0%, 21%, 83%, 19%)
Oklch
oklch(73.8% 0.142 88.3)

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

#AB8E38

Ochre · DarkGoldenRod · Honey Gold

HEX
#AB8E38
RGB
rgb(171, 142, 56)
HSL
hsl(45, 51%, 45%)
HSB
hsb(45, 67%, 67%)
CMYK
cmyk(0%, 17%, 67%, 33%)
Oklch
oklch(65.7% 0.109 90.3)

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

#7D6D3E

Ochre · DarkOliveGreen · Honey Gold

HEX
#7D6D3E
RGB
rgb(125, 109, 62)
HSL
hsl(45, 34%, 37%)
HSB
hsb(45, 50%, 49%)
CMYK
cmyk(0%, 13%, 50%, 51%)
Oklch
oklch(53.9% 0.068 91.2)

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

#171617

Ink Black · Black · Jet Black

HEX
#171617
RGB
rgb(23, 22, 23)
HSL
hsl(300, 2%, 9%)
HSB
hsb(300, 4%, 9%)
CMYK
cmyk(0%, 4%, 0%, 91%)
Oklch
oklch(20.2% 0.003 325.7)

Traditional「Ink Black」· Paint「Jet Black」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E0AE16
1648DF

Analogous

DF4816
E0AE16
ADDF16

Triadic

E0AE16
16DFAD
AD16DF

Split-Comp.

E0AE16
16ADDF
4816DF

Tetradic

E0AE16
16DF48
1648DF
DF16AD

Contrast Matrix WCAG 2.1 Contrast

E0AE16
CFA423
AB8E38
7D6D3E
171617
—
1.1
Fail
1.5
Fail
2.5
Fail
8.8
AAA
1.1
Fail
—
1.3
Fail
2.2
Fail
7.7
AAA
1.5
Fail
1.3
Fail
—
1.6
Fail
5.7
AA
2.5
Fail
2.2
Fail
1.6
Fail
—
3.5
AA Large
8.8
AAA
7.7
AAA
5.7
AA
3.5
AA Large
—
White BG
2.1Fail
2.3Fail
3.2AA Large
5.1AA
18.0AAA
Black BG
10.2AAA
9.0AAA
6.7AA
4.1AA Large
1.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

CACA3B
BCBC42
9E9E4D
767649
171717

Deuteranopia

CDD144
BFC24A
A0A252
77784C
171717

Tritanopia

DD585E
CD5B60
AA5D61
7C5254
171717

Achromatopsia

ACACAC
A2A2A2
8D8D8D
6C6C6C
161616

Shades & Tints Shades & Tints

#E0AE16

Dark
Light

#CFA423

Dark
Light

#AB8E38

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e0ae16;
  --color-2: #cfa423;
  --color-3: #ab8e38;
  --color-4: #7d6d3e;
  --color-5: #171617;
}

SCSS

$color-1: #e0ae16;
$color-2: #cfa423;
$color-3: #ab8e38;
$color-4: #7d6d3e;
$color-5: #171617;

TAILWIND

colors: {
  'brand-1': '#e0ae16',
  'brand-2': '#cfa423',
  'brand-3': '#ab8e38',
  'brand-4': '#7d6d3e',
  'brand-5': '#171617',
}

RGB Array

[224, 174, 22], [207, 164, 35], [171, 142, 56], [125, 109, 62], [23, 22, 23]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E0AE16, #CFA423, #AB8E38, #7D6D3E, #171617 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: #e0ae16; --color-2: #cfa423; --color-3: #ab8e38; --color-4: #7d6d3e; --color-5: #171617. 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