← Back to Editor

#798B8D · #97A9A9 · #ADC0BC · #D8E6E6 · #F0F5F4

cool

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#798B8D

Slate Blue · LightSlateGray · Warm Gray

HEX
#798B8D
RGB
rgb(121, 139, 141)
HSL
hsl(186, 8%, 51%)
HSB
hsb(186, 14%, 55%)
CMYK
cmyk(14%, 1%, 0%, 45%)
Oklch
oklch(62.3% 0.021 204.8)

Traditional「Slate Blue」· Paint「Warm Gray」· Creative Urban Concrete

#97A9A9

Sky Blue · DarkGray · Silver Sand

HEX
#97A9A9
RGB
rgb(151, 169, 169)
HSL
hsl(180, 9%, 63%)
HSB
hsb(180, 11%, 66%)
CMYK
cmyk(11%, 0%, 0%, 34%)
Oklch
oklch(72.1% 0.020 196.7)

Traditional「Sky Blue」· Paint「Silver Sand」· Creative Urban Concrete

#ADC0BC

Jade · Silver · Lake Green

HEX
#ADC0BC
RGB
rgb(173, 192, 188)
HSL
hsl(167, 13%, 72%)
HSB
hsb(167, 10%, 75%)
CMYK
cmyk(10%, 0%, 2%, 25%)
Oklch
oklch(79.2% 0.022 181.7)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#D8E6E6

Sky Blue · Lavender · Glacier Blue

HEX
#D8E6E6
RGB
rgb(216, 230, 230)
HSL
hsl(180, 22%, 87%)
HSB
hsb(180, 6%, 90%)
CMYK
cmyk(6%, 0%, 0%, 10%)
Oklch
oklch(91.4% 0.015 196.9)

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

#F0F5F4

Jade · SeaShell · Glacier Blue

HEX
#F0F5F4
RGB
rgb(240, 245, 244)
HSL
hsl(168, 20%, 95%)
HSB
hsb(168, 2%, 96%)
CMYK
cmyk(2%, 0%, 0%, 4%)
Oklch
oklch(96.6% 0.005 183.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

798B8D
8C7A78

Analogous

788C84
798B8D
78808C

Triadic

798B8D
8C788A
8A8C78

Split-Comp.

798B8D
8C7880
8C8478

Tetradic

798B8D
84788C
8C7A78
808C78

Contrast Matrix WCAG 2.1 Contrast

798B8D
97A9A9
ADC0BC
D8E6E6
F0F5F4
—
1.5
Fail
1.9
Fail
2.8
Fail
3.2
AA Large
1.5
Fail
—
1.3
Fail
1.9
Fail
2.2
Fail
1.9
Fail
1.3
Fail
—
1.5
Fail
1.7
Fail
2.8
Fail
1.9
Fail
1.5
Fail
—
1.2
Fail
3.2
AA Large
2.2
Fail
1.7
Fail
1.2
Fail
—
White BG
3.6AA Large
2.5Fail
1.9Fail
1.3Fail
1.1Fail
Black BG
5.9AA
8.6AAA
11.0AAA
16.4AAA
19.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

81818D
9F9FA9
B5B5BD
DEDEE6
F2F2F4

Deuteranopia

807E8C
9E9CA9
B4B3BD
DDDCE6
F2F2F4

Tritanopia

7A8C8C
98A9A9
AEBEBE
D9E6E6
F0F4F4

Achromatopsia

868686
A4A4A4
BABABA
E2E2E2
F3F3F3

Shades & Tints Shades & Tints

#798B8D

Dark
Light

#97A9A9

Dark
Light

#ADC0BC

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #798b8d;
  --color-2: #97a9a9;
  --color-3: #adc0bc;
  --color-4: #d8e6e6;
  --color-5: #f0f5f4;
}

SCSS

$color-1: #798b8d;
$color-2: #97a9a9;
$color-3: #adc0bc;
$color-4: #d8e6e6;
$color-5: #f0f5f4;

TAILWIND

colors: {
  'brand-1': '#798b8d',
  'brand-2': '#97a9a9',
  'brand-3': '#adc0bc',
  'brand-4': '#d8e6e6',
  'brand-5': '#f0f5f4',
}

RGB Array

[121, 139, 141], [151, 169, 169], [173, 192, 188], [216, 230, 230], [240, 245, 244]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #798B8D, #97A9A9, #ADC0BC, #D8E6E6, #F0F5F4 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: #798b8d; --color-2: #97a9a9; --color-3: #adc0bc; --color-4: #d8e6e6; --color-5: #f0f5f4. 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