#D9E5D8 + #E0C7A8 + #F7A583 + #F5848C + #C07C96 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#D9E5D8

Celadon · LightGray · Mint Green

HEX

#D9E5D8

RGB

rgb(217, 229, 216)

HSL

hsl(115, 20%, 87%)

HSB

hsb(115, 6%, 90%)

CMYK

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

Oklch

oklch(90.9% 0.022 143.2)

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

#E0C7A8

Goose Yellow · Wheat · Peach Orange

HEX

#E0C7A8

RGB

rgb(224, 199, 168)

HSL

hsl(33, 47%, 77%)

HSB

hsb(33, 25%, 88%)

CMYK

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

Oklch

oklch(84.3% 0.050 73.0)

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

#F7A583

Apricot · LightSalmon · Warm Sun

HEX

#F7A583

RGB

rgb(247, 165, 131)

HSL

hsl(18, 88%, 74%)

HSB

hsb(18, 47%, 97%)

CMYK

cmyk(0%, 33%, 47%, 3%)

Oklch

oklch(79.5% 0.108 43.3)

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

#F5848C

Peach Pink · LightCoral · Coral Red

HEX

#F5848C

RGB

rgb(245, 132, 140)

HSL

hsl(356, 85%, 74%)

HSB

hsb(356, 46%, 96%)

CMYK

cmyk(0%, 46%, 43%, 4%)

Oklch

oklch(74.0% 0.138 16.5)

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

#C07C96

Rouge · LightCoral · Rose Pink

HEX

#C07C96

RGB

rgb(192, 124, 150)

HSL

hsl(337, 35%, 62%)

HSB

hsb(337, 35%, 75%)

CMYK

cmyk(0%, 35%, 22%, 25%)

Oklch

oklch(66.5% 0.090 355.3)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D9E5D8

E3D7E4

Analogous

DFE4D7

D9E5D8

D7E4DD

Triadic

D9E5D8

D7D8E4

E4D7D8

Split-Comp.

D9E5D8

DDD7E4

E4D7DF

Tetradic

D9E5D8

D7DFE4

E3D7E4

E4DDD7

Contrast Matrix WCAG 2.1 Contrast

D9E5D8	E0C7A8	F7A583	F5848C	C07C96
—	1.3 Fail	1.5 Fail	1.9 Fail	2.5 Fail
1.3 Fail	—	1.2 Fail	1.5 Fail	2.0 Fail
1.5 Fail	1.2 Fail	—	1.2 Fail	1.6 Fail
1.9 Fail	1.5 Fail	1.2 Fail	—	1.3 Fail
2.5 Fail	2.0 Fail	1.6 Fail	1.3 Fail	—

White BG

1.3Fail

1.6Fail

2.0Fail

2.5Fail

3.2AA Large

Black BG

16.1AAA

12.9AAA

10.7AAA

8.6AAA

6.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DEDEDB

D5D5B0

D3D38B

C4C38A

A3A290

Deuteranopia

DEDDDC

D7D8B1

D8DE8D

CBD38A

A7AC8E

Tritanopia

DADEDE

DFB5B7

F39293

EF8988

BD8B8A

Achromatopsia

E0E0E0

CBCBCB

BABABA

A7A7A7

939393

Shades & Tints Shades & Tints

#D9E5D8

Dark

Light

#E0C7A8

Dark

Light

#F7A583

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d9e5d8;
  --color-2: #e0c7a8;
  --color-3: #f7a583;
  --color-4: #f5848c;
  --color-5: #c07c96;
}

SCSS

$color-1: #d9e5d8;
$color-2: #e0c7a8;
$color-3: #f7a583;
$color-4: #f5848c;
$color-5: #c07c96;

TAILWIND

colors: {
  'brand-1': '#d9e5d8',
  'brand-2': '#e0c7a8',
  'brand-3': '#f7a583',
  'brand-4': '#f5848c',
  'brand-5': '#c07c96',
}

RGB Array

[217, 229, 216], [224, 199, 168], [247, 165, 131], [245, 132, 140], [192, 124, 150]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D9E5D8, #E0C7A8, #F7A583, #F5848C, #C07C96 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: #d9e5d8; --color-2: #e0c7a8; --color-3: #f7a583; --color-4: #f5848c; --color-5: #c07c96. 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