← Back to Editor

#8E340C · #DE804C · #E3A976 · #E1B282 · #BEE2DF

cool

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#8E340C

Tangerine · Brown · Amber Brown

HEX
#8E340C
RGB
rgb(142, 52, 12)
HSL
hsl(18, 84%, 30%)
HSB
hsb(18, 92%, 56%)
CMYK
cmyk(0%, 63%, 92%, 44%)
Oklch
oklch(44.9% 0.131 40.5)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#DE804C

Tangerine · Coral · Warm Sun

HEX
#DE804C
RGB
rgb(222, 128, 76)
HSL
hsl(21, 69%, 58%)
HSB
hsb(21, 66%, 87%)
CMYK
cmyk(0%, 42%, 66%, 13%)
Oklch
oklch(69.2% 0.134 48.3)

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

#E3A976

Apricot · DarkSalmon · Warm Sun

HEX
#E3A976
RGB
rgb(227, 169, 118)
HSL
hsl(28, 66%, 68%)
HSB
hsb(28, 48%, 89%)
CMYK
cmyk(0%, 26%, 48%, 11%)
Oklch
oklch(77.8% 0.096 62.0)

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

#E1B282

Ginger · BurlyWood · Warm Sun

HEX
#E1B282
RGB
rgb(225, 178, 130)
HSL
hsl(30, 61%, 70%)
HSB
hsb(30, 42%, 88%)
CMYK
cmyk(0%, 21%, 42%, 12%)
Oklch
oklch(79.5% 0.084 66.7)

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

#BEE2DF

Jade · LightBlue · Glacier Blue

HEX
#BEE2DF
RGB
rgb(190, 226, 223)
HSL
hsl(175, 38%, 82%)
HSB
hsb(175, 16%, 89%)
CMYK
cmyk(16%, 0%, 1%, 11%)
Oklch
oklch(88.6% 0.038 190.3)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8E340C
0C668D

Analogous

8D0C26
8E340C
8D730C

Triadic

8E340C
0C8D33
330C8D

Split-Comp.

8E340C
0C8D73
0C268D

Tetradic

8E340C
268D0C
0C668D
730C8D

Contrast Matrix WCAG 2.1 Contrast

8E340C
DE804C
E3A976
E1B282
BEE2DF
—
2.8
Fail
3.9
AA Large
4.1
AA Large
5.7
AA
2.8
Fail
—
1.4
Fail
1.5
Fail
2.1
Fail
3.9
AA Large
1.4
Fail
—
1.1
Fail
1.5
Fail
4.1
AA Large
1.5
Fail
1.1
Fail
—
1.4
Fail
5.7
AA
2.1
Fail
1.5
Fail
1.4
Fail
—
White BG
7.9AAA
2.9Fail
2.1Fail
1.9Fail
1.4Fail
Black BG
2.6Fail
7.3AAA
10.2AAA
10.9AAA
15.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

676616
B5B459
CAC982
CDCC8E
CECEE0

Deuteranopia

6C7318
BBC25C
CDD285
CFD390
CCC9E0

Tritanopia

8A1D1F
D96365
E08C8E
DF9799
C0E0E0

Achromatopsia

4A4A4A
969696
B5B5B5
BBBBBB
D7D7D7

Shades & Tints Shades & Tints

#8E340C

Dark
Light

#DE804C

Dark
Light

#E3A976

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8e340c;
  --color-2: #de804c;
  --color-3: #e3a976;
  --color-4: #e1b282;
  --color-5: #bee2df;
}

SCSS

$color-1: #8e340c;
$color-2: #de804c;
$color-3: #e3a976;
$color-4: #e1b282;
$color-5: #bee2df;

TAILWIND

colors: {
  'brand-1': '#8e340c',
  'brand-2': '#de804c',
  'brand-3': '#e3a976',
  'brand-4': '#e1b282',
  'brand-5': '#bee2df',
}

RGB Array

[142, 52, 12], [222, 128, 76], [227, 169, 118], [225, 178, 130], [190, 226, 223]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #8E340C, #DE804C, #E3A976, #E1B282, #BEE2DF is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #8e340c; --color-2: #de804c; --color-3: #e3a976; --color-4: #e1b282; --color-5: #bee2df. 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 cool-style 5-color scheme is especially suited for food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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