← Back to Editor

#464C4C · #819FAA · #FFFFFF · #227CA1 · #EFF7FB

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

#464C4C

Dark Cyan · DarkSlateGray · Charcoal

HEX
#464C4C
RGB
rgb(70, 76, 76)
HSL
hsl(180, 4%, 29%)
HSB
hsb(180, 8%, 30%)
CMYK
cmyk(8%, 0%, 0%, 70%)
Oklch
oklch(41.1% 0.008 196.9)

Traditional「Dark Cyan」· Paint「Charcoal」· Creative Midnight Shadow

#819FAA

Slate Blue · LightSlateGray · Lake Green

HEX
#819FAA
RGB
rgb(129, 159, 170)
HSL
hsl(196, 19%, 59%)
HSB
hsb(196, 24%, 67%)
CMYK
cmyk(24%, 6%, 0%, 33%)
Oklch
oklch(68.4% 0.037 222.1)

Traditional「Slate Blue」· Paint「Lake Green」· Creative Blush Sunrise

#FFFFFF

Moonlight White · White · Cloud White

HEX
#FFFFFF
RGB
rgb(255, 255, 255)
HSL
hsl(0, 0%, 100%)
HSB
hsb(0, 0%, 100%)
CMYK
cmyk(0%, 0%, 0%, 0%)
Oklch
oklch(100.0% 0.000 89.9)

Traditional「Moonlight White」· Paint「Cloud White」· Creative Morning Mist

#227CA1

Lake Blue · SteelBlue · Mint Ice

HEX
#227CA1
RGB
rgb(34, 124, 161)
HSL
hsl(197, 65%, 38%)
HSB
hsb(197, 79%, 63%)
CMYK
cmyk(79%, 23%, 0%, 37%)
Oklch
oklch(55.2% 0.099 230.6)

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

#EFF7FB

Sky Blue · Snow · Sky Blue

HEX
#EFF7FB
RGB
rgb(239, 247, 251)
HSL
hsl(200, 60%, 96%)
HSB
hsb(200, 5%, 98%)
CMYK
cmyk(5%, 2%, 0%, 2%)
Oklch
oklch(97.1% 0.010 228.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

464C4C
4D4747

Analogous

474D4A
464C4C
474A4D

Triadic

464C4C
4D474D
4D4D47

Split-Comp.

464C4C
4D474A
4D4A47

Tetradic

464C4C
4A474D
4D4747
4A4D47

Contrast Matrix WCAG 2.1 Contrast

464C4C
819FAA
FFFFFF
227CA1
EFF7FB
—
3.1
AA Large
8.8
AAA
1.9
Fail
8.1
AAA
3.1
AA Large
—
2.8
Fail
1.7
Fail
2.6
Fail
8.8
AAA
2.8
Fail
—
4.7
AA
1.1
Fail
1.9
Fail
1.7
Fail
4.7
AA
—
4.3
AA Large
8.1
AAA
2.6
Fail
1.1
Fail
4.3
AA Large
—
White BG
8.8AAA
2.8Fail
1.0Fail
4.7AA
1.1Fail
Black BG
2.4Fail
7.5AAA
21.0AAA
4.5AA Large
19.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

49494C
8E8EA7
FFFFFF
494A98
F2F3FA

Deuteranopia

48484C
8C8AA7
FFFFFF
443D96
F2F1FA

Tritanopia

464C4C
83A5A5
FFFFFF
27918F
EFF9F9

Achromatopsia

4A4A4A
979797
FFFFFF
656565
F5F5F5

Shades & Tints Shades & Tints

#464C4C

Dark
Light

#819FAA

Dark
Light

#FFFFFF

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #464c4c;
  --color-2: #819faa;
  --color-3: #ffffff;
  --color-4: #227ca1;
  --color-5: #eff7fb;
}

SCSS

$color-1: #464c4c;
$color-2: #819faa;
$color-3: #ffffff;
$color-4: #227ca1;
$color-5: #eff7fb;

TAILWIND

colors: {
  'brand-1': '#464c4c',
  'brand-2': '#819faa',
  'brand-3': '#ffffff',
  'brand-4': '#227ca1',
  'brand-5': '#eff7fb',
}

RGB Array

[70, 76, 76], [129, 159, 170], [255, 255, 255], [34, 124, 161], [239, 247, 251]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #464C4C, #819FAA, #FFFFFF, #227CA1, #EFF7FB 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: #464c4c; --color-2: #819faa; --color-3: #ffffff; --color-4: #227ca1; --color-5: #eff7fb. 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