#CCE4D1 + #D2E1A7 + #D8DE7D + #DEDB53 + #E4D829 · pastel - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

GentleSoothingSweetWarm

Industry INDUSTRY

Kids & BabyBeautyLifestyle

UI Context UI CONTEXT

E-commerceSocial PostIllustration

Color Details Color Details

#CCE4D1

Celadon · LightGray · Mint Green

HEX

#CCE4D1

RGB

rgb(204, 228, 209)

HSL

hsl(132, 31%, 85%)

HSB

hsb(132, 11%, 89%)

CMYK

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

Oklch

oklch(89.6% 0.036 151.7)

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

#D2E1A7

Willow Green · Wheat · Apple Green

HEX

#D2E1A7

RGB

rgb(210, 225, 167)

HSL

hsl(76, 49%, 77%)

HSB

hsb(76, 26%, 88%)

CMYK

cmyk(7%, 0%, 26%, 12%)

Oklch

oklch(88.4% 0.078 119.8)

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

#D8DE7D

Fresh Green · Khaki · Sunflower

HEX

#D8DE7D

RGB

rgb(216, 222, 125)

HSL

hsl(64, 60%, 68%)

HSB

hsb(64, 44%, 87%)

CMYK

cmyk(3%, 0%, 44%, 13%)

Oklch

oklch(87.5% 0.121 111.7)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#DEDB53

Autumn Sage · SandyBrown · Sunflower

HEX

#DEDB53

RGB

rgb(222, 219, 83)

HSL

hsl(59, 68%, 60%)

HSB

hsb(59, 63%, 87%)

CMYK

cmyk(0%, 1%, 63%, 13%)

Oklch

oklch(86.9% 0.155 108.0)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#E4D829

Autumn Sage · Gold · Sunflower

HEX

#E4D829

RGB

rgb(228, 216, 41)

HSL

hsl(56, 78%, 53%)

HSB

hsb(56, 82%, 89%)

CMYK

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

Oklch

oklch(86.5% 0.175 105.2)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CCE4D1

E5CDE0

Analogous

D4E5CD

CCE4D1

CDE5DD

Triadic

CCE4D1

D2CDE5

E5D2CD

Split-Comp.

CCE4D1

DDCDE5

E5CDD4

Tetradic

CCE4D1

CDD4E5

E5CDE0

E5DDCD

Contrast Matrix WCAG 2.1 Contrast

CCE4D1	D2E1A7	D8DE7D	DEDB53	E4D829
—	1.0 Fail	1.1 Fail	1.1 Fail	1.1 Fail
1.0 Fail	—	1.0 Fail	1.0 Fail	1.1 Fail
1.1 Fail	1.0 Fail	—	1.0 Fail	1.0 Fail
1.1 Fail	1.0 Fail	1.0 Fail	—	1.0 Fail
1.1 Fail	1.1 Fail	1.0 Fail	1.0 Fail	—

White BG

1.3Fail

1.4Fail

1.5Fail

Black BG

15.6AAA

15.1AAA

14.7AAA

14.4AAA

14.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D6D7D6

D8D9B5

DBDB94

DDDD74

DFDF53

Deuteranopia

D5D3D7

D8D7B8

DADA9A

DDDD7C

E0E05E

Tritanopia

CDD9DA

D3C0C3

D8A7AB

DE8E94

E3757C

Achromatopsia

DBDBDB

D6D6D6

D1D1D1

CCCCCC

C8C8C8

Shades & Tints Shades & Tints

#CCE4D1

Dark

Light

#D2E1A7

Dark

Light

#D8DE7D

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cce4d1;
  --color-2: #d2e1a7;
  --color-3: #d8de7d;
  --color-4: #dedb53;
  --color-5: #e4d829;
}

SCSS

$color-1: #cce4d1;
$color-2: #d2e1a7;
$color-3: #d8de7d;
$color-4: #dedb53;
$color-5: #e4d829;

TAILWIND

colors: {
  'brand-1': '#cce4d1',
  'brand-2': '#d2e1a7',
  'brand-3': '#d8de7d',
  'brand-4': '#dedb53',
  'brand-5': '#e4d829',
}

RGB Array

[204, 228, 209], [210, 225, 167], [216, 222, 125], [222, 219, 83], [228, 216, 41]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #CCE4D1, #D2E1A7, #D8DE7D, #DEDB53, #E4D829 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: #cce4d1; --color-2: #d2e1a7; --color-3: #d8de7d; --color-4: #dedb53; --color-5: #e4d829. 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 pastel-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