← Back to Editor

#CDE3EE · #EAE6E3 · #DECED9 · #DAA7B8 · #8A9688

spring

A 5-color spring 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

#CDE3EE

Sky Blue · Lavender · Sky Blue

HEX
#CDE3EE
RGB
rgb(205, 227, 238)
HSL
hsl(200, 49%, 87%)
HSB
hsb(200, 14%, 93%)
CMYK
cmyk(14%, 5%, 0%, 7%)
Oklch
oklch(90.3% 0.028 229.2)

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

#EAE6E3

Apricot · Linen · Peach Orange

HEX
#EAE6E3
RGB
rgb(234, 230, 227)
HSL
hsl(26, 14%, 90%)
HSB
hsb(26, 3%, 92%)
CMYK
cmyk(0%, 2%, 3%, 8%)
Oklch
oklch(92.7% 0.006 59.6)

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

#DECED9

Mauve · LightGray · Lavender

HEX
#DECED9
RGB
rgb(222, 206, 217)
HSL
hsl(319, 20%, 84%)
HSB
hsb(319, 7%, 87%)
CMYK
cmyk(0%, 7%, 2%, 13%)
Oklch
oklch(86.8% 0.023 336.9)

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

#DAA7B8

Rouge · Silver · Rose Pink

HEX
#DAA7B8
RGB
rgb(218, 167, 184)
HSL
hsl(340, 41%, 75%)
HSB
hsb(340, 23%, 85%)
CMYK
cmyk(0%, 23%, 16%, 15%)
Oklch
oklch(78.0% 0.064 356.8)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#8A9688

Ash · Gray · Silver Sand

HEX
#8A9688
RGB
rgb(138, 150, 136)
HSL
hsl(111, 6%, 56%)
HSB
hsb(111, 9%, 59%)
CMYK
cmyk(8%, 0%, 9%, 41%)
Oklch
oklch(65.9% 0.025 141.2)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CDE3EE
EED8CE

Analogous

CEEEE9
CDE3EE
CED3EE

Triadic

CDE3EE
EECEE3
E3EECE

Split-Comp.

CDE3EE
EECED3
EEE9CE

Tetradic

CDE3EE
E9CEEE
EED8CE
D3EECE

Contrast Matrix WCAG 2.1 Contrast

CDE3EE
EAE6E3
DECED9
DAA7B8
8A9688
—
1.1
Fail
1.1
Fail
1.6
Fail
2.3
Fail
1.1
Fail
—
1.2
Fail
1.7
Fail
2.5
Fail
1.1
Fail
1.2
Fail
—
1.4
Fail
2.0
Fail
1.6
Fail
1.7
Fail
1.4
Fail
—
1.5
Fail
2.3
Fail
2.5
Fail
2.0
Fail
1.5
Fail
—
White BG
1.3Fail
1.2Fail
1.5Fail
2.1Fail
3.1AA Large
Black BG
15.8AAA
16.9AAA
13.9AAA
10.2AAA
6.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D7D7EB
E8E8E4
D7D7D6
C4C3B4
8F8F8B

Deuteranopia

D5D4EB
E9E9E4
D8D9D6
C7CBB3
8F8E8C

Tritanopia

CEE9E9
EAE4E4
DDD4D4
D7B1B0
8B8E8F

Achromatopsia

DEDEDE
E7E7E7
D4D4D4
B8B8B8
919191

Shades & Tints Shades & Tints

#CDE3EE

Dark
Light

#EAE6E3

Dark
Light

#DECED9

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cde3ee;
  --color-2: #eae6e3;
  --color-3: #deced9;
  --color-4: #daa7b8;
  --color-5: #8a9688;
}

SCSS

$color-1: #cde3ee;
$color-2: #eae6e3;
$color-3: #deced9;
$color-4: #daa7b8;
$color-5: #8a9688;

TAILWIND

colors: {
  'brand-1': '#cde3ee',
  'brand-2': '#eae6e3',
  'brand-3': '#deced9',
  'brand-4': '#daa7b8',
  'brand-5': '#8a9688',
}

RGB Array

[205, 227, 238], [234, 230, 227], [222, 206, 217], [218, 167, 184], [138, 150, 136]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This spring-style palette of #CDE3EE, #EAE6E3, #DECED9, #DAA7B8, #8A9688 is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #cde3ee; --color-2: #eae6e3; --color-3: #deced9; --color-4: #daa7b8; --color-5: #8a9688. 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 spring-style 5-color scheme is especially suited for beauty, lifestyle, arts industries. Restrained colors convey professionalism and trust. 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