← Back to Editor

#E3D97A · #10E2F8 · #85877B · #3E7AFF · #0950DC

coffee

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial App

Color Details Color Details

#E3D97A

Fresh Green · Khaki · Sunflower

HEX
#E3D97A
RGB
rgb(227, 217, 122)
HSL
hsl(54, 65%, 68%)
HSB
hsb(54, 46%, 89%)
CMYK
cmyk(0%, 4%, 46%, 11%)
Oklch
oklch(87.3% 0.117 103.2)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#10E2F8

Lake Blue · Cyan · Lake Green

HEX
#10E2F8
RGB
rgb(16, 226, 248)
HSL
hsl(186, 94%, 52%)
HSB
hsb(186, 94%, 97%)
CMYK
cmyk(94%, 9%, 0%, 3%)
Oklch
oklch(83.5% 0.142 207.4)

Traditional「Lake Blue」· Paint「Lake Green」· Creative Blush Sunrise

#85877B

Ash · Gray · Warm Gray

HEX
#85877B
RGB
rgb(133, 135, 123)
HSL
hsl(70, 5%, 51%)
HSB
hsb(70, 9%, 53%)
CMYK
cmyk(1%, 0%, 9%, 47%)
Oklch
oklch(61.8% 0.018 114.6)

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

#3E7AFF

Azure · DodgerBlue · Cobalt Blue

HEX
#3E7AFF
RGB
rgb(62, 122, 255)
HSL
hsl(221, 100%, 62%)
HSB
hsb(221, 76%, 100%)
CMYK
cmyk(76%, 52%, 0%, 0%)
Oklch
oklch(61.4% 0.208 263.3)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#0950DC

Indigo · DodgerBlue · Navy Blue

HEX
#0950DC
RGB
rgb(9, 80, 220)
HSL
hsl(220, 92%, 45%)
HSB
hsb(220, 96%, 86%)
CMYK
cmyk(96%, 64%, 0%, 14%)
Oklch
oklch(49.2% 0.223 262.3)

Traditional「Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E3D97A
7883E2

Analogous

E2A378
E3D97A
B8E278

Triadic

E3D97A
78E2D8
D878E2

Split-Comp.

E3D97A
78B8E2
A378E2

Tetradic

E3D97A
78E2A3
7883E2
E278B8

Contrast Matrix WCAG 2.1 Contrast

E3D97A
10E2F8
85877B
3E7AFF
0950DC
—
1.1
Fail
2.5
Fail
2.7
Fail
4.5
AA
1.1
Fail
—
2.3
Fail
2.4
Fail
4.2
AA Large
2.5
Fail
2.3
Fail
—
1.1
Fail
1.8
Fail
2.7
Fail
2.4
Fail
1.1
Fail
—
1.7
Fail
4.5
AA
4.2
AA Large
1.8
Fail
1.7
Fail
—
White BG
1.5Fail
1.6Fail
3.7AA Large
3.9AA Large
6.6AA
Black BG
14.5AAA
13.3AAA
5.7AA
5.4AA
3.2AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

DFDF91
6B6DF3
86867E
5859DF
2828BA

Deuteranopia

DFE097
5F4FF1
86867F
5550D7
241EB2

Tritanopia

E2A3A7
1BEEEE
858081
41C5C0
0D9F9A

Achromatopsia

D1D1D1
A6A6A6
858585
777777
4B4B4B

Shades & Tints Shades & Tints

#E3D97A

Dark
Light

#10E2F8

Dark
Light

#85877B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e3d97a;
  --color-2: #10e2f8;
  --color-3: #85877b;
  --color-4: #3e7aff;
  --color-5: #0950dc;
}

SCSS

$color-1: #e3d97a;
$color-2: #10e2f8;
$color-3: #85877b;
$color-4: #3e7aff;
$color-5: #0950dc;

TAILWIND

colors: {
  'brand-1': '#e3d97a',
  'brand-2': '#10e2f8',
  'brand-3': '#85877b',
  'brand-4': '#3e7aff',
  'brand-5': '#0950dc',
}

RGB Array

[227, 217, 122], [16, 226, 248], [133, 135, 123], [62, 122, 255], [9, 80, 220]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #E3D97A, #10E2F8, #85877B, #3E7AFF, #0950DC is ideal for: social media posters, mobile apps, e-commerce promos. Vivid colors effectively attract user attention. 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: #e3d97a; --color-2: #10e2f8; --color-3: #85877b; --color-4: #3e7aff; --color-5: #0950dc. 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. 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 coffee-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