← Back to Editor

#5F7572 · #88AB95 · #B8CDA6 · #EBEFBD · #472F2F

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

#5F7572

Mineral Blue · DimGray · Mint Ice

HEX
#5F7572
RGB
rgb(95, 117, 114)
HSL
hsl(172, 10%, 42%)
HSB
hsb(172, 19%, 46%)
CMYK
cmyk(19%, 0%, 3%, 54%)
Oklch
oklch(54.4% 0.026 186.3)

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

#88AB95

Celadon · DarkSeaGreen · Olive Green

HEX
#88AB95
RGB
rgb(136, 171, 149)
HSL
hsl(142, 17%, 60%)
HSB
hsb(142, 20%, 67%)
CMYK
cmyk(20%, 0%, 13%, 33%)
Oklch
oklch(70.9% 0.050 157.3)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#B8CDA6

Celadon · Silver · Apple Green

HEX
#B8CDA6
RGB
rgb(184, 205, 166)
HSL
hsl(92, 28%, 73%)
HSB
hsb(92, 19%, 80%)
CMYK
cmyk(10%, 0%, 19%, 20%)
Oklch
oklch(82.2% 0.058 130.7)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#EBEFBD

Fresh Green · Wheat · Lemon Cream

HEX
#EBEFBD
RGB
rgb(235, 239, 189)
HSL
hsl(65, 61%, 84%)
HSB
hsb(65, 21%, 94%)
CMYK
cmyk(2%, 0%, 21%, 6%)
Oklch
oklch(93.7% 0.065 111.4)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#472F2F

Crimson · DarkSlateGray · Wine Red

HEX
#472F2F
RGB
rgb(71, 47, 47)
HSL
hsl(0, 20%, 23%)
HSB
hsb(0, 34%, 28%)
CMYK
cmyk(0%, 34%, 34%, 72%)
Oklch
oklch(33.4% 0.035 19.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5F7572
766063

Analogous

607668
5F7572
606E76

Triadic

5F7572
736076
767360

Split-Comp.

5F7572
76606E
766860

Tetradic

5F7572
686076
766063
6E7660

Contrast Matrix WCAG 2.1 Contrast

5F7572
88AB95
B8CDA6
EBEFBD
472F2F
—
1.9
Fail
2.9
Fail
4.1
AA Large
2.5
Fail
1.9
Fail
—
1.5
Fail
2.1
Fail
4.8
AA
2.9
Fail
1.5
Fail
—
1.4
Fail
7.2
AAA
4.1
AA Large
2.1
Fail
1.4
Fail
—
10.3
AAA
2.5
Fail
4.8
AA
7.2
AAA
10.3
AAA
—
White BG
4.9AA
2.5Fail
1.7Fail
1.2Fail
12.2AAA
Black BG
4.3AA Large
8.3AAA
12.3AAA
17.6AAA
1.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

696973
97979A
C1C1AF
EDEDC9
3D3C2F

Deuteranopia

676673
95939C
C0BEB2
EDECCC
3E402F

Tritanopia

607373
8A9F9F
B9B7B9
EBD3D5
462F2F

Achromatopsia

6E6E6E
9E9E9E
C2C2C2
E8E8E8
363636

Shades & Tints Shades & Tints

#5F7572

Dark
Light

#88AB95

Dark
Light

#B8CDA6

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5f7572;
  --color-2: #88ab95;
  --color-3: #b8cda6;
  --color-4: #ebefbd;
  --color-5: #472f2f;
}

SCSS

$color-1: #5f7572;
$color-2: #88ab95;
$color-3: #b8cda6;
$color-4: #ebefbd;
$color-5: #472f2f;

TAILWIND

colors: {
  'brand-1': '#5f7572',
  'brand-2': '#88ab95',
  'brand-3': '#b8cda6',
  'brand-4': '#ebefbd',
  'brand-5': '#472f2f',
}

RGB Array

[95, 117, 114], [136, 171, 149], [184, 205, 166], [235, 239, 189], [71, 47, 47]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #5F7572, #88AB95, #B8CDA6, #EBEFBD, #472F2F 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: #5f7572; --color-2: #88ab95; --color-3: #b8cda6; --color-4: #ebefbd; --color-5: #472f2f. 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