← Back to Editor

#FDF19C · #32EDF1 · #9EE7EF · #D9F6F7 · #9B9160

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

#FDF19C

Fresh Green · Khaki · Lemon Cream

HEX
#FDF19C
RGB
rgb(253, 241, 156)
HSL
hsl(53, 96%, 80%)
HSB
hsb(53, 38%, 99%)
CMYK
cmyk(0%, 5%, 38%, 1%)
Oklch
oklch(94.9% 0.106 101.2)

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

#32EDF1

Lake Blue · Turquoise · Lake Green

HEX
#32EDF1
RGB
rgb(50, 237, 241)
HSL
hsl(181, 87%, 57%)
HSB
hsb(181, 79%, 95%)
CMYK
cmyk(79%, 2%, 0%, 5%)
Oklch
oklch(86.2% 0.139 197.2)

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

#9EE7EF

Sky Blue · LightBlue · Glacier Blue

HEX
#9EE7EF
RGB
rgb(158, 231, 239)
HSL
hsl(186, 72%, 78%)
HSB
hsb(186, 34%, 94%)
CMYK
cmyk(34%, 3%, 0%, 6%)
Oklch
oklch(88.3% 0.073 204.6)

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

#D9F6F7

Sky Blue · Lavender · Glacier Blue

HEX
#D9F6F7
RGB
rgb(217, 246, 247)
HSL
hsl(182, 65%, 91%)
HSB
hsb(182, 12%, 97%)
CMYK
cmyk(12%, 0%, 0%, 3%)
Oklch
oklch(95.3% 0.030 199.2)

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

#9B9160

Autumn Sage · Gray · Honey Gold

HEX
#9B9160
RGB
rgb(155, 145, 96)
HSL
hsl(50, 24%, 49%)
HSB
hsb(50, 38%, 61%)
CMYK
cmyk(0%, 6%, 38%, 39%)
Oklch
oklch(65.3% 0.068 98.1)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FDF19C
9BA6FD

Analogous

FDC19B
FDF19C
D7FD9B

Triadic

FDF19C
9BFDF2
F29BFD

Split-Comp.

FDF19C
9BD7FD
C19BFD

Tetradic

FDF19C
9BFDC1
9BA6FD
FD9BD7

Contrast Matrix WCAG 2.1 Contrast

FDF19C
32EDF1
9EE7EF
D9F6F7
9B9160
—
1.3
Fail
1.2
Fail
1.0
Fail
2.8
Fail
1.3
Fail
—
1.0
Fail
1.3
Fail
2.2
Fail
1.2
Fail
1.0
Fail
—
1.2
Fail
2.3
Fail
1.0
Fail
1.3
Fail
1.2
Fail
—
2.8
Fail
2.8
Fail
2.2
Fail
2.3
Fail
2.8
Fail
—
White BG
1.2Fail
1.4Fail
1.4Fail
1.1Fail
3.2AA Large
Black BG
18.2AAA
14.5AAA
15.1AAA
18.5AAA
6.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F8F8B1
8385F0
BEBEED
E6E6F7
97976C

Deuteranopia

F9F9B6
786AF0
B9B4ED
E4E2F7
97986F

Tritanopia

FCC1C4
3BEFEF
A2ECEB
DAF7F7
9B7577

Achromatopsia

EBEBEB
B6B6B6
D2D2D2
EDEDED
8E8E8E

Shades & Tints Shades & Tints

#FDF19C

Dark
Light

#32EDF1

Dark
Light

#9EE7EF

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fdf19c;
  --color-2: #32edf1;
  --color-3: #9ee7ef;
  --color-4: #d9f6f7;
  --color-5: #9b9160;
}

SCSS

$color-1: #fdf19c;
$color-2: #32edf1;
$color-3: #9ee7ef;
$color-4: #d9f6f7;
$color-5: #9b9160;

TAILWIND

colors: {
  'brand-1': '#fdf19c',
  'brand-2': '#32edf1',
  'brand-3': '#9ee7ef',
  'brand-4': '#d9f6f7',
  'brand-5': '#9b9160',
}

RGB Array

[253, 241, 156], [50, 237, 241], [158, 231, 239], [217, 246, 247], [155, 145, 96]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #FDF19C, #32EDF1, #9EE7EF, #D9F6F7, #9B9160 is ideal for: social media posters, mobile apps, e-commerce promos, health products, baby brands, fresh-style blogs, 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: #fdf19c; --color-2: #32edf1; --color-3: #9ee7ef; --color-4: #d9f6f7; --color-5: #9b9160. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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