#D8E6D7 + #FEF8E2 + #F9E6C8 + #DFBDB1 + #9C808C - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#D8E6D7

Celadon · LightGray · Mint Green

HEX

#D8E6D7

RGB

rgb(216, 230, 215)

HSL

hsl(116, 23%, 87%)

HSB

hsb(116, 7%, 90%)

CMYK

cmyk(6%, 0%, 7%, 10%)

Oklch

oklch(91.0% 0.025 143.5)

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

#FEF8E2

Goose Yellow · LightYellow · Lemon Cream

HEX

#FEF8E2

RGB

rgb(254, 248, 226)

HSL

hsl(47, 93%, 94%)

HSB

hsb(47, 11%, 100%)

CMYK

cmyk(0%, 2%, 11%, 0%)

Oklch

oklch(97.8% 0.029 94.3)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#F9E6C8

Goose Yellow · Bisque · Peach Orange

HEX

#F9E6C8

RGB

rgb(249, 230, 200)

HSL

hsl(37, 80%, 88%)

HSB

hsb(37, 20%, 98%)

CMYK

cmyk(0%, 8%, 20%, 2%)

Oklch

oklch(93.3% 0.045 79.3)

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

#DFBDB1

Apricot · Silver · Peach Orange

HEX

#DFBDB1

RGB

rgb(223, 189, 177)

HSL

hsl(16, 42%, 78%)

HSB

hsb(16, 21%, 87%)

CMYK

cmyk(0%, 15%, 21%, 13%)

Oklch

oklch(82.4% 0.043 40.4)

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

#9C808C

Dark Violet · Gray · Rose Pink

HEX

#9C808C

RGB

rgb(156, 128, 140)

HSL

hsl(334, 12%, 56%)

HSB

hsb(334, 18%, 61%)

CMYK

cmyk(0%, 18%, 10%, 39%)

Oklch

oklch(63.0% 0.038 350.6)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D8E6D7

E4D6E5

Analogous

DFE5D6

D8E6D7

D6E5DD

Triadic

D8E6D7

D6D7E5

E5D6D7

Split-Comp.

D8E6D7

DDD6E5

E5D6DF

Tetradic

D8E6D7

D6DFE5

E4D6E5

E5DDD6

Contrast Matrix WCAG 2.1 Contrast

D8E6D7	FEF8E2	F9E6C8	DFBDB1	9C808C
—	1.2 Fail	1.1 Fail	1.3 Fail	2.8 Fail
1.2 Fail	—	1.1 Fail	1.6 Fail	3.4 AA Large
1.1 Fail	1.1 Fail	—	1.4 Fail	2.9 Fail
1.3 Fail	1.6 Fail	1.4 Fail	—	2.0 Fail
2.8 Fail	3.4 AA Large	2.9 Fail	2.0 Fail	—

White BG

1.3Fail

1.1Fail

1.2Fail

1.7Fail

3.6AA Large

Black BG

16.2AAA

19.7AAA

17.2AAA

12.1AAA

5.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DEDEDB

FBFBE7

F1F1CF

D0D0B4

909089

Deuteranopia

DDDCDC

FCFCE9

F2F3D1

D2D5B5

929488

Tritanopia

D9DDDE

FEECEC

F8D5D6

DDB6B7

9B8786

Achromatopsia

E0E0E0

F7F7F7

E8E8E8

C6C6C6

8A8A8A

Shades & Tints Shades & Tints

#D8E6D7

Dark

Light

#FEF8E2

Dark

Light

#F9E6C8

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d8e6d7;
  --color-2: #fef8e2;
  --color-3: #f9e6c8;
  --color-4: #dfbdb1;
  --color-5: #9c808c;
}

SCSS

$color-1: #d8e6d7;
$color-2: #fef8e2;
$color-3: #f9e6c8;
$color-4: #dfbdb1;
$color-5: #9c808c;

TAILWIND

colors: {
  'brand-1': '#d8e6d7',
  'brand-2': '#fef8e2',
  'brand-3': '#f9e6c8',
  'brand-4': '#dfbdb1',
  'brand-5': '#9c808c',
}

RGB Array

[216, 230, 215], [254, 248, 226], [249, 230, 200], [223, 189, 177], [156, 128, 140]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D8E6D7, #FEF8E2, #F9E6C8, #DFBDB1, #9C808C 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: #d8e6d7; --color-2: #fef8e2; --color-3: #f9e6c8; --color-4: #dfbdb1; --color-5: #9c808c. 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 general-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