#CDDEE5 + #E5E1DE + #F4A7AF + #B0B69C + #D3BD98 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#CDDEE5

Sky Blue · LightGray · Glacier Blue

HEX

#CDDEE5

RGB

rgb(205, 222, 229)

HSL

hsl(198, 32%, 85%)

HSB

hsb(198, 10%, 90%)

CMYK

cmyk(10%, 3%, 0%, 10%)

Oklch

oklch(89.0% 0.021 224.3)

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

#E5E1DE

Apricot · LightGray · Peach Orange

HEX

#E5E1DE

RGB

rgb(229, 225, 222)

HSL

hsl(26, 12%, 88%)

HSB

hsb(26, 3%, 90%)

CMYK

cmyk(0%, 2%, 3%, 10%)

Oklch

oklch(91.2% 0.006 59.6)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#F4A7AF

Peach Pink · LightPink · Cherry Blossom

HEX

#F4A7AF

RGB

rgb(244, 167, 175)

HSL

hsl(354, 78%, 81%)

HSB

hsb(354, 32%, 96%)

CMYK

cmyk(0%, 32%, 28%, 4%)

Oklch

oklch(80.5% 0.091 12.5)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Rose Petal

#B0B69C

Willow Green · DarkGray · Apple Green

HEX

#B0B69C

RGB

rgb(176, 182, 156)

HSL

hsl(74, 15%, 66%)

HSB

hsb(74, 14%, 71%)

CMYK

cmyk(3%, 0%, 14%, 29%)

Oklch

oklch(76.4% 0.037 117.8)

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

#D3BD98

Goose Yellow · Tan · Warm Sun

HEX

#D3BD98

RGB

rgb(211, 189, 152)

HSL

hsl(38, 40%, 71%)

HSB

hsb(38, 28%, 83%)

CMYK

cmyk(0%, 10%, 28%, 17%)

Oklch

oklch(80.8% 0.056 80.6)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CDDEE5

E5D4CD

Analogous

CDE5E0

CDDEE5

CDD1E5

Triadic

CDDEE5

E5CDDE

DEE5CD

Split-Comp.

CDDEE5

E5CDD1

E5E0CD

Tetradic

CDDEE5

E0CDE5

E5D4CD

D1E5CD

Contrast Matrix WCAG 2.1 Contrast

CDDEE5	E5E1DE	F4A7AF	B0B69C	D3BD98
—	1.1 Fail	1.4 Fail	1.5 Fail	1.3 Fail
1.1 Fail	—	1.5 Fail	1.6 Fail	1.4 Fail
1.4 Fail	1.5 Fail	—	1.1 Fail	1.0 Fail
1.5 Fail	1.6 Fail	1.1 Fail	—	1.1 Fail
1.3 Fail	1.4 Fail	1.0 Fail	1.1 Fail	—

White BG

1.4Fail

1.3Fail

1.9Fail

2.1Fail

1.8Fail

Black BG

15.2AAA

16.2AAA

11.0AAA

10.0AAA

11.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D4D5E3

E3E3DF

D3D2AD

B3B3A2

C9C9A1

Deuteranopia

D3D2E3

E4E4DF

D7DDAD

B2B2A4

CBCCA3

Tritanopia

CEE2E2

E5DFDF

F0ACAB

B0A7A8

D2A8AA

Achromatopsia

DADADA

E2E2E2

BFBFBF

B1B1B1

BFBFBF

Shades & Tints Shades & Tints

#CDDEE5

Dark

Light

#E5E1DE

Dark

Light

#F4A7AF

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cddee5;
  --color-2: #e5e1de;
  --color-3: #f4a7af;
  --color-4: #b0b69c;
  --color-5: #d3bd98;
}

SCSS

$color-1: #cddee5;
$color-2: #e5e1de;
$color-3: #f4a7af;
$color-4: #b0b69c;
$color-5: #d3bd98;

TAILWIND

colors: {
  'brand-1': '#cddee5',
  'brand-2': '#e5e1de',
  'brand-3': '#f4a7af',
  'brand-4': '#b0b69c',
  'brand-5': '#d3bd98',
}

RGB Array

[205, 222, 229], [229, 225, 222], [244, 167, 175], [176, 182, 156], [211, 189, 152]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CDDEE5, #E5E1DE, #F4A7AF, #B0B69C, #D3BD98 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: #cddee5; --color-2: #e5e1de; --color-3: #f4a7af; --color-4: #b0b69c; --color-5: #d3bd98. 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