← Back to Editor

#D1DFDD · #9C98A8 · #577471 · #223549 · #F1F4F6

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

#D1DFDD

Jade · LightGray · Glacier Blue

HEX
#D1DFDD
RGB
rgb(209, 223, 221)
HSL
hsl(171, 18%, 85%)
HSB
hsb(171, 6%, 87%)
CMYK
cmyk(6%, 0%, 1%, 13%)
Oklch
oklch(89.3% 0.015 186.7)

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

#9C98A8

Wisteria · DarkGray · Silver Sand

HEX
#9C98A8
RGB
rgb(156, 152, 168)
HSL
hsl(255, 8%, 63%)
HSB
hsb(255, 10%, 66%)
CMYK
cmyk(7%, 10%, 0%, 34%)
Oklch
oklch(68.8% 0.024 297.2)

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

#577471

Mineral Blue · DimGray · Mint Ice

HEX
#577471
RGB
rgb(87, 116, 113)
HSL
hsl(174, 14%, 40%)
HSB
hsb(174, 25%, 45%)
CMYK
cmyk(25%, 0%, 3%, 55%)
Oklch
oklch(53.5% 0.034 188.3)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#223549

Indigo · DarkSlateGray · Prussian Blue

HEX
#223549
RGB
rgb(34, 53, 73)
HSL
hsl(211, 36%, 21%)
HSB
hsb(211, 53%, 29%)
CMYK
cmyk(53%, 27%, 0%, 71%)
Oklch
oklch(32.2% 0.044 250.5)

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

#F1F4F6

Sky Blue · Snow · Sky Blue

HEX
#F1F4F6
RGB
rgb(241, 244, 246)
HSL
hsl(204, 22%, 95%)
HSB
hsb(204, 2%, 96%)
CMYK
cmyk(2%, 1%, 0%, 4%)
Oklch
oklch(96.5% 0.004 236.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D1DFDD
E0D2D4

Analogous

D2E0D7
D1DFDD
D2DBE0

Triadic

D1DFDD
DED2E0
E0DED2

Split-Comp.

D1DFDD
E0D2DB
E0D7D2

Tetradic

D1DFDD
D7D2E0
E0D2D4
DBE0D2

Contrast Matrix WCAG 2.1 Contrast

D1DFDD
9C98A8
577471
223549
F1F4F6
—
2.0
Fail
3.7
AA Large
9.1
AAA
1.2
Fail
2.0
Fail
—
1.8
Fail
4.5
AA Large
2.5
Fail
3.7
AA Large
1.8
Fail
—
2.5
Fail
4.6
AA
9.1
AAA
4.5
AA Large
2.5
Fail
—
11.4
AAA
1.2
Fail
2.5
Fail
4.6
AA
11.4
AAA
—
White BG
1.4Fail
2.8Fail
5.1AA
12.5AAA
1.1Fail
Black BG
15.3AAA
7.5AAA
4.1AA Large
1.7Fail
19.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D7D7DD
9A9AA4
646472
2A2A44
F2F2F6

Deuteranopia

D6D5DE
9B9BA3
626072
292843
F2F2F5

Tritanopia

D2DEDE
9CA1A0
587272
234040
F1F5F5

Achromatopsia

DBDBDB
9B9B9B
6B6B6B
323232
F3F3F3

Shades & Tints Shades & Tints

#D1DFDD

Dark
Light

#9C98A8

Dark
Light

#577471

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d1dfdd;
  --color-2: #9c98a8;
  --color-3: #577471;
  --color-4: #223549;
  --color-5: #f1f4f6;
}

SCSS

$color-1: #d1dfdd;
$color-2: #9c98a8;
$color-3: #577471;
$color-4: #223549;
$color-5: #f1f4f6;

TAILWIND

colors: {
  'brand-1': '#d1dfdd',
  'brand-2': '#9c98a8',
  'brand-3': '#577471',
  'brand-4': '#223549',
  'brand-5': '#f1f4f6',
}

RGB Array

[209, 223, 221], [156, 152, 168], [87, 116, 113], [34, 53, 73], [241, 244, 246]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #D1DFDD, #9C98A8, #577471, #223549, #F1F4F6 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: #d1dfdd; --color-2: #9c98a8; --color-3: #577471; --color-4: #223549; --color-5: #f1f4f6. 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