#F8E8D8 + #E2C5A5 + #D99447 + #E8CD7E + #DBDBD9 · coffee - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F8E8D8

Goose Yellow · Beige · Peach Orange

HEX

#F8E8D8

RGB

rgb(248, 232, 216)

HSL

hsl(30, 70%, 91%)

HSB

hsb(30, 13%, 97%)

CMYK

cmyk(0%, 6%, 13%, 3%)

Oklch

oklch(93.9% 0.028 67.5)

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

#E2C5A5

Goose Yellow · BurlyWood · Peach Orange

HEX

#E2C5A5

RGB

rgb(226, 197, 165)

HSL

hsl(31, 51%, 77%)

HSB

hsb(31, 27%, 89%)

CMYK

cmyk(0%, 13%, 27%, 11%)

Oklch

oklch(84.0% 0.054 69.7)

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

#D99447

Ginger · SandyBrown · Warm Sun

HEX

#D99447

RGB

rgb(217, 148, 71)

HSL

hsl(32, 66%, 56%)

HSB

hsb(32, 67%, 85%)

CMYK

cmyk(0%, 32%, 67%, 15%)

Oklch

oklch(72.1% 0.124 66.4)

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

#E8CD7E

Ginger · BurlyWood · Sunflower

HEX

#E8CD7E

RGB

rgb(232, 205, 126)

HSL

hsl(45, 70%, 70%)

HSB

hsb(45, 46%, 91%)

CMYK

cmyk(0%, 12%, 46%, 9%)

Oklch

oklch(85.4% 0.103 91.2)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#DBDBD9

Silver Gray · LightGray · Pearl Gray

HEX

#DBDBD9

RGB

rgb(219, 219, 217)

HSL

hsl(60, 3%, 85%)

HSB

hsb(60, 1%, 86%)

CMYK

cmyk(0%, 0%, 1%, 14%)

Oklch

oklch(89.1% 0.003 106.5)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F8E8D8

D8E8F8

Analogous

F8D8D8

F8E8D8

F8F8D8

Triadic

F8E8D8

D8F8E8

E8D8F8

Split-Comp.

F8E8D8

D8F8F8

D8D8F8

Tetradic

F8E8D8

D8F8D8

D8E8F8

F8D8F8

Contrast Matrix WCAG 2.1 Contrast

F8E8D8	E2C5A5	D99447	E8CD7E	DBDBD9
—	1.4 Fail	2.1 Fail	1.3 Fail	1.2 Fail
1.4 Fail	—	1.5 Fail	1.1 Fail	1.2 Fail
2.1 Fail	1.5 Fail	—	1.6 Fail	1.8 Fail
1.3 Fail	1.1 Fail	1.6 Fail	—	1.1 Fail
1.2 Fail	1.2 Fail	1.8 Fail	1.1 Fail	—

White BG

1.2Fail

1.6Fail

2.5Fail

1.6Fail

1.4Fail

Black BG

17.5AAA

12.8AAA

8.3AAA

13.5AAA

15.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F1F1DC

D5D5AD

BBBB5A

DCDC91

DBDBD9

Deuteranopia

F2F3DD

D7D9AF

BFC45E

DEE096

DBDBDA

Tritanopia

F7DFE0

E1B3B4

D6686C

E7A0A4

DBDADA

Achromatopsia

EBEBEB

CACACA

A0A0A0

CCCCCC

DBDBDB

Shades & Tints Shades & Tints

#F8E8D8

Dark

Light

#E2C5A5

Dark

Light

#D99447

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f8e8d8;
  --color-2: #e2c5a5;
  --color-3: #d99447;
  --color-4: #e8cd7e;
  --color-5: #dbdbd9;
}

SCSS

$color-1: #f8e8d8;
$color-2: #e2c5a5;
$color-3: #d99447;
$color-4: #e8cd7e;
$color-5: #dbdbd9;

TAILWIND

colors: {
  'brand-1': '#f8e8d8',
  'brand-2': '#e2c5a5',
  'brand-3': '#d99447',
  'brand-4': '#e8cd7e',
  'brand-5': '#dbdbd9',
}

RGB Array

[248, 232, 216], [226, 197, 165], [217, 148, 71], [232, 205, 126], [219, 219, 217]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #F8E8D8, #E2C5A5, #D99447, #E8CD7E, #DBDBD9 is ideal for: health products, baby brands, fresh-style blogs. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #f8e8d8; --color-2: #e2c5a5; --color-3: #d99447; --color-4: #e8cd7e; --color-5: #dbdbd9. 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. 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 tech, SaaS, healthcare, eco industries. 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