← Back to Editor

#E3A009 · #901151 · #312234 · #5B676C · #8CA39E

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#E3A009

Ochre · GoldenRod · Honey Gold

HEX
#E3A009
RGB
rgb(227, 160, 9)
HSL
hsl(42, 92%, 46%)
HSB
hsb(42, 96%, 89%)
CMYK
cmyk(0%, 30%, 96%, 11%)
Oklch
oklch(75.1% 0.155 78.3)

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

#901151

Dark Violet · Brown · Camellia

HEX
#901151
RGB
rgb(144, 17, 81)
HSL
hsl(330, 79%, 32%)
HSB
hsb(330, 88%, 56%)
CMYK
cmyk(0%, 88%, 44%, 44%)
Oklch
oklch(43.2% 0.165 357.4)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#312234

Dark Plum · DarkSlateGray · Dark Purple

HEX
#312234
RGB
rgb(49, 34, 52)
HSL
hsl(290, 21%, 17%)
HSB
hsb(290, 35%, 20%)
CMYK
cmyk(6%, 35%, 0%, 80%)
Oklch
oklch(27.8% 0.039 320.7)

Traditional「Dark Plum」· Paint「Dark Purple」· Creative Blush Sunrise

#5B676C

Slate Blue · DimGray · Charcoal

HEX
#5B676C
RGB
rgb(91, 103, 108)
HSL
hsl(198, 9%, 39%)
HSB
hsb(198, 16%, 42%)
CMYK
cmyk(16%, 5%, 0%, 58%)
Oklch
oklch(50.5% 0.017 224.7)

Traditional「Slate Blue」· Paint「Charcoal」· Creative Midnight Shadow

#8CA39E

Mineral Blue · DarkSeaGreen · Lake Green

HEX
#8CA39E
RGB
rgb(140, 163, 158)
HSL
hsl(167, 11%, 59%)
HSB
hsb(167, 14%, 64%)
CMYK
cmyk(14%, 0%, 3%, 36%)
Oklch
oklch(69.6% 0.027 180.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E3A009
094AE1

Analogous

E13509
E3A009
B6E109

Triadic

E3A009
09E1A0
A009E1

Split-Comp.

E3A009
09B6E1
3509E1

Tetradic

E3A009
09E135
094AE1
E109B6

Contrast Matrix WCAG 2.1 Contrast

E3A009
901151
312234
5B676C
8CA39E
—
3.9
AA Large
6.6
AA
2.6
Fail
1.2
Fail
3.9
AA Large
—
1.7
Fail
1.5
Fail
3.3
AA Large
6.6
AA
1.7
Fail
—
2.6
Fail
5.6
AA
2.6
Fail
1.5
Fail
2.6
Fail
—
2.2
Fail
1.2
Fail
3.3
AA Large
5.6
AA
2.2
Fail
—
White BG
2.3Fail
8.8AAA
14.9AAA
5.8AA
2.7Fail
Black BG
9.3AAA
2.4Fail
1.4Fail
3.6AA Large
7.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C6C52E
595842
2B2A30
60606B
96969F

Deuteranopia

CACF36
606A3E
2B2D2F
605F6B
9593A0

Tritanopia

E04A51
8A3533
302C2B
5C6A6A
8DA0A0

Achromatopsia

A3A3A3
3E3E3E
292929
646464
9C9C9C

Shades & Tints Shades & Tints

#E3A009

Dark
Light

#901151

Dark
Light

#312234

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e3a009;
  --color-2: #901151;
  --color-3: #312234;
  --color-4: #5b676c;
  --color-5: #8ca39e;
}

SCSS

$color-1: #e3a009;
$color-2: #901151;
$color-3: #312234;
$color-4: #5b676c;
$color-5: #8ca39e;

TAILWIND

colors: {
  'brand-1': '#e3a009',
  'brand-2': '#901151',
  'brand-3': '#312234',
  'brand-4': '#5b676c',
  'brand-5': '#8ca39e',
}

RGB Array

[227, 160, 9], [144, 17, 81], [49, 34, 52], [91, 103, 108], [140, 163, 158]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E3A009, #901151, #312234, #5B676C, #8CA39E is ideal for: tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #e3a009; --color-2: #901151; --color-3: #312234; --color-4: #5b676c; --color-5: #8ca39e. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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