← Back to Editor

#475055 · #486A85 · #4C7A9C · #4F94A4 · #BFCACC

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

#475055

Slate Blue · DarkSlateGray · Charcoal

HEX
#475055
RGB
rgb(71, 80, 85)
HSL
hsl(201, 9%, 31%)
HSB
hsb(201, 16%, 33%)
CMYK
cmyk(16%, 6%, 0%, 67%)
Oklch
oklch(42.5% 0.014 232.0)

Traditional「Slate Blue」· Paint「Charcoal」· Creative Midnight Shadow

#486A85

Slate Blue · DimGray · Prussian Blue

HEX
#486A85
RGB
rgb(72, 106, 133)
HSL
hsl(207, 30%, 40%)
HSB
hsb(207, 46%, 52%)
CMYK
cmyk(46%, 20%, 0%, 48%)
Oklch
oklch(50.9% 0.058 243.2)

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

#4C7A9C

Slate Blue · SteelBlue · Navy Blue

HEX
#4C7A9C
RGB
rgb(76, 122, 156)
HSL
hsl(206, 34%, 45%)
HSB
hsb(206, 51%, 61%)
CMYK
cmyk(51%, 22%, 0%, 39%)
Oklch
oklch(56.0% 0.073 241.7)

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

#4F94A4

Slate Blue · CadetBlue · Mint Ice

HEX
#4F94A4
RGB
rgb(79, 148, 164)
HSL
hsl(191, 35%, 48%)
HSB
hsb(191, 52%, 64%)
CMYK
cmyk(52%, 10%, 0%, 36%)
Oklch
oklch(62.8% 0.074 214.6)

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

#BFCACC

Sky Blue · Silver · Glacier Blue

HEX
#BFCACC
RGB
rgb(191, 202, 204)
HSL
hsl(189, 11%, 77%)
HSB
hsb(189, 6%, 80%)
CMYK
cmyk(6%, 1%, 0%, 20%)
Oklch
oklch(83.1% 0.012 209.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

475055
564D48

Analogous

485654
475055
484A56

Triadic

475055
564851
515648

Split-Comp.

475055
56484A
565448

Tetradic

475055
544856
564D48
4A5648

Contrast Matrix WCAG 2.1 Contrast

475055
486A85
4C7A9C
4F94A4
BFCACC
—
1.4
Fail
1.8
Fail
2.4
Fail
4.9
AA
1.4
Fail
—
1.2
Fail
1.7
Fail
3.4
AA Large
1.8
Fail
1.2
Fail
—
1.3
Fail
2.7
Fail
2.4
Fail
1.7
Fail
1.3
Fail
—
2.1
Fail
4.9
AA
3.4
AA Large
2.7
Fail
2.1
Fail
—
White BG
8.2AAA
5.7AA
4.6AA
3.4AA Large
1.7Fail
Black BG
2.5Fail
3.7AA Large
4.6AA
6.1AA
12.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4B4B54
57577E
606094
6D6DA0
C4C4CC

Deuteranopia

4A4A54
55527D
5D5A92
69649F
C3C2CB

Tritanopia

475353
4A7978
4E8D8C
529D9C
C0CBCB

Achromatopsia

4E4E4E
636363
707070
818181
C7C7C7

Shades & Tints Shades & Tints

#475055

Dark
Light

#486A85

Dark
Light

#4C7A9C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #475055;
  --color-2: #486a85;
  --color-3: #4c7a9c;
  --color-4: #4f94a4;
  --color-5: #bfcacc;
}

SCSS

$color-1: #475055;
$color-2: #486a85;
$color-3: #4c7a9c;
$color-4: #4f94a4;
$color-5: #bfcacc;

TAILWIND

colors: {
  'brand-1': '#475055',
  'brand-2': '#486a85',
  'brand-3': '#4c7a9c',
  'brand-4': '#4f94a4',
  'brand-5': '#bfcacc',
}

RGB Array

[71, 80, 85], [72, 106, 133], [76, 122, 156], [79, 148, 164], [191, 202, 204]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #475055, #486A85, #4C7A9C, #4F94A4, #BFCACC 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: #475055; --color-2: #486a85; --color-3: #4c7a9c; --color-4: #4f94a4; --color-5: #bfcacc. 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