← Back to Editor

#E0C1EA · #CDD4DA · #D6D8BD · #E7DD8E · #F5DA80

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#E0C1EA

Lilac · LightGray · Lavender

HEX
#E0C1EA
RGB
rgb(224, 193, 234)
HSL
hsl(285, 49%, 84%)
HSB
hsb(285, 18%, 92%)
CMYK
cmyk(4%, 18%, 0%, 8%)
Oklch
oklch(85.0% 0.065 317.9)

TraditionalLilac」· PaintLavender」· Creative Lavender Dream

#CDD4DA

Sky Blue · LightGray · Sky Blue

HEX
#CDD4DA
RGB
rgb(205, 212, 218)
HSL
hsl(208, 15%, 83%)
HSB
hsb(208, 6%, 85%)
CMYK
cmyk(6%, 3%, 0%, 15%)
Oklch
oklch(86.6% 0.011 243.7)

TraditionalSky Blue」· PaintSky Blue」· Creative Twilight Haze

#D6D8BD

Fresh Green · LightGray · Lemon Cream

HEX
#D6D8BD
RGB
rgb(214, 216, 189)
HSL
hsl(64, 26%, 79%)
HSB
hsb(64, 12%, 85%)
CMYK
cmyk(1%, 0%, 12%, 15%)
Oklch
oklch(87.3% 0.036 110.6)

TraditionalFresh Green」· PaintLemon Cream」· Creative Lemon Fizz

#E7DD8E

Fresh Green · Khaki · Sunflower

HEX
#E7DD8E
RGB
rgb(231, 221, 142)
HSL
hsl(53, 65%, 73%)
HSB
hsb(53, 39%, 91%)
CMYK
cmyk(0%, 4%, 39%, 9%)
Oklch
oklch(88.8% 0.100 102.0)

TraditionalFresh Green」· PaintSunflower」· Creative Lemon Fizz

#F5DA80

Goose Yellow · Khaki · Sunflower

HEX
#F5DA80
RGB
rgb(245, 218, 128)
HSL
hsl(46, 85%, 73%)
HSB
hsb(46, 48%, 96%)
CMYK
cmyk(0%, 11%, 48%, 4%)
Oklch
oklch(89.2% 0.114 93.2)

TraditionalGoose Yellow」· PaintSunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E0C1EA
CCEAC2

Analogous

CCC2EA
E0C1EA
EAC2E0

Triadic

E0C1EA
EAE0C2
C2EAE0

Split-Comp.

E0C1EA
E0EAC2
C2EACC

Tetradic

E0C1EA
EACCC2
CCEAC2
C2E0EA

Contrast Matrix WCAG 2.1 Contrast

E0C1EA
CDD4DA
D6D8BD
E7DD8E
F5DA80
1.1
Fail
1.1
Fail
1.2
Fail
1.2
Fail
1.1
Fail
1.0
Fail
1.1
Fail
1.1
Fail
1.1
Fail
1.0
Fail
1.0
Fail
1.1
Fail
1.2
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.5Fail
1.4Fail
1.4Fail
Black BG
13.0AAA
14.0AAA
14.4AAA
15.1AAA
15.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D3D2E0
D0D0D9
D7D7C4
E3E3A1
E9E996

Deuteranopia

D4D7DE
D0CFD8
D7D7C5
E3E4A6
EBED9B

Tritanopia

DED8D7
CDD7D7
D6C9CA
E7B0B4
F4A7AB

Achromatopsia

CFCFCF
D3D3D3
D4D4D4
D7D7D7
D8D8D8

Shades & Tints Shades & Tints

#E0C1EA

Dark
Light

#CDD4DA

Dark
Light

#D6D8BD

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e0c1ea;
  --color-2: #cdd4da;
  --color-3: #d6d8bd;
  --color-4: #e7dd8e;
  --color-5: #f5da80;
}

SCSS

$color-1: #e0c1ea;
$color-2: #cdd4da;
$color-3: #d6d8bd;
$color-4: #e7dd8e;
$color-5: #f5da80;

TAILWIND

colors: {
  'brand-1': '#e0c1ea',
  'brand-2': '#cdd4da',
  'brand-3': '#d6d8bd',
  'brand-4': '#e7dd8e',
  'brand-5': '#f5da80',
}

RGB Array

[224, 193, 234], [205, 212, 218], [214, 216, 189], [231, 221, 142], [245, 218, 128]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E0C1EA, #CDD4DA, #D6D8BD, #E7DD8E, #F5DA80 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: #e0c1ea; --color-2: #cdd4da; --color-3: #d6d8bd; --color-4: #e7dd8e; --color-5: #f5da80. 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