← Back to Editor

#C9C6B2 · #5C6066 · #A9B4CC · #B8C4D9 · #D9DFE4

cool

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#C9C6B2

Fresh Green · Silver · Sunflower

HEX
#C9C6B2
RGB
rgb(201, 198, 178)
HSL
hsl(52, 18%, 74%)
HSB
hsb(52, 11%, 79%)
CMYK
cmyk(0%, 1%, 11%, 21%)
Oklch
oklch(82.4% 0.027 100.0)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#5C6066

Ink Gray · DimGray · Charcoal

HEX
#5C6066
RGB
rgb(92, 96, 102)
HSL
hsl(216, 5%, 38%)
HSB
hsb(216, 10%, 40%)
CMYK
cmyk(10%, 6%, 0%, 60%)
Oklch
oklch(48.8% 0.011 258.4)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#A9B4CC

Azure · LightSteelBlue · Cobalt Blue

HEX
#A9B4CC
RGB
rgb(169, 180, 204)
HSL
hsl(221, 26%, 73%)
HSB
hsb(221, 17%, 80%)
CMYK
cmyk(17%, 12%, 0%, 20%)
Oklch
oklch(76.9% 0.036 265.9)

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

#B8C4D9

Azure · LightSteelBlue · Cobalt Blue

HEX
#B8C4D9
RGB
rgb(184, 196, 217)
HSL
hsl(218, 30%, 79%)
HSB
hsb(218, 15%, 85%)
CMYK
cmyk(15%, 10%, 0%, 15%)
Oklch
oklch(81.8% 0.032 261.7)

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

#D9DFE4

Sky Blue · LightGray · Sky Blue

HEX
#D9DFE4
RGB
rgb(217, 223, 228)
HSL
hsl(207, 17%, 87%)
HSB
hsb(207, 5%, 89%)
CMYK
cmyk(5%, 2%, 0%, 11%)
Oklch
oklch(90.1% 0.009 242.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C9C6B2
B1B4C9

Analogous

C9BAB1
C9C6B2
C0C9B1

Triadic

C9C6B2
B1C9C5
C5B1C9

Split-Comp.

C9C6B2
B1C0C9
BAB1C9

Tetradic

C9C6B2
B1C9BA
B1B4C9
C9B1C0

Contrast Matrix WCAG 2.1 Contrast

C9C6B2
5C6066
A9B4CC
B8C4D9
D9DFE4
—
3.7
AA Large
1.2
Fail
1.0
Fail
1.3
Fail
3.7
AA Large
—
3.0
AA Large
3.6
AA Large
4.7
AA
1.2
Fail
3.0
AA Large
—
1.2
Fail
1.5
Fail
1.0
Fail
3.6
AA Large
1.2
Fail
—
1.3
Fail
1.3
Fail
4.7
AA
1.5
Fail
1.3
Fail
—
White BG
1.7Fail
6.3AA
2.1Fail
1.8Fail
1.3Fail
Black BG
12.2AAA
3.3AA Large
10.1AAA
11.9AAA
15.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C8C8B7
5E5E65
AEAEC6
BDBDD4
DCDCE3

Deuteranopia

C8C8B8
5E5D64
ADACC5
BDBCD3
DBDBE3

Tritanopia

C9BBBC
5C6363
AAC2C1
B9D0CF
D9E2E2

Achromatopsia

C5C5C5
5F5F5F
B3B3B3
C3C3C3
DEDEDE

Shades & Tints Shades & Tints

#C9C6B2

Dark
Light

#5C6066

Dark
Light

#A9B4CC

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c9c6b2;
  --color-2: #5c6066;
  --color-3: #a9b4cc;
  --color-4: #b8c4d9;
  --color-5: #d9dfe4;
}

SCSS

$color-1: #c9c6b2;
$color-2: #5c6066;
$color-3: #a9b4cc;
$color-4: #b8c4d9;
$color-5: #d9dfe4;

TAILWIND

colors: {
  'brand-1': '#c9c6b2',
  'brand-2': '#5c6066',
  'brand-3': '#a9b4cc',
  'brand-4': '#b8c4d9',
  'brand-5': '#d9dfe4',
}

RGB Array

[201, 198, 178], [92, 96, 102], [169, 180, 204], [184, 196, 217], [217, 223, 228]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #C9C6B2, #5C6066, #A9B4CC, #B8C4D9, #D9DFE4 is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs, 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: #c9c6b2; --color-2: #5c6066; --color-3: #a9b4cc; --color-4: #b8c4d9; --color-5: #d9dfe4. 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. 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 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