← Back to Editor

#FBDFD3 · #FDD58D · #D4AD48 · #D58E1A · #AD5E1B

coffee

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#FBDFD3

Apricot · Bisque · Peach Orange

HEX
#FBDFD3
RGB
rgb(251, 223, 211)
HSL
hsl(18, 83%, 91%)
HSB
hsb(18, 16%, 98%)
CMYK
cmyk(0%, 11%, 16%, 2%)
Oklch
oklch(92.3% 0.035 44.6)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#FDD58D

Goose Yellow · Khaki · Peach Orange

HEX
#FDD58D
RGB
rgb(253, 213, 141)
HSL
hsl(39, 97%, 77%)
HSB
hsb(39, 44%, 99%)
CMYK
cmyk(0%, 16%, 44%, 1%)
Oklch
oklch(89.1% 0.100 81.5)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#D4AD48

Ginger · SandyBrown · Sunflower

HEX
#D4AD48
RGB
rgb(212, 173, 72)
HSL
hsl(43, 62%, 56%)
HSB
hsb(43, 66%, 83%)
CMYK
cmyk(0%, 18%, 66%, 17%)
Oklch
oklch(76.4% 0.126 87.7)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#D58E1A

Ochre · GoldenRod · Amber Brown

HEX
#D58E1A
RGB
rgb(213, 142, 26)
HSL
hsl(37, 78%, 47%)
HSB
hsb(37, 88%, 84%)
CMYK
cmyk(0%, 33%, 88%, 16%)
Oklch
oklch(70.2% 0.144 72.1)

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

#AD5E1B

Tangerine · Sienna · Amber Brown

HEX
#AD5E1B
RGB
rgb(173, 94, 27)
HSL
hsl(28, 73%, 39%)
HSB
hsb(28, 84%, 68%)
CMYK
cmyk(0%, 46%, 84%, 32%)
Oklch
oklch(56.4% 0.127 55.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FBDFD3
D5F0FB

Analogous

FBD5DD
FBDFD3
FBF3D5

Triadic

FBDFD3
D5FBE0
E0D5FB

Split-Comp.

FBDFD3
D5FBF3
D5DDFB

Tetradic

FBDFD3
DDFBD5
D5F0FB
F3D5FB

Contrast Matrix WCAG 2.1 Contrast

FBDFD3
FDD58D
D4AD48
D58E1A
AD5E1B
—
1.1
Fail
1.7
Fail
2.2
Fail
3.8
AA Large
1.1
Fail
—
1.5
Fail
2.0
Fail
3.4
AA Large
1.7
Fail
1.5
Fail
—
1.3
Fail
2.2
Fail
2.2
Fail
2.0
Fail
1.3
Fail
—
1.8
Fail
3.8
AA Large
3.4
AA Large
2.2
Fail
1.8
Fail
—
White BG
1.3Fail
1.4Fail
2.1Fail
2.7Fail
4.8AA
Black BG
16.6AAA
15.1AAA
9.9AAA
7.7AAA
4.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

EFEFD6
ECEB9E
C3C360
B6B636
8B8A2B

Deuteranopia

F1F3D7
EEF1A3
C5C866
BAC03D
8F952F

Tritanopia

FAD8D9
FBACAF
D27478
D14C51
A9383B

Achromatopsia

E6E6E6
D9D9D9
ADADAD
969696
6E6E6E

Shades & Tints Shades & Tints

#FBDFD3

Dark
Light

#FDD58D

Dark
Light

#D4AD48

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fbdfd3;
  --color-2: #fdd58d;
  --color-3: #d4ad48;
  --color-4: #d58e1a;
  --color-5: #ad5e1b;
}

SCSS

$color-1: #fbdfd3;
$color-2: #fdd58d;
$color-3: #d4ad48;
$color-4: #d58e1a;
$color-5: #ad5e1b;

TAILWIND

colors: {
  'brand-1': '#fbdfd3',
  'brand-2': '#fdd58d',
  'brand-3': '#d4ad48',
  'brand-4': '#d58e1a',
  'brand-5': '#ad5e1b',
}

RGB Array

[251, 223, 211], [253, 213, 141], [212, 173, 72], [213, 142, 26], [173, 94, 27]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #FBDFD3, #FDD58D, #D4AD48, #D58E1A, #AD5E1B 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: #fbdfd3; --color-2: #fdd58d; --color-3: #d4ad48; --color-4: #d58e1a; --color-5: #ad5e1b. 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