← Back to Editor

#5B6A6C · #81A7AC · #99AA9E · #B6AE8D · #7C8378

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 Library

Color Details Color Details

#5B6A6C

Slate Blue · DimGray · Charcoal

HEX
#5B6A6C
RGB
rgb(91, 106, 108)
HSL
hsl(187, 9%, 39%)
HSB
hsb(187, 16%, 42%)
CMYK
cmyk(16%, 2%, 0%, 58%)
Oklch
oklch(51.2% 0.018 206.4)

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

#81A7AC

Slate Blue · CadetBlue · Lake Green

HEX
#81A7AC
RGB
rgb(129, 167, 172)
HSL
hsl(187, 21%, 59%)
HSB
hsb(187, 25%, 67%)
CMYK
cmyk(25%, 3%, 0%, 33%)
Oklch
oklch(70.2% 0.042 206.2)

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

#99AA9E

Celadon · DarkGray · Silver Sand

HEX
#99AA9E
RGB
rgb(153, 170, 158)
HSL
hsl(138, 9%, 63%)
HSB
hsb(138, 10%, 67%)
CMYK
cmyk(10%, 0%, 7%, 33%)
Oklch
oklch(72.1% 0.026 154.9)

Traditional「Celadon」· Paint「Silver Sand」· Creative Urban Concrete

#B6AE8D

Ginger · Tan · Sunflower

HEX
#B6AE8D
RGB
rgb(182, 174, 141)
HSL
hsl(48, 22%, 63%)
HSB
hsb(48, 23%, 71%)
CMYK
cmyk(0%, 4%, 23%, 29%)
Oklch
oklch(74.9% 0.046 96.0)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#7C8378

Ink Gray · Gray · Warm Gray

HEX
#7C8378
RGB
rgb(124, 131, 120)
HSL
hsl(98, 4%, 49%)
HSB
hsb(98, 8%, 51%)
CMYK
cmyk(5%, 0%, 8%, 49%)
Oklch
oklch(60.1% 0.018 133.9)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5B6A6C
6C5D5A

Analogous

5A6C66
5B6A6C
5A616C

Triadic

5B6A6C
6C5A6A
6A6C5A

Split-Comp.

5B6A6C
6C5A61
6C665A

Tetradic

5B6A6C
665A6C
6C5D5A
616C5A

Contrast Matrix WCAG 2.1 Contrast

5B6A6C
81A7AC
99AA9E
B6AE8D
7C8378
—
2.2
Fail
2.3
Fail
2.5
Fail
1.4
Fail
2.2
Fail
—
1.1
Fail
1.2
Fail
1.5
Fail
2.3
Fail
1.1
Fail
—
1.1
Fail
1.6
Fail
2.5
Fail
1.2
Fail
1.1
Fail
—
1.8
Fail
1.4
Fail
1.5
Fail
1.6
Fail
1.8
Fail
—
White BG
5.6AA
2.6Fail
2.4Fail
2.2Fail
3.9AA Large
Black BG
3.7AA Large
8.1AAA
8.6AAA
9.4AAA
5.4AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

61626C
9192AB
A0A1A1
B3B295
7F7F7B

Deuteranopia

61606B
8F8CAB
9F9EA2
B3B497
7F7E7B

Tritanopia

5C6B6B
83AAAA
9AA3A4
B69B9D
7C7D7D

Achromatopsia

666666
9C9C9C
A4A4A4
ADADAD
808080

Shades & Tints Shades & Tints

#5B6A6C

Dark
Light

#81A7AC

Dark
Light

#99AA9E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5b6a6c;
  --color-2: #81a7ac;
  --color-3: #99aa9e;
  --color-4: #b6ae8d;
  --color-5: #7c8378;
}

SCSS

$color-1: #5b6a6c;
$color-2: #81a7ac;
$color-3: #99aa9e;
$color-4: #b6ae8d;
$color-5: #7c8378;

TAILWIND

colors: {
  'brand-1': '#5b6a6c',
  'brand-2': '#81a7ac',
  'brand-3': '#99aa9e',
  'brand-4': '#b6ae8d',
  'brand-5': '#7c8378',
}

RGB Array

[91, 106, 108], [129, 167, 172], [153, 170, 158], [182, 174, 141], [124, 131, 120]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #5B6A6C, #81A7AC, #99AA9E, #B6AE8D, #7C8378 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: #5b6a6c; --color-2: #81a7ac; --color-3: #99aa9e; --color-4: #b6ae8d; --color-5: #7c8378. 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