← Back to Editor

#5F6C70 · #48B0A6 · #5ECB92 · #A7DB97 · #D8E2E6

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#5F6C70

Slate Blue · DimGray · Warm Gray

HEX
#5F6C70
RGB
rgb(95, 108, 112)
HSL
hsl(194, 8%, 41%)
HSB
hsb(194, 15%, 44%)
CMYK
cmyk(15%, 4%, 0%, 56%)
Oklch
oklch(52.2% 0.017 218.2)

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

#48B0A6

Mineral Blue · CadetBlue · Mint Ice

HEX
#48B0A6
RGB
rgb(72, 176, 166)
HSL
hsl(174, 42%, 49%)
HSB
hsb(174, 59%, 69%)
CMYK
cmyk(59%, 0%, 6%, 31%)
Oklch
oklch(69.4% 0.097 186.5)

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

#5ECB92

Emerald · MediumAquaMarine · Olive Green

HEX
#5ECB92
RGB
rgb(94, 203, 146)
HSL
hsl(149, 51%, 58%)
HSB
hsb(149, 54%, 80%)
CMYK
cmyk(54%, 0%, 28%, 20%)
Oklch
oklch(76.3% 0.131 158.2)

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

#A7DB97

Celadon · LightGreen · Apple Green

HEX
#A7DB97
RGB
rgb(167, 219, 151)
HSL
hsl(106, 49%, 73%)
HSB
hsb(106, 31%, 86%)
CMYK
cmyk(24%, 0%, 31%, 14%)
Oklch
oklch(83.8% 0.107 138.5)

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

#D8E2E6

Sky Blue · LightGray · Glacier Blue

HEX
#D8E2E6
RGB
rgb(216, 226, 230)
HSL
hsl(197, 22%, 87%)
HSB
hsb(197, 6%, 90%)
CMYK
cmyk(6%, 2%, 0%, 10%)
Oklch
oklch(90.6% 0.012 223.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5F6C70
716460

Analogous

60716C
5F6C70
606571

Triadic

5F6C70
71606D
6D7160

Split-Comp.

5F6C70
716065
716C60

Tetradic

5F6C70
6C6071
716460
657160

Contrast Matrix WCAG 2.1 Contrast

5F6C70
48B0A6
5ECB92
A7DB97
D8E2E6
—
2.1
Fail
2.7
Fail
3.4
AA Large
4.1
AA Large
2.1
Fail
—
1.3
Fail
1.6
Fail
2.0
Fail
2.7
Fail
1.3
Fail
—
1.3
Fail
1.5
Fail
3.4
AA Large
1.6
Fail
1.3
Fail
—
1.2
Fail
4.1
AA Large
2.0
Fail
1.5
Fail
1.2
Fail
—
White BG
5.4AA
2.6Fail
2.0Fail
1.6Fail
1.3Fail
Black BG
3.9AA Large
8.0AAA
10.4AAA
13.2AAA
15.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

65656F
7576A8
8D8EA0
BEBEA7
DCDCE5

Deuteranopia

64636F
6F67A9
877FA3
BBB7AB
DCDBE5

Tritanopia

606E6E
4DAAAB
63ABAD
AAB4B7
D9E4E4

Achromatopsia

696969
909090
A4A4A4
C4C4C4
DFDFDF

Shades & Tints Shades & Tints

#5F6C70

Dark
Light

#48B0A6

Dark
Light

#5ECB92

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5f6c70;
  --color-2: #48b0a6;
  --color-3: #5ecb92;
  --color-4: #a7db97;
  --color-5: #d8e2e6;
}

SCSS

$color-1: #5f6c70;
$color-2: #48b0a6;
$color-3: #5ecb92;
$color-4: #a7db97;
$color-5: #d8e2e6;

TAILWIND

colors: {
  'brand-1': '#5f6c70',
  'brand-2': '#48b0a6',
  'brand-3': '#5ecb92',
  'brand-4': '#a7db97',
  'brand-5': '#d8e2e6',
}

RGB Array

[95, 108, 112], [72, 176, 166], [94, 203, 146], [167, 219, 151], [216, 226, 230]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #5F6C70, #48B0A6, #5ECB92, #A7DB97, #D8E2E6 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #5f6c70; --color-2: #48b0a6; --color-3: #5ecb92; --color-4: #a7db97; --color-5: #d8e2e6. 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 general-style 5-color scheme is especially suited for tech, SaaS, healthcare, eco industries. 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