← Back to Editor

#E0E4D3 · #837B86 · #653B47 · #C78062 · #FEC166

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 LibraryData Visualization

Color Details Color Details

#E0E4D3

Willow Green · LightGray · Mint Green

HEX
#E0E4D3
RGB
rgb(224, 228, 211)
HSL
hsl(74, 24%, 86%)
HSB
hsb(74, 7%, 89%)
CMYK
cmyk(2%, 0%, 7%, 11%)
Oklch
oklch(91.1% 0.023 117.6)

Traditional「Willow Green」· Paint「Mint Green」· Creative Mint Breeze

#837B86

Ink Gray · Gray · Warm Gray

HEX
#837B86
RGB
rgb(131, 123, 134)
HSL
hsl(284, 4%, 50%)
HSB
hsb(284, 8%, 53%)
CMYK
cmyk(2%, 8%, 0%, 47%)
Oklch
oklch(59.4% 0.019 316.9)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

#653B47

Dark Violet · DarkOliveGreen · Camellia

HEX
#653B47
RGB
rgb(101, 59, 71)
HSL
hsl(343, 26%, 31%)
HSB
hsb(343, 42%, 40%)
CMYK
cmyk(0%, 42%, 30%, 60%)
Oklch
oklch(40.7% 0.061 1.7)

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

#C78062

Tangerine · DarkSalmon · Warm Sun

HEX
#C78062
RGB
rgb(199, 128, 98)
HSL
hsl(18, 47%, 58%)
HSB
hsb(18, 51%, 78%)
CMYK
cmyk(0%, 36%, 51%, 22%)
Oklch
oklch(66.7% 0.098 43.6)

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

#FEC166

Ginger · SandyBrown · Warm Sun

HEX
#FEC166
RGB
rgb(254, 193, 102)
HSL
hsl(36, 99%, 70%)
HSB
hsb(36, 60%, 100%)
CMYK
cmyk(0%, 24%, 60%, 0%)
Oklch
oklch(84.9% 0.129 75.5)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E0E4D3
D7D3E4

Analogous

E4DFD3
E0E4D3
D7E4D3

Triadic

E0E4D3
D3E0E4
E4D3E0

Split-Comp.

E0E4D3
D3D7E4
DFD3E4

Tetradic

E0E4D3
D3E4DF
D7D3E4
E4D3D7

Contrast Matrix WCAG 2.1 Contrast

E0E4D3
837B86
653B47
C78062
FEC166
—
3.2
AA Large
7.1
AAA
2.4
Fail
1.2
Fail
3.2
AA Large
—
2.3
Fail
1.3
Fail
2.5
Fail
7.1
AAA
2.3
Fail
—
2.9
Fail
5.7
AA
2.4
Fail
1.3
Fail
2.9
Fail
—
1.9
Fail
1.2
Fail
2.5
Fail
5.7
AA
1.9
Fail
—
White BG
1.3Fail
4.1AA Large
9.3AAA
3.1AA Large
1.6Fail
Black BG
16.2AAA
5.1AA
2.3Fail
6.7AA
13.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E2E2D7
807F83
535244
A8A869
E4E37C

Deuteranopia

E2E1D8
808183
555843
ACB26B
E7EC81

Tritanopia

E0DADB
838181
634241
C36F70
FB8D91

Achromatopsia

E1E1E1
7F7F7F
494949
929292
C9C9C9

Shades & Tints Shades & Tints

#E0E4D3

Dark
Light

#837B86

Dark
Light

#653B47

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e0e4d3;
  --color-2: #837b86;
  --color-3: #653b47;
  --color-4: #c78062;
  --color-5: #fec166;
}

SCSS

$color-1: #e0e4d3;
$color-2: #837b86;
$color-3: #653b47;
$color-4: #c78062;
$color-5: #fec166;

TAILWIND

colors: {
  'brand-1': '#e0e4d3',
  'brand-2': '#837b86',
  'brand-3': '#653b47',
  'brand-4': '#c78062',
  'brand-5': '#fec166',
}

RGB Array

[224, 228, 211], [131, 123, 134], [101, 59, 71], [199, 128, 98], [254, 193, 102]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E0E4D3, #837B86, #653B47, #C78062, #FEC166 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: #e0e4d3; --color-2: #837b86; --color-3: #653b47; --color-4: #c78062; --color-5: #fec166. 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