← Back to Editor

#62666A · #687287 · #769499 · #80B09A · #C4C4BC

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 Library

Color Details Color Details

#62666A

Ink Gray · DimGray · Charcoal

HEX
#62666A
RGB
rgb(98, 102, 106)
HSL
hsl(210, 4%, 40%)
HSB
hsb(210, 8%, 42%)
CMYK
cmyk(8%, 4%, 0%, 58%)
Oklch
oklch(50.8% 0.008 248.0)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#687287

Indigo · SlateGray · Navy Blue

HEX
#687287
RGB
rgb(104, 114, 135)
HSL
hsl(221, 13%, 47%)
HSB
hsb(221, 23%, 53%)
CMYK
cmyk(23%, 16%, 0%, 47%)
Oklch
oklch(55.1% 0.035 265.1)

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

#769499

Slate Blue · LightSlateGray · Lake Green

HEX
#769499
RGB
rgb(118, 148, 153)
HSL
hsl(189, 15%, 53%)
HSB
hsb(189, 23%, 60%)
CMYK
cmyk(23%, 3%, 0%, 40%)
Oklch
oklch(64.5% 0.034 208.8)

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

#80B09A

Mineral Blue · DarkSeaGreen · Olive Green

HEX
#80B09A
RGB
rgb(128, 176, 154)
HSL
hsl(153, 23%, 60%)
HSB
hsb(153, 27%, 69%)
CMYK
cmyk(27%, 0%, 13%, 31%)
Oklch
oklch(71.7% 0.060 164.8)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

#C4C4BC

Silver Gray · Silver · Pearl Gray

HEX
#C4C4BC
RGB
rgb(196, 196, 188)
HSL
hsl(60, 6%, 75%)
HSB
hsb(60, 4%, 77%)
CMYK
cmyk(0%, 0%, 4%, 23%)
Oklch
oklch(81.8% 0.011 106.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

62666A
6A6662

Analogous

626A6A
62666A
62626A

Triadic

62666A
6A6266
666A62

Split-Comp.

62666A
6A6262
6A6A62

Tetradic

62666A
6A626A
6A6662
626A62

Contrast Matrix WCAG 2.1 Contrast

62666A
687287
769499
80B09A
C4C4BC
—
1.2
Fail
1.8
Fail
2.4
Fail
3.3
AA Large
1.2
Fail
—
1.5
Fail
2.0
Fail
2.8
Fail
1.8
Fail
1.5
Fail
—
1.3
Fail
1.9
Fail
2.4
Fail
2.0
Fail
1.3
Fail
—
1.4
Fail
3.3
AA Large
2.8
Fail
1.9
Fail
1.4
Fail
—
White BG
5.8AA
4.8AA
3.2AA Large
2.4Fail
1.8Fail
Black BG
3.6AA Large
4.3AA Large
6.5AA
8.6AAA
12.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

646469
6C6C82
838398
95959F
C4C4BE

Deuteranopia

646369
6C6B81
817F98
928EA1
C4C4BE

Tritanopia

626868
697E7D
789797
82A4A4
C4BFC0

Achromatopsia

656565
717171
8C8C8C
9F9F9F
C3C3C3

Shades & Tints Shades & Tints

#62666A

Dark
Light

#687287

Dark
Light

#769499

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #62666a;
  --color-2: #687287;
  --color-3: #769499;
  --color-4: #80b09a;
  --color-5: #c4c4bc;
}

SCSS

$color-1: #62666a;
$color-2: #687287;
$color-3: #769499;
$color-4: #80b09a;
$color-5: #c4c4bc;

TAILWIND

colors: {
  'brand-1': '#62666a',
  'brand-2': '#687287',
  'brand-3': '#769499',
  'brand-4': '#80b09a',
  'brand-5': '#c4c4bc',
}

RGB Array

[98, 102, 106], [104, 114, 135], [118, 148, 153], [128, 176, 154], [196, 196, 188]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #62666A, #687287, #769499, #80B09A, #C4C4BC is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. 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: #62666a; --color-2: #687287; --color-3: #769499; --color-4: #80b09a; --color-5: #c4c4bc. 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. 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