← Back to Editor

#446B7F · #708695 · #9BA2AC · #C7BDC2 · #F3D8D8

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

#446B7F

Slate Blue · DimGray · Prussian Blue

HEX
#446B7F
RGB
rgb(68, 107, 127)
HSL
hsl(200, 30%, 38%)
HSB
hsb(200, 46%, 50%)
CMYK
cmyk(46%, 16%, 0%, 50%)
Oklch
oklch(50.7% 0.054 231.6)

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

#708695

Slate Blue · SlateGray · Navy Blue

HEX
#708695
RGB
rgb(112, 134, 149)
HSL
hsl(204, 15%, 51%)
HSB
hsb(204, 25%, 58%)
CMYK
cmyk(25%, 10%, 0%, 42%)
Oklch
oklch(60.8% 0.034 237.9)

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

#9BA2AC

Azure · DarkGray · Silver Sand

HEX
#9BA2AC
RGB
rgb(155, 162, 172)
HSL
hsl(215, 9%, 64%)
HSB
hsb(215, 10%, 67%)
CMYK
cmyk(10%, 6%, 0%, 33%)
Oklch
oklch(71.0% 0.017 257.2)

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

#C7BDC2

Rouge · Silver · Pearl Gray

HEX
#C7BDC2
RGB
rgb(199, 189, 194)
HSL
hsl(330, 8%, 76%)
HSB
hsb(330, 5%, 78%)
CMYK
cmyk(0%, 5%, 3%, 22%)
Oklch
oklch(80.8% 0.013 345.6)

Traditional「Rouge」· Paint「Pearl Gray」· Creative Silver Lining

#F3D8D8

Peach Pink · Bisque · Cherry Blossom

HEX
#F3D8D8
RGB
rgb(243, 216, 216)
HSL
hsl(0, 53%, 90%)
HSB
hsb(0, 11%, 95%)
CMYK
cmyk(0%, 11%, 11%, 5%)
Oklch
oklch(90.4% 0.030 17.7)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

446B7F
7E5744

Analogous

447E74
446B7F
444E7E

Triadic

446B7F
7E446B
6B7E44

Split-Comp.

446B7F
7E444E
7E7444

Tetradic

446B7F
74447E
7E5744
4E7E44

Contrast Matrix WCAG 2.1 Contrast

446B7F
708695
9BA2AC
C7BDC2
F3D8D8
—
1.5
Fail
2.2
Fail
3.1
AA Large
4.3
AA Large
1.5
Fail
—
1.5
Fail
2.1
Fail
2.8
Fail
2.2
Fail
1.5
Fail
—
1.4
Fail
1.9
Fail
3.1
AA Large
2.1
Fail
1.4
Fail
—
1.4
Fail
4.3
AA Large
2.8
Fail
1.9
Fail
1.4
Fail
—
White BG
5.7AA
3.8AA Large
2.6Fail
1.8Fail
1.3Fail
Black BG
3.7AA Large
5.5AA
8.2AAA
11.5AAA
15.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

55557A
7A7A91
9E9EAA
C3C3C1
E7E7D8

Deuteranopia

535079
787791
9E9DA9
C3C4C0
E9EBD8

Tritanopia

467676
718F8E
9BA8A7
C6C0C0
F2D8D8

Achromatopsia

626262
818181
A1A1A1
C1C1C1
E0E0E0

Shades & Tints Shades & Tints

#446B7F

Dark
Light

#708695

Dark
Light

#9BA2AC

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #446b7f;
  --color-2: #708695;
  --color-3: #9ba2ac;
  --color-4: #c7bdc2;
  --color-5: #f3d8d8;
}

SCSS

$color-1: #446b7f;
$color-2: #708695;
$color-3: #9ba2ac;
$color-4: #c7bdc2;
$color-5: #f3d8d8;

TAILWIND

colors: {
  'brand-1': '#446b7f',
  'brand-2': '#708695',
  'brand-3': '#9ba2ac',
  'brand-4': '#c7bdc2',
  'brand-5': '#f3d8d8',
}

RGB Array

[68, 107, 127], [112, 134, 149], [155, 162, 172], [199, 189, 194], [243, 216, 216]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #446B7F, #708695, #9BA2AC, #C7BDC2, #F3D8D8 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: #446b7f; --color-2: #708695; --color-3: #9ba2ac; --color-4: #c7bdc2; --color-5: #f3d8d8. 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