← Back to Editor

#CEE3F2 · #DFE7EB · #D8D8E8 · #D8CAE0 · #EBDFEA

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

#CEE3F2

Sky Blue · Lavender · Sky Blue

HEX
#CEE3F2
RGB
rgb(206, 227, 242)
HSL
hsl(205, 58%, 88%)
HSB
hsb(205, 15%, 95%)
CMYK
cmyk(15%, 6%, 0%, 5%)
Oklch
oklch(90.5% 0.030 238.9)

Traditional「Sky Blue」· Paint「Sky Blue」· Creative Twilight Haze

#DFE7EB

Sky Blue · Lavender · Sky Blue

HEX
#DFE7EB
RGB
rgb(223, 231, 235)
HSL
hsl(200, 23%, 90%)
HSB
hsb(200, 5%, 92%)
CMYK
cmyk(5%, 2%, 0%, 8%)
Oklch
oklch(92.3% 0.010 228.9)

Traditional「Sky Blue」· Paint「Sky Blue」· Creative Twilight Haze

#D8D8E8

Wisteria · LightGray · Sky Blue

HEX
#D8D8E8
RGB
rgb(216, 216, 232)
HSL
hsl(240, 26%, 88%)
HSB
hsb(240, 7%, 91%)
CMYK
cmyk(7%, 7%, 0%, 9%)
Oklch
oklch(88.7% 0.022 285.9)

Traditional「Wisteria」· Paint「Sky Blue」· Creative Lavender Dream

#D8CAE0

Lilac · LightGray · Lavender

HEX
#D8CAE0
RGB
rgb(216, 202, 224)
HSL
hsl(278, 26%, 84%)
HSB
hsb(278, 10%, 88%)
CMYK
cmyk(4%, 10%, 0%, 12%)
Oklch
oklch(85.7% 0.034 313.5)

Traditional「Lilac」· Paint「Lavender」· Creative Lavender Dream

#EBDFEA

Mauve · Lavender · Lavender

HEX
#EBDFEA
RGB
rgb(235, 223, 234)
HSL
hsl(305, 23%, 90%)
HSB
hsb(305, 5%, 92%)
CMYK
cmyk(0%, 5%, 0%, 8%)
Oklch
oklch(91.6% 0.020 328.3)

Traditional「Mauve」· Paint「Lavender」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CEE3F2
F2DDCF

Analogous

CFF2EF
CEE3F2
CFD2F2

Triadic

CEE3F2
F2CFE3
E3F2CF

Split-Comp.

CEE3F2
F2CFD2
F2EFCF

Tetradic

CEE3F2
EFCFF2
F2DDCF
D2F2CF

Contrast Matrix WCAG 2.1 Contrast

CEE3F2
DFE7EB
D8D8E8
D8CAE0
EBDFEA
—
1.1
Fail
1.1
Fail
1.2
Fail
1.0
Fail
1.1
Fail
—
1.1
Fail
1.2
Fail
1.0
Fail
1.1
Fail
1.1
Fail
—
1.1
Fail
1.1
Fail
1.2
Fail
1.2
Fail
1.1
Fail
—
1.2
Fail
1.0
Fail
1.0
Fail
1.1
Fail
1.2
Fail
—
White BG
1.3Fail
1.3Fail
1.4Fail
1.6Fail
1.3Fail
Black BG
15.9AAA
16.8AAA
14.9AAA
13.4AAA
16.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D7D7EE
E2E3EA
D8D8E4
D2D2DB
E6E6E7

Deuteranopia

D6D4ED
E2E1EA
D8D8E3
D3D4D9
E7E7E7

Tritanopia

CFECEB
DFE9E9
D8E1E0
D7D6D6
EAE5E5

Achromatopsia

DEDEDE
E5E5E5
DADADA
D1D1D1
E4E4E4

Shades & Tints Shades & Tints

#CEE3F2

Dark
Light

#DFE7EB

Dark
Light

#D8D8E8

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cee3f2;
  --color-2: #dfe7eb;
  --color-3: #d8d8e8;
  --color-4: #d8cae0;
  --color-5: #ebdfea;
}

SCSS

$color-1: #cee3f2;
$color-2: #dfe7eb;
$color-3: #d8d8e8;
$color-4: #d8cae0;
$color-5: #ebdfea;

TAILWIND

colors: {
  'brand-1': '#cee3f2',
  'brand-2': '#dfe7eb',
  'brand-3': '#d8d8e8',
  'brand-4': '#d8cae0',
  'brand-5': '#ebdfea',
}

RGB Array

[206, 227, 242], [223, 231, 235], [216, 216, 232], [216, 202, 224], [235, 223, 234]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CEE3F2, #DFE7EB, #D8D8E8, #D8CAE0, #EBDFEA 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: #cee3f2; --color-2: #dfe7eb; --color-3: #d8d8e8; --color-4: #d8cae0; --color-5: #ebdfea. 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