← Back to Editor

#E0C99F · #86B7B1 · #48756E · #2F3A32 · #CB3E2D

warm

A 5-color warm 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

#E0C99F

Goose Yellow · BurlyWood · Warm Sun

HEX
#E0C99F
RGB
rgb(224, 201, 159)
HSL
hsl(39, 51%, 75%)
HSB
hsb(39, 29%, 88%)
CMYK
cmyk(0%, 10%, 29%, 12%)
Oklch
oklch(84.5% 0.061 82.5)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#86B7B1

Jade · DarkSeaGreen · Lake Green

HEX
#86B7B1
RGB
rgb(134, 183, 177)
HSL
hsl(173, 25%, 62%)
HSB
hsb(173, 27%, 72%)
CMYK
cmyk(27%, 0%, 3%, 28%)
Oklch
oklch(74.3% 0.053 186.7)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#48756E

Mineral Blue · DimGray · Mint Ice

HEX
#48756E
RGB
rgb(72, 117, 110)
HSL
hsl(171, 24%, 37%)
HSB
hsb(171, 38%, 46%)
CMYK
cmyk(38%, 0%, 6%, 54%)
Oklch
oklch(52.8% 0.051 183.4)

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

#2F3A32

Celadon · DarkSlateGray · Forest Green

HEX
#2F3A32
RGB
rgb(47, 58, 50)
HSL
hsl(136, 10%, 21%)
HSB
hsb(136, 19%, 23%)
CMYK
cmyk(19%, 0%, 14%, 77%)
Oklch
oklch(33.6% 0.020 153.6)

Traditional「Celadon」· Paint「Forest Green」· Creative Blush Sunrise

#CB3E2D

Vermilion · FireBrick · Passion Red

HEX
#CB3E2D
RGB
rgb(203, 62, 45)
HSL
hsl(6, 64%, 49%)
HSB
hsb(6, 78%, 80%)
CMYK
cmyk(0%, 69%, 78%, 20%)
Oklch
oklch(56.8% 0.181 30.3)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E0C99F
9FB5E0

Analogous

E0A89F
E0C99F
D6E09F

Triadic

E0C99F
9FE0C9
C99FE0

Split-Comp.

E0C99F
9FD6E0
A89FE0

Tetradic

E0C99F
9FE0A8
9FB5E0
E09FD6

Contrast Matrix WCAG 2.1 Contrast

E0C99F
86B7B1
48756E
2F3A32
CB3E2D
—
1.4
Fail
3.2
AA Large
7.3
AAA
3.1
AA Large
1.4
Fail
—
2.3
Fail
5.3
AA
2.2
Fail
3.2
AA Large
2.3
Fail
—
2.3
Fail
1.1
Fail
7.3
AAA
5.3
AA
2.3
Fail
—
2.4
Fail
3.1
AA Large
2.2
Fail
1.1
Fail
2.4
Fail
—
White BG
1.6Fail
2.2Fail
5.2AA
11.9AAA
4.9AA
Black BG
13.0AAA
9.4AAA
4.0AA Large
1.8Fail
4.3AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

D6D6A9
9B9CB2
5B5C70
343434
8E8D31

Deuteranopia

D7D9AC
9895B3
595670
333234
96A132

Tritanopia

DFB1B3
88B4B4
4A7171
303536
C43435

Achromatopsia

CBCBCB
A8A8A8
676767
363636
666666

Shades & Tints Shades & Tints

#E0C99F

Dark
Light

#86B7B1

Dark
Light

#48756E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e0c99f;
  --color-2: #86b7b1;
  --color-3: #48756e;
  --color-4: #2f3a32;
  --color-5: #cb3e2d;
}

SCSS

$color-1: #e0c99f;
$color-2: #86b7b1;
$color-3: #48756e;
$color-4: #2f3a32;
$color-5: #cb3e2d;

TAILWIND

colors: {
  'brand-1': '#e0c99f',
  'brand-2': '#86b7b1',
  'brand-3': '#48756e',
  'brand-4': '#2f3a32',
  'brand-5': '#cb3e2d',
}

RGB Array

[224, 201, 159], [134, 183, 177], [72, 117, 110], [47, 58, 50], [203, 62, 45]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #E0C99F, #86B7B1, #48756E, #2F3A32, #CB3E2D 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: #e0c99f; --color-2: #86b7b1; --color-3: #48756e; --color-4: #2f3a32; --color-5: #cb3e2d. 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 warm-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