#FBD9AE + #B0DAB9 + #D2E8BE + #ECF9EE + #C8DDD7 · coffee - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FBD9AE

Goose Yellow · Wheat · Peach Orange

HEX

#FBD9AE

RGB

rgb(251, 217, 174)

HSL

hsl(34, 91%, 83%)

HSB

hsb(34, 31%, 98%)

CMYK

cmyk(0%, 14%, 31%, 2%)

Oklch

oklch(90.3% 0.068 73.3)

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

#B0DAB9

Celadon · Silver · Apple Green

HEX

#B0DAB9

RGB

rgb(176, 218, 185)

HSL

hsl(133, 36%, 77%)

HSB

hsb(133, 19%, 85%)

CMYK

cmyk(19%, 0%, 15%, 15%)

Oklch

oklch(84.9% 0.063 151.3)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#D2E8BE

Celadon · LightGray · Mint Green

HEX

#D2E8BE

RGB

rgb(210, 232, 190)

HSL

hsl(91, 48%, 83%)

HSB

hsb(91, 18%, 91%)

CMYK

cmyk(9%, 0%, 18%, 9%)

Oklch

oklch(90.4% 0.061 130.1)

Traditional「Celadon」· Paint「Mint Green」· Creative Mint Breeze

#ECF9EE

Emerald · Linen · Mint Green

HEX

#ECF9EE

RGB

rgb(236, 249, 238)

HSL

hsl(129, 52%, 95%)

HSB

hsb(129, 5%, 98%)

CMYK

cmyk(5%, 0%, 4%, 2%)

Oklch

oklch(96.9% 0.020 150.1)

Traditional「Emerald」· Paint「Mint Green」· Creative Mint Breeze

#C8DDD7

Jade · LightGray · Glacier Blue

HEX

#C8DDD7

RGB

rgb(200, 221, 215)

HSL

hsl(163, 24%, 83%)

HSB

hsb(163, 10%, 87%)

CMYK

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

Oklch

oklch(88.0% 0.024 176.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FBD9AE

ACCEFB

Analogous

FBB1AC

FBD9AE

F6FBAC

Triadic

FBD9AE

ACFBD9

D9ACFB

Split-Comp.

FBD9AE

ACF6FB

B1ACFB

Tetradic

FBD9AE

ACFBB1

ACCEFB

FBACF6

Contrast Matrix WCAG 2.1 Contrast

FBD9AE	B0DAB9	D2E8BE	ECF9EE	C8DDD7
—	1.2 Fail	1.0 Fail	1.2 Fail	1.1 Fail
1.2 Fail	—	1.2 Fail	1.4 Fail	1.1 Fail
1.0 Fail	1.2 Fail	—	1.2 Fail	1.1 Fail
1.2 Fail	1.4 Fail	1.2 Fail	—	1.3 Fail
1.1 Fail	1.1 Fail	1.1 Fail	1.3 Fail	—

White BG

1.3Fail

1.5Fail

1.3Fail

1.1Fail

1.4Fail

Black BG

15.6AAA

13.6AAA

16.0AAA

19.4AAA

14.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

ECECB8

C2C3C1

DCDCC8

F2F2F1

D1D1D8

Deuteranopia

EEF1BB

C0BDC3

DAD9CB

F1F0F1

D0CED9

Tritanopia

F9C1C2

B2C7C9

D3D0D2

EDF3F3

C9DADA

Achromatopsia

DEDEDE

CACACA

DDDDDD

F4F4F4

D6D6D6

Shades & Tints Shades & Tints

#FBD9AE

Dark

Light

#B0DAB9

Dark

Light

#D2E8BE

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fbd9ae;
  --color-2: #b0dab9;
  --color-3: #d2e8be;
  --color-4: #ecf9ee;
  --color-5: #c8ddd7;
}

SCSS

$color-1: #fbd9ae;
$color-2: #b0dab9;
$color-3: #d2e8be;
$color-4: #ecf9ee;
$color-5: #c8ddd7;

TAILWIND

colors: {
  'brand-1': '#fbd9ae',
  'brand-2': '#b0dab9',
  'brand-3': '#d2e8be',
  'brand-4': '#ecf9ee',
  'brand-5': '#c8ddd7',
}

RGB Array

[251, 217, 174], [176, 218, 185], [210, 232, 190], [236, 249, 238], [200, 221, 215]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #FBD9AE, #B0DAB9, #D2E8BE, #ECF9EE, #C8DDD7 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: #fbd9ae; --color-2: #b0dab9; --color-3: #d2e8be; --color-4: #ecf9ee; --color-5: #c8ddd7. 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