← Back to Editor

#DEDCD8 · #BACED1 · #8ABECB · #6AA6BA · #485561

cool

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#DEDCD8

Goose Yellow · LightGray · Cloud White

HEX
#DEDCD8
RGB
rgb(222, 220, 216)
HSL
hsl(40, 8%, 86%)
HSB
hsb(40, 3%, 87%)
CMYK
cmyk(0%, 1%, 3%, 13%)
Oklch
oklch(89.5% 0.006 84.6)

Traditional「Goose Yellow」· Paint「Cloud White」· Creative Silver Lining

#BACED1

Sky Blue · LightSteelBlue · Glacier Blue

HEX
#BACED1
RGB
rgb(186, 206, 209)
HSL
hsl(188, 20%, 77%)
HSB
hsb(188, 11%, 82%)
CMYK
cmyk(11%, 1%, 0%, 18%)
Oklch
oklch(83.7% 0.022 207.6)

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

#8ABECB

Sky Blue · SkyBlue · Lake Green

HEX
#8ABECB
RGB
rgb(138, 190, 203)
HSL
hsl(192, 38%, 67%)
HSB
hsb(192, 32%, 80%)
CMYK
cmyk(32%, 6%, 0%, 20%)
Oklch
oklch(77.0% 0.057 214.9)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#6AA6BA

Slate Blue · CadetBlue · Lake Green

HEX
#6AA6BA
RGB
rgb(106, 166, 186)
HSL
hsl(195, 37%, 57%)
HSB
hsb(195, 43%, 73%)
CMYK
cmyk(43%, 11%, 0%, 27%)
Oklch
oklch(69.2% 0.069 221.1)

Traditional「Slate Blue」· Paint「Lake Green」· Creative Blush Sunrise

#485561

Slate Blue · DarkSlateGray · Prussian Blue

HEX
#485561
RGB
rgb(72, 85, 97)
HSL
hsl(209, 15%, 33%)
HSB
hsb(209, 26%, 38%)
CMYK
cmyk(26%, 12%, 0%, 62%)
Oklch
oklch(44.3% 0.026 246.3)

Traditional「Slate Blue」· Paint「Prussian Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DEDCD8
D8DADE

Analogous

DED9D8
DEDCD8
DDDED8

Triadic

DEDCD8
D8DEDC
DCD8DE

Split-Comp.

DEDCD8
D8DDDE
D9D8DE

Tetradic

DEDCD8
D8DED9
D8DADE
DED8DD

Contrast Matrix WCAG 2.1 Contrast

DEDCD8
BACED1
8ABECB
6AA6BA
485561
—
1.2
Fail
1.5
Fail
2.0
Fail
5.6
AA
1.2
Fail
—
1.2
Fail
1.7
Fail
4.7
AA
1.5
Fail
1.2
Fail
—
1.3
Fail
3.8
AA Large
2.0
Fail
1.7
Fail
1.3
Fail
—
2.8
Fail
5.6
AA
4.7
AA
3.8
AA Large
2.8
Fail
—
White BG
1.4Fail
1.6Fail
2.0Fail
2.7Fail
7.6AAA
Black BG
15.3AAA
12.8AAA
10.3AAA
7.8AAA
2.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

DDDDD9
C3C3D0
A1A1C8
8485B5
4E4E5E

Deuteranopia

DDDDD9
C2C0D0
9E9AC7
817CB4
4D4C5D

Tritanopia

DEDADA
BBD0D0
8DC5C5
6DB1B1
495C5B

Achromatopsia

DCDCDC
C8C8C8
B0B0B0
969696
525252

Shades & Tints Shades & Tints

#DEDCD8

Dark
Light

#BACED1

Dark
Light

#8ABECB

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dedcd8;
  --color-2: #baced1;
  --color-3: #8abecb;
  --color-4: #6aa6ba;
  --color-5: #485561;
}

SCSS

$color-1: #dedcd8;
$color-2: #baced1;
$color-3: #8abecb;
$color-4: #6aa6ba;
$color-5: #485561;

TAILWIND

colors: {
  'brand-1': '#dedcd8',
  'brand-2': '#baced1',
  'brand-3': '#8abecb',
  'brand-4': '#6aa6ba',
  'brand-5': '#485561',
}

RGB Array

[222, 220, 216], [186, 206, 209], [138, 190, 203], [106, 166, 186], [72, 85, 97]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #DEDCD8, #BACED1, #8ABECB, #6AA6BA, #485561 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: #dedcd8; --color-2: #baced1; --color-3: #8abecb; --color-4: #6aa6ba; --color-5: #485561. 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