#ECF2DF + #C1DEDA + #BFBDBF + #C79999 + #D97777 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#ECF2DF

Willow Green · Beige · Mint Green

HEX

#ECF2DF

RGB

rgb(236, 242, 223)

HSL

hsl(79, 42%, 91%)

HSB

hsb(79, 8%, 95%)

CMYK

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

Oklch

oklch(95.1% 0.026 121.2)

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

#C1DEDA

Jade · LightGray · Glacier Blue

HEX

#C1DEDA

RGB

rgb(193, 222, 218)

HSL

hsl(172, 31%, 81%)

HSB

hsb(172, 13%, 87%)

CMYK

cmyk(13%, 0%, 2%, 13%)

Oklch

oklch(87.8% 0.031 186.5)

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

#BFBDBF

Silver Gray · Silver · Pearl Gray

HEX

#BFBDBF

RGB

rgb(191, 189, 191)

HSL

hsl(300, 2%, 75%)

HSB

hsb(300, 1%, 75%)

CMYK

cmyk(0%, 1%, 0%, 25%)

Oklch

oklch(80.1% 0.004 325.6)

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

#C79999

Peach Pink · Tan · Coral Red

HEX

#C79999

RGB

rgb(199, 153, 153)

HSL

hsl(0, 29%, 69%)

HSB

hsb(0, 23%, 78%)

CMYK

cmyk(0%, 23%, 23%, 22%)

Oklch

oklch(72.6% 0.055 18.5)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#D97777

Peach Pink · LightCoral · Coral Red

HEX

#D97777

RGB

rgb(217, 119, 119)

HSL

hsl(0, 56%, 66%)

HSB

hsb(0, 45%, 85%)

CMYK

cmyk(0%, 45%, 45%, 15%)

Oklch

oklch(67.9% 0.123 20.8)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ECF2DF

E5DEF2

Analogous

F2EEDE

ECF2DF

E2F2DE

Triadic

ECF2DF

DEECF2

F2DEEC

Split-Comp.

ECF2DF

DEE2F2

EEDEF2

Tetradic

ECF2DF

DEF2EE

E5DEF2

F2DEE2

Contrast Matrix WCAG 2.1 Contrast

ECF2DF	C1DEDA	BFBDBF	C79999	D97777
—	1.2 Fail	1.6 Fail	2.2 Fail	2.7 Fail
1.2 Fail	—	1.3 Fail	1.7 Fail	2.1 Fail
1.6 Fail	1.3 Fail	—	1.3 Fail	1.6 Fail
2.2 Fail	1.7 Fail	1.3 Fail	—	1.2 Fail
2.7 Fail	2.1 Fail	1.6 Fail	1.2 Fail	—

White BG

1.1Fail

1.4Fail

1.9Fail

2.5Fail

3.1AA Large

Black BG

18.3AAA

14.7AAA

11.2AAA

8.4AAA

6.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EFEFE4

CECEDB

BEBEBF

B3B399

AFAE77

Deuteranopia

EEEEE5

CCCADB

BEBEBE

B6B999

B4BC77

Tritanopia

ECE7E8

C2DCDC

BFBEBE

C59999

D47777

Achromatopsia

EEEEEE

D5D5D5

BEBEBE

A7A7A7

949494

Shades & Tints Shades & Tints

#ECF2DF

Dark

Light

#C1DEDA

Dark

Light

#BFBDBF

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ecf2df;
  --color-2: #c1deda;
  --color-3: #bfbdbf;
  --color-4: #c79999;
  --color-5: #d97777;
}

SCSS

$color-1: #ecf2df;
$color-2: #c1deda;
$color-3: #bfbdbf;
$color-4: #c79999;
$color-5: #d97777;

TAILWIND

colors: {
  'brand-1': '#ecf2df',
  'brand-2': '#c1deda',
  'brand-3': '#bfbdbf',
  'brand-4': '#c79999',
  'brand-5': '#d97777',
}

RGB Array

[236, 242, 223], [193, 222, 218], [191, 189, 191], [199, 153, 153], [217, 119, 119]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #ECF2DF, #C1DEDA, #BFBDBF, #C79999, #D97777 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: #ecf2df; --color-2: #c1deda; --color-3: #bfbdbf; --color-4: #c79999; --color-5: #d97777. 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