#CCDFCE + #EBEFDB + #FCE1A3 + #E9B295 + #EDC1BB - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#CCDFCE

Celadon · LightGray · Mint Green

HEX

#CCDFCE

RGB

rgb(204, 223, 206)

HSL

hsl(126, 23%, 84%)

HSB

hsb(126, 9%, 87%)

CMYK

cmyk(9%, 0%, 8%, 13%)

Oklch

oklch(88.5% 0.031 148.4)

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

#EBEFDB

Willow Green · Beige · Mint Green

HEX

#EBEFDB

RGB

rgb(235, 239, 219)

HSL

hsl(72, 38%, 90%)

HSB

hsb(72, 8%, 94%)

CMYK

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

Oklch

oklch(94.4% 0.027 116.1)

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

#FCE1A3

Goose Yellow · Wheat · Lemon Cream

HEX

#FCE1A3

RGB

rgb(252, 225, 163)

HSL

hsl(42, 94%, 81%)

HSB

hsb(42, 35%, 99%)

CMYK

cmyk(0%, 11%, 35%, 1%)

Oklch

oklch(91.8% 0.084 87.1)

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

#E9B295

Apricot · BurlyWood · Warm Sun

HEX

#E9B295

RGB

rgb(233, 178, 149)

HSL

hsl(21, 66%, 75%)

HSB

hsb(21, 36%, 91%)

CMYK

cmyk(0%, 24%, 36%, 9%)

Oklch

oklch(80.7% 0.076 49.0)

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

#EDC1BB

Peach Pink · LightPink · Cherry Blossom

HEX

#EDC1BB

RGB

rgb(237, 193, 187)

HSL

hsl(7, 58%, 83%)

HSB

hsb(7, 21%, 93%)

CMYK

cmyk(0%, 19%, 21%, 7%)

Oklch

oklch(84.8% 0.051 27.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CCDFCE

E0CDDE

Analogous

D4E0CD

CCDFCE

CDE0D8

Triadic

CCDFCE

CFCDE0

E0CFCD

Split-Comp.

CCDFCE

D8CDE0

E0CDD4

Tetradic

CCDFCE

CDD4E0

E0CDDE

E0D8CD

Contrast Matrix WCAG 2.1 Contrast

CCDFCE	EBEFDB	FCE1A3	E9B295	EDC1BB
—	1.2 Fail	1.1 Fail	1.3 Fail	1.2 Fail
1.2 Fail	—	1.1 Fail	1.6 Fail	1.4 Fail
1.1 Fail	1.1 Fail	—	1.5 Fail	1.3 Fail
1.3 Fail	1.6 Fail	1.5 Fail	—	1.1 Fail
1.2 Fail	1.4 Fail	1.3 Fail	1.1 Fail	—

White BG

1.4Fail

1.2Fail

1.3Fail

1.9Fail

1.6Fail

Black BG

15.0AAA

17.9AAA

16.4AAA

11.3AAA

12.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D4D4D2

EDEDE0

F0F0B2

D1D19C

DADABC

Deuteranopia

D3D2D3

EDECE1

F2F4B6

D4D99E

DDE0BD

Tritanopia

CDD5D6

EBE4E5

FBBEC0

E6A2A3

EBBEBE

Achromatopsia

D7D7D7

ECECEC

E2E2E2

BFBFBF

CDCDCD

Shades & Tints Shades & Tints

#CCDFCE

Dark

Light

#EBEFDB

Dark

Light

#FCE1A3

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ccdfce;
  --color-2: #ebefdb;
  --color-3: #fce1a3;
  --color-4: #e9b295;
  --color-5: #edc1bb;
}

SCSS

$color-1: #ccdfce;
$color-2: #ebefdb;
$color-3: #fce1a3;
$color-4: #e9b295;
$color-5: #edc1bb;

TAILWIND

colors: {
  'brand-1': '#ccdfce',
  'brand-2': '#ebefdb',
  'brand-3': '#fce1a3',
  'brand-4': '#e9b295',
  'brand-5': '#edc1bb',
}

RGB Array

[204, 223, 206], [235, 239, 219], [252, 225, 163], [233, 178, 149], [237, 193, 187]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CCDFCE, #EBEFDB, #FCE1A3, #E9B295, #EDC1BB 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: #ccdfce; --color-2: #ebefdb; --color-3: #fce1a3; --color-4: #e9b295; --color-5: #edc1bb. 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