← Back to Editor

#EDC840 · #8A8E4C · #3A6269 · #30424F · #222935

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

#EDC840

Ginger · SandyBrown · Sunflower

HEX
#EDC840
RGB
rgb(237, 200, 64)
HSL
hsl(47, 83%, 59%)
HSB
hsb(47, 73%, 93%)
CMYK
cmyk(0%, 16%, 73%, 7%)
Oklch
oklch(84.2% 0.152 93.2)

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

#8A8E4C

Autumn Sage · Gray · Honey Gold

HEX
#8A8E4C
RGB
rgb(138, 142, 76)
HSL
hsl(64, 30%, 43%)
HSB
hsb(64, 46%, 56%)
CMYK
cmyk(3%, 0%, 46%, 44%)
Oklch
oklch(62.8% 0.089 111.7)

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

#3A6269

Slate Blue · DarkSlateGray · Mint Ice

HEX
#3A6269
RGB
rgb(58, 98, 105)
HSL
hsl(189, 29%, 32%)
HSB
hsb(189, 45%, 41%)
CMYK
cmyk(45%, 7%, 0%, 59%)
Oklch
oklch(46.9% 0.046 209.8)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#30424F

Slate Blue · DarkSlateGray · Prussian Blue

HEX
#30424F
RGB
rgb(48, 66, 79)
HSL
hsl(205, 24%, 25%)
HSB
hsb(205, 39%, 31%)
CMYK
cmyk(39%, 16%, 0%, 69%)
Oklch
oklch(36.9% 0.032 240.1)

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

#222935

Indigo · DarkSlateGray · Deep Sea Blue

HEX
#222935
RGB
rgb(34, 41, 53)
HSL
hsl(218, 22%, 17%)
HSB
hsb(218, 36%, 21%)
CMYK
cmyk(36%, 23%, 0%, 79%)
Oklch
oklch(28.0% 0.024 261.1)

Traditional「Indigo」· Paint「Deep Sea Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

EDC840
4065ED

Analogous

ED7140
EDC840
BCED40

Triadic

EDC840
40EDC8
C840ED

Split-Comp.

EDC840
40BCED
7140ED

Tetradic

EDC840
40ED71
4065ED
ED40BC

Contrast Matrix WCAG 2.1 Contrast

EDC840
8A8E4C
3A6269
30424F
222935
—
2.1
Fail
4.1
AA Large
6.4
AA
9.0
AAA
2.1
Fail
—
1.9
Fail
3.0
AA Large
4.2
AA Large
4.1
AA Large
1.9
Fail
—
1.6
Fail
2.2
Fail
6.4
AA
3.0
AA Large
1.6
Fail
—
1.4
Fail
9.0
AAA
4.2
AA Large
2.2
Fail
1.4
Fail
—
White BG
1.6Fail
3.5AA Large
6.7AA
10.4AAA
14.6AAA
Black BG
12.9AAA
6.1AA
3.1AA Large
2.0Fail
1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

DDDD61
8C8C5C
4B4C67
38384C
252532

Deuteranopia

DFE269
8C8B60
494667
37354B
252431

Tritanopia

EB7B81
8A696B
3C6666
314949
22302F

Achromatopsia

C4C4C4
858585
575757
3E3E3E
282828

Shades & Tints Shades & Tints

#EDC840

Dark
Light

#8A8E4C

Dark
Light

#3A6269

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #edc840;
  --color-2: #8a8e4c;
  --color-3: #3a6269;
  --color-4: #30424f;
  --color-5: #222935;
}

SCSS

$color-1: #edc840;
$color-2: #8a8e4c;
$color-3: #3a6269;
$color-4: #30424f;
$color-5: #222935;

TAILWIND

colors: {
  'brand-1': '#edc840',
  'brand-2': '#8a8e4c',
  'brand-3': '#3a6269',
  'brand-4': '#30424f',
  'brand-5': '#222935',
}

RGB Array

[237, 200, 64], [138, 142, 76], [58, 98, 105], [48, 66, 79], [34, 41, 53]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #EDC840, #8A8E4C, #3A6269, #30424F, #222935 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: #edc840; --color-2: #8a8e4c; --color-3: #3a6269; --color-4: #30424f; --color-5: #222935. 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