← Back to Editor

#DCD5E5 · #AEB7D4 · #87A3CB · #778AB4 · #53436A

cool

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#DCD5E5

Wisteria · LightGray · Lavender

HEX
#DCD5E5
RGB
rgb(220, 213, 229)
HSL
hsl(266, 24%, 87%)
HSB
hsb(266, 7%, 90%)
CMYK
cmyk(4%, 7%, 0%, 10%)
Oklch
oklch(88.3% 0.023 305.6)

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

#AEB7D4

Azure · LightSteelBlue · Cobalt Blue

HEX
#AEB7D4
RGB
rgb(174, 183, 212)
HSL
hsl(226, 31%, 76%)
HSB
hsb(226, 18%, 83%)
CMYK
cmyk(18%, 14%, 0%, 17%)
Oklch
oklch(78.2% 0.042 271.8)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#87A3CB

Azure · DarkGray · Cobalt Blue

HEX
#87A3CB
RGB
rgb(135, 163, 203)
HSL
hsl(215, 40%, 66%)
HSB
hsb(215, 33%, 80%)
CMYK
cmyk(33%, 20%, 0%, 20%)
Oklch
oklch(70.9% 0.067 257.3)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#778AB4

Azure · LightSlateGray · Navy Blue

HEX
#778AB4
RGB
rgb(119, 138, 180)
HSL
hsl(221, 29%, 59%)
HSB
hsb(221, 34%, 71%)
CMYK
cmyk(34%, 23%, 0%, 29%)
Oklch
oklch(63.4% 0.067 265.6)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

#53436A

Deep Indigo · DarkSlateBlue · Eggplant

HEX
#53436A
RGB
rgb(83, 67, 106)
HSL
hsl(265, 23%, 34%)
HSB
hsb(265, 37%, 42%)
CMYK
cmyk(22%, 37%, 0%, 58%)
Oklch
oklch(41.6% 0.066 302.5)

Traditional「Deep Indigo」· Paint「Eggplant」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DCD5E5
DFE6D6

Analogous

D6D7E6
DCD5E5
E5D6E6

Triadic

DCD5E5
E6DDD6
D6E6DD

Split-Comp.

DCD5E5
E6E5D6
D7E6D6

Tetradic

DCD5E5
E6D6D7
DFE6D6
D6E6E5

Contrast Matrix WCAG 2.1 Contrast

DCD5E5
AEB7D4
87A3CB
778AB4
53436A
—
1.4
Fail
1.8
Fail
2.4
Fail
6.2
AA
1.4
Fail
—
1.3
Fail
1.7
Fail
4.4
AA Large
1.8
Fail
1.3
Fail
—
1.3
Fail
3.4
AA Large
2.4
Fail
1.7
Fail
1.3
Fail
—
2.6
Fail
6.2
AA
4.4
AA Large
3.4
AA Large
2.6
Fail
—
White BG
1.4Fail
2.0Fail
2.6Fail
3.5AA Large
8.8AAA
Black BG
14.7AAA
10.5AAA
8.1AAA
6.1AA
2.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D9D9E1
B2B2CD
9393C1
7F7FAA
4C4C61

Deuteranopia

D9DAE0
B1B1CB
928FBF
7E7DA7
4D4E5E

Tritanopia

DCDEDD
AEC7C6
88BAB8
78A2A0
525957

Achromatopsia

D9D9D9
B8B8B8
9F9F9F
898989
4C4C4C

Shades & Tints Shades & Tints

#DCD5E5

Dark
Light

#AEB7D4

Dark
Light

#87A3CB

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dcd5e5;
  --color-2: #aeb7d4;
  --color-3: #87a3cb;
  --color-4: #778ab4;
  --color-5: #53436a;
}

SCSS

$color-1: #dcd5e5;
$color-2: #aeb7d4;
$color-3: #87a3cb;
$color-4: #778ab4;
$color-5: #53436a;

TAILWIND

colors: {
  'brand-1': '#dcd5e5',
  'brand-2': '#aeb7d4',
  'brand-3': '#87a3cb',
  'brand-4': '#778ab4',
  'brand-5': '#53436a',
}

RGB Array

[220, 213, 229], [174, 183, 212], [135, 163, 203], [119, 138, 180], [83, 67, 106]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #DCD5E5, #AEB7D4, #87A3CB, #778AB4, #53436A is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. 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: #dcd5e5; --color-2: #aeb7d4; --color-3: #87a3cb; --color-4: #778ab4; --color-5: #53436a. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. High-contrast palettes naturally meet WCAG accessibility standards. 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 cool-style 5-color scheme is especially suited for tech, SaaS, healthcare, eco 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