← Back to Editor

#A7B3BF · #758AA9 · #413846 · #DDE6F1 · #74171A

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

#A7B3BF

Azure · DarkGray · Cobalt Blue

HEX
#A7B3BF
RGB
rgb(167, 179, 191)
HSL
hsl(210, 16%, 70%)
HSB
hsb(210, 13%, 75%)
CMYK
cmyk(13%, 6%, 0%, 25%)
Oklch
oklch(76.1% 0.022 248.1)

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

#758AA9

Azure · LightSlateGray · Navy Blue

HEX
#758AA9
RGB
rgb(117, 138, 169)
HSL
hsl(216, 23%, 56%)
HSB
hsb(216, 31%, 66%)
CMYK
cmyk(31%, 18%, 0%, 34%)
Oklch
oklch(62.8% 0.053 258.0)

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

#413846

Dark Plum · DarkSlateGray · Eggplant

HEX
#413846
RGB
rgb(65, 56, 70)
HSL
hsl(279, 11%, 25%)
HSB
hsb(279, 20%, 27%)
CMYK
cmyk(7%, 20%, 0%, 73%)
Oklch
oklch(35.6% 0.027 313.5)

Traditional「Dark Plum」· Paint「Eggplant」· Creative Blush Sunrise

#DDE6F1

Azure · Lavender · Sky Blue

HEX
#DDE6F1
RGB
rgb(221, 230, 241)
HSL
hsl(213, 42%, 91%)
HSB
hsb(213, 8%, 95%)
CMYK
cmyk(8%, 5%, 0%, 5%)
Oklch
oklch(92.1% 0.018 253.3)

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

#74171A

Vermilion · Maroon · Wine Red

HEX
#74171A
RGB
rgb(116, 23, 26)
HSL
hsl(358, 67%, 27%)
HSB
hsb(358, 80%, 45%)
CMYK
cmyk(0%, 80%, 78%, 55%)
Oklch
oklch(36.8% 0.127 24.6)

Traditional「Vermilion」· Paint「Wine Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A7B3BF
BFB3A6

Analogous

A6BFBF
A7B3BF
A6A6BF

Triadic

A7B3BF
BFA6B3
B3BFA6

Split-Comp.

A7B3BF
BFA6A6
BFBFA6

Tetradic

A7B3BF
BFA6BF
BFB3A6
A6BFA6

Contrast Matrix WCAG 2.1 Contrast

A7B3BF
758AA9
413846
DDE6F1
74171A
—
1.7
Fail
5.2
AA
1.7
Fail
5.2
AA
1.7
Fail
—
3.2
AA Large
2.8
Fail
3.2
AA Large
5.2
AA
3.2
AA Large
—
8.9
AAA
1.0
Fail
1.7
Fail
2.8
Fail
8.9
AAA
—
8.9
AAA
5.2
AA
3.2
AA Large
1.0
Fail
8.9
AAA
—
White BG
2.1Fail
3.5AA Large
11.2AAA
1.3Fail
11.2AAA
Black BG
9.8AAA
6.0AA
1.9Fail
16.7AAA
1.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

ACACBC
7E7EA1
3D3D43
E1E1EE
4C4B19

Deuteranopia

ACABBB
7D7BA0
3E3E42
E0E0EE
515819

Tritanopia

A8BAB9
769C9A
41403F
DDECEC
6F1919

Achromatopsia

B1B1B1
878787
3C3C3C
E5E5E5
333333

Shades & Tints Shades & Tints

#A7B3BF

Dark
Light

#758AA9

Dark
Light

#413846

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a7b3bf;
  --color-2: #758aa9;
  --color-3: #413846;
  --color-4: #dde6f1;
  --color-5: #74171a;
}

SCSS

$color-1: #a7b3bf;
$color-2: #758aa9;
$color-3: #413846;
$color-4: #dde6f1;
$color-5: #74171a;

TAILWIND

colors: {
  'brand-1': '#a7b3bf',
  'brand-2': '#758aa9',
  'brand-3': '#413846',
  'brand-4': '#dde6f1',
  'brand-5': '#74171a',
}

RGB Array

[167, 179, 191], [117, 138, 169], [65, 56, 70], [221, 230, 241], [116, 23, 26]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #A7B3BF, #758AA9, #413846, #DDE6F1, #74171A is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #a7b3bf; --color-2: #758aa9; --color-3: #413846; --color-4: #dde6f1; --color-5: #74171a. 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. 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