#D8E6D8 + #E3D7AA + #F0B089 + #CF7E81 + #8F6D7B - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#D8E6D8

Celadon · LightGray · Mint Green

HEX

#D8E6D8

RGB

rgb(216, 230, 216)

HSL

hsl(120, 22%, 87%)

HSB

hsb(120, 6%, 90%)

CMYK

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

Oklch

oklch(91.1% 0.024 145.4)

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

#E3D7AA

Goose Yellow · Wheat · Lemon Cream

HEX

#E3D7AA

RGB

rgb(227, 215, 170)

HSL

hsl(47, 50%, 78%)

HSB

hsb(47, 25%, 89%)

CMYK

cmyk(0%, 5%, 25%, 11%)

Oklch

oklch(87.8% 0.061 94.9)

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

#F0B089

Apricot · BurlyWood · Warm Sun

HEX

#F0B089

RGB

rgb(240, 176, 137)

HSL

hsl(23, 77%, 74%)

HSB

hsb(23, 43%, 94%)

CMYK

cmyk(0%, 27%, 43%, 6%)

Oklch

oklch(80.8% 0.092 52.4)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#CF7E81

Peach Pink · LightCoral · Coral Red

HEX

#CF7E81

RGB

rgb(207, 126, 129)

HSL

hsl(358, 46%, 65%)

HSB

hsb(358, 39%, 81%)

CMYK

cmyk(0%, 39%, 38%, 19%)

Oklch

oklch(68.0% 0.101 17.7)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#8F6D7B

Dark Violet · Gray · Camellia

HEX

#8F6D7B

RGB

rgb(143, 109, 123)

HSL

hsl(335, 13%, 49%)

HSB

hsb(335, 24%, 56%)

CMYK

cmyk(0%, 24%, 14%, 44%)

Oklch

oklch(57.3% 0.047 352.2)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D8E6D8

E5D7E5

Analogous

DEE5D7

D8E6D8

D7E5DE

Triadic

D8E6D8

D7D7E5

E5D7D7

Split-Comp.

D8E6D8

DED7E5

E5D7DE

Tetradic

D8E6D8

D7DEE5

E5D7E5

E5DED7

Contrast Matrix WCAG 2.1 Contrast

D8E6D8	E3D7AA	F0B089	CF7E81	8F6D7B
—	1.1 Fail	1.4 Fail	2.3 Fail	3.5 AA Large
1.1 Fail	—	1.3 Fail	2.1 Fail	3.1 AA Large
1.4 Fail	1.3 Fail	—	1.6 Fail	2.4 Fail
2.3 Fail	2.1 Fail	1.6 Fail	—	1.5 Fail
3.5 AA Large	3.1 AA Large	2.4 Fail	1.5 Fail	—

White BG

1.3Fail

1.4Fail

1.9Fail

3.0AA Large

4.5AA

Black BG

16.2AAA

14.6AAA

11.3AAA

7.0AA

4.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DEDEDB

DEDEB5

D4D492

ACAB80

808078

Deuteranopia

DDDCDC

DFDFB8

D8DD95

B1B780

828577

Tritanopia

D9DEDF

E2BDBF

ED9A9C

CB8080

8D7574

Achromatopsia

E0E0E0

D5D5D5

BFBFBF

979797

797979

Shades & Tints Shades & Tints

#D8E6D8

Dark

Light

#E3D7AA

Dark

Light

#F0B089

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d8e6d8;
  --color-2: #e3d7aa;
  --color-3: #f0b089;
  --color-4: #cf7e81;
  --color-5: #8f6d7b;
}

SCSS

$color-1: #d8e6d8;
$color-2: #e3d7aa;
$color-3: #f0b089;
$color-4: #cf7e81;
$color-5: #8f6d7b;

TAILWIND

colors: {
  'brand-1': '#d8e6d8',
  'brand-2': '#e3d7aa',
  'brand-3': '#f0b089',
  'brand-4': '#cf7e81',
  'brand-5': '#8f6d7b',
}

RGB Array

[216, 230, 216], [227, 215, 170], [240, 176, 137], [207, 126, 129], [143, 109, 123]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D8E6D8, #E3D7AA, #F0B089, #CF7E81, #8F6D7B 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: #d8e6d8; --color-2: #e3d7aa; --color-3: #f0b089; --color-4: #cf7e81; --color-5: #8f6d7b. 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