← Back to Editor

#E1A84F · #9D9C5C · #6B867D · #387383 · #302B2F

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

#E1A84F

Ginger · SandyBrown · Warm Sun

HEX
#E1A84F
RGB
rgb(225, 168, 79)
HSL
hsl(37, 71%, 60%)
HSB
hsb(37, 65%, 88%)
CMYK
cmyk(0%, 25%, 65%, 12%)
Oklch
oklch(76.8% 0.125 76.0)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#9D9C5C

Autumn Sage · Gray · Honey Gold

HEX
#9D9C5C
RGB
rgb(157, 156, 92)
HSL
hsl(59, 26%, 49%)
HSB
hsb(59, 41%, 62%)
CMYK
cmyk(0%, 1%, 41%, 38%)
Oklch
oklch(67.9% 0.086 107.7)

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

#6B867D

Mineral Blue · SlateGray · Mint Ice

HEX
#6B867D
RGB
rgb(107, 134, 125)
HSL
hsl(160, 11%, 47%)
HSB
hsb(160, 20%, 53%)
CMYK
cmyk(20%, 0%, 7%, 47%)
Oklch
oklch(59.6% 0.034 172.8)

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

#387383

Slate Blue · SeaGreen · Mint Ice

HEX
#387383
RGB
rgb(56, 115, 131)
HSL
hsl(193, 40%, 37%)
HSB
hsb(193, 57%, 51%)
CMYK
cmyk(57%, 12%, 0%, 49%)
Oklch
oklch(52.3% 0.066 217.9)

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

#302B2F

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#302B2F
RGB
rgb(48, 43, 47)
HSL
hsl(312, 5%, 18%)
HSB
hsb(312, 10%, 19%)
CMYK
cmyk(0%, 10%, 2%, 81%)
Oklch
oklch(29.6% 0.010 332.5)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E1A84F
5188E1

Analogous

E16151
E1A84F
D1E151

Triadic

E1A84F
51E1AA
AA51E1

Split-Comp.

E1A84F
51D1E1
6151E1

Tetradic

E1A84F
51E161
5188E1
E151D1

Contrast Matrix WCAG 2.1 Contrast

E1A84F
9D9C5C
6B867D
387383
302B2F
—
1.4
Fail
1.9
Fail
2.5
Fail
6.6
AA
1.4
Fail
—
1.4
Fail
1.9
Fail
4.9
AA
1.9
Fail
1.4
Fail
—
1.4
Fail
3.5
AA Large
2.5
Fail
1.9
Fail
1.4
Fail
—
2.6
Fail
6.6
AA
4.9
AA
3.5
AA Large
2.6
Fail
—
White BG
2.1Fail
2.9Fail
3.9AA Large
5.3AA
13.9AAA
Black BG
9.9AAA
7.3AAA
5.3AA
3.9AA Large
1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

C8C865
9D9D6B
77777F
52527F
2E2E2E

Deuteranopia

CCD06A
9D9D6F
757380
4E4A7E
2E2E2E

Tritanopia

DE7679
9D787A
6C8181
3B7C7B
302D2D

Achromatopsia

AFAFAF
959595
7D7D7D
636363
2D2D2D

Shades & Tints Shades & Tints

#E1A84F

Dark
Light

#9D9C5C

Dark
Light

#6B867D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e1a84f;
  --color-2: #9d9c5c;
  --color-3: #6b867d;
  --color-4: #387383;
  --color-5: #302b2f;
}

SCSS

$color-1: #e1a84f;
$color-2: #9d9c5c;
$color-3: #6b867d;
$color-4: #387383;
$color-5: #302b2f;

TAILWIND

colors: {
  'brand-1': '#e1a84f',
  'brand-2': '#9d9c5c',
  'brand-3': '#6b867d',
  'brand-4': '#387383',
  'brand-5': '#302b2f',
}

RGB Array

[225, 168, 79], [157, 156, 92], [107, 134, 125], [56, 115, 131], [48, 43, 47]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E1A84F, #9D9C5C, #6B867D, #387383, #302B2F is ideal for: 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: #e1a84f; --color-2: #9d9c5c; --color-3: #6b867d; --color-4: #387383; --color-5: #302b2f. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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