← Back to Editor

#C5DED9 · #752712 · #FF802B · #FAF75A · #F0EE84

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

Color Details Color Details

#C5DED9

Jade · LightGray · Glacier Blue

HEX
#C5DED9
RGB
rgb(197, 222, 217)
HSL
hsl(168, 27%, 82%)
HSB
hsb(168, 11%, 87%)
CMYK
cmyk(11%, 0%, 2%, 13%)
Oklch
oklch(88.1% 0.027 182.3)

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

#752712

Vermilion · Maroon · Wine Red

HEX
#752712
RGB
rgb(117, 39, 18)
HSL
hsl(13, 73%, 26%)
HSB
hsb(13, 85%, 46%)
CMYK
cmyk(0%, 67%, 85%, 54%)
Oklch
oklch(38.8% 0.114 35.7)

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

#FF802B

Tangerine · Coral · Warm Sun

HEX
#FF802B
RGB
rgb(255, 128, 43)
HSL
hsl(24, 100%, 58%)
HSB
hsb(24, 83%, 100%)
CMYK
cmyk(0%, 50%, 83%, 0%)
Oklch
oklch(73.3% 0.179 49.3)

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

#FAF75A

Fresh Green · Khaki · Sunflower

HEX
#FAF75A
RGB
rgb(250, 247, 90)
HSL
hsl(59, 94%, 67%)
HSB
hsb(59, 64%, 98%)
CMYK
cmyk(0%, 1%, 64%, 2%)
Oklch
oklch(95.1% 0.173 108.2)

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

#F0EE84

Fresh Green · Khaki · Sunflower

HEX
#F0EE84
RGB
rgb(240, 238, 132)
HSL
hsl(59, 78%, 73%)
HSB
hsb(59, 45%, 94%)
CMYK
cmyk(0%, 1%, 45%, 6%)
Oklch
oklch(92.9% 0.129 107.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C5DED9
DDC5CA

Analogous

C5DDCC
C5DED9
C5D6DD

Triadic

C5DED9
D9C5DD
DDD9C5

Split-Comp.

C5DED9
DDC5D6
DDCCC5

Tetradic

C5DED9
CCC5DD
DDC5CA
D6DDC5

Contrast Matrix WCAG 2.1 Contrast

C5DED9
752712
FF802B
FAF75A
F0EE84
—
7.2
AAA
1.8
Fail
1.2
Fail
1.2
Fail
7.2
AAA
—
4.1
AA Large
9.0
AAA
8.4
AAA
1.8
Fail
4.1
AA Large
—
2.2
Fail
2.1
Fail
1.2
Fail
9.0
AAA
2.2
Fail
—
1.1
Fail
1.2
Fail
8.4
AAA
2.1
Fail
1.1
Fail
—
White BG
1.4Fail
10.2AAA
2.5Fail
1.1Fail
1.2Fail
Black BG
14.8AAA
2.1Fail
8.4AAA
18.5AAA
17.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D0D0DA
535317
C8C740
F9F980
EFEF9E

Deuteranopia

CECCDA
585E18
CFD945
F9F989
EFEFA4

Tritanopia

C6DBDB
711B1C
F95053
FA9EA5
F0B2B6

Achromatopsia

D6D6D6
3C3C3C
9C9C9C
E6E6E6
E3E3E3

Shades & Tints Shades & Tints

#C5DED9

Dark
Light

#752712

Dark
Light

#FF802B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c5ded9;
  --color-2: #752712;
  --color-3: #ff802b;
  --color-4: #faf75a;
  --color-5: #f0ee84;
}

SCSS

$color-1: #c5ded9;
$color-2: #752712;
$color-3: #ff802b;
$color-4: #faf75a;
$color-5: #f0ee84;

TAILWIND

colors: {
  'brand-1': '#c5ded9',
  'brand-2': '#752712',
  'brand-3': '#ff802b',
  'brand-4': '#faf75a',
  'brand-5': '#f0ee84',
}

RGB Array

[197, 222, 217], [117, 39, 18], [255, 128, 43], [250, 247, 90], [240, 238, 132]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #C5DED9, #752712, #FF802B, #FAF75A, #F0EE84 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: #c5ded9; --color-2: #752712; --color-3: #ff802b; --color-4: #faf75a; --color-5: #f0ee84. 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 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