#ECC5C3 + #E1CEC9 + #D7D7CF + #CCE0D5 + #C1E9DB - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#ECC5C3

Peach Pink · Pink · Cherry Blossom

HEX

#ECC5C3

RGB

rgb(236, 197, 195)

HSL

hsl(3, 52%, 85%)

HSB

hsb(3, 17%, 93%)

CMYK

cmyk(0%, 17%, 17%, 7%)

Oklch

oklch(85.6% 0.045 21.5)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#E1CEC9

Peach Pink · LightGray · Cherry Blossom

HEX

#E1CEC9

RGB

rgb(225, 206, 201)

HSL

hsl(13, 29%, 84%)

HSB

hsb(13, 11%, 88%)

CMYK

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

Oklch

oklch(86.6% 0.022 35.1)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#D7D7CF

Fresh Green · LightGray · Pearl Gray

HEX

#D7D7CF

RGB

rgb(215, 215, 207)

HSL

hsl(60, 9%, 83%)

HSB

hsb(60, 4%, 84%)

CMYK

cmyk(0%, 0%, 4%, 16%)

Oklch

oklch(87.7% 0.011 106.6)

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

#CCE0D5

Celadon · LightGray · Mint Green

HEX

#CCE0D5

RGB

rgb(204, 224, 213)

HSL

hsl(147, 24%, 84%)

HSB

hsb(147, 9%, 88%)

CMYK

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

Oklch

oklch(88.9% 0.026 161.9)

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

#C1E9DB

Jade · LightBlue · Mint Green

HEX

#C1E9DB

RGB

rgb(193, 233, 219)

HSL

hsl(159, 48%, 84%)

HSB

hsb(159, 17%, 91%)

CMYK

cmyk(17%, 0%, 6%, 9%)

Oklch

oklch(90.2% 0.046 172.0)

Traditional「Jade」· Paint「Mint Green」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ECC5C3

C5EBED

Analogous

EDC5D7

ECC5C3

EDDBC5

Triadic

ECC5C3

C5EDC7

C7C5ED

Split-Comp.

ECC5C3

C5EDDB

C5D7ED

Tetradic

ECC5C3

D7EDC5

C5EBED

DBC5ED

Contrast Matrix WCAG 2.1 Contrast

ECC5C3	E1CEC9	D7D7CF	CCE0D5	C1E9DB
—	1.0 Fail	1.1 Fail	1.1 Fail	1.2 Fail
1.0 Fail	—	1.0 Fail	1.1 Fail	1.1 Fail
1.1 Fail	1.0 Fail	—	1.0 Fail	1.1 Fail
1.1 Fail	1.1 Fail	1.0 Fail	—	1.0 Fail
1.2 Fail	1.1 Fail	1.1 Fail	1.0 Fail	—

White BG

1.6Fail

1.5Fail

1.4Fail

1.3Fail

Black BG

13.3AAA

13.9AAA

14.5AAA

15.2AAA

15.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DBDBC3

D9D9CA

D7D7D1

D5D5D8

D2D3DE

Deuteranopia

DDE0C4

DADBCB

D7D7D1

D4D2D8

D0CDDF

Tritanopia

EAC4C4

E0CBCB

D7D2D3

CDDADA

C3E1E2

Achromatopsia

D0D0D0

D3D3D3

D6D6D6

D9D9D9

DBDBDB

Shades & Tints Shades & Tints

#ECC5C3

Dark

Light

#E1CEC9

Dark

Light

#D7D7CF

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ecc5c3;
  --color-2: #e1cec9;
  --color-3: #d7d7cf;
  --color-4: #cce0d5;
  --color-5: #c1e9db;
}

SCSS

$color-1: #ecc5c3;
$color-2: #e1cec9;
$color-3: #d7d7cf;
$color-4: #cce0d5;
$color-5: #c1e9db;

TAILWIND

colors: {
  'brand-1': '#ecc5c3',
  'brand-2': '#e1cec9',
  'brand-3': '#d7d7cf',
  'brand-4': '#cce0d5',
  'brand-5': '#c1e9db',
}

RGB Array

[236, 197, 195], [225, 206, 201], [215, 215, 207], [204, 224, 213], [193, 233, 219]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #ECC5C3, #E1CEC9, #D7D7CF, #CCE0D5, #C1E9DB 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: #ecc5c3; --color-2: #e1cec9; --color-3: #d7d7cf; --color-4: #cce0d5; --color-5: #c1e9db. 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