← Back to Editor

#5B5E61 · #57AB98 · #ABE9DC · #E89D5B · #E87B66

A 5-color palette 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

#5B5E61

Ink Gray · DimGray · Charcoal

HEX
#5B5E61
RGB
rgb(91, 94, 97)
HSL
hsl(210, 3%, 37%)
HSB
hsb(210, 6%, 38%)
CMYK
cmyk(6%, 3%, 0%, 62%)
Oklch
oklch(48.0% 0.006 248.0)

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

#57AB98

Mineral Blue · CadetBlue · Lake Green

HEX
#57AB98
RGB
rgb(87, 171, 152)
HSL
hsl(166, 33%, 51%)
HSB
hsb(166, 49%, 67%)
CMYK
cmyk(49%, 0%, 11%, 33%)
Oklch
oklch(68.3% 0.087 176.9)

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

#ABE9DC

Jade · LightBlue · Glacier Blue

HEX
#ABE9DC
RGB
rgb(171, 233, 220)
HSL
hsl(167, 58%, 79%)
HSB
hsb(167, 27%, 91%)
CMYK
cmyk(27%, 0%, 6%, 9%)
Oklch
oklch(88.8% 0.065 180.3)

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

#E89D5B

Apricot · SandyBrown · Warm Sun

HEX
#E89D5B
RGB
rgb(232, 157, 91)
HSL
hsl(28, 75%, 63%)
HSB
hsb(28, 61%, 91%)
CMYK
cmyk(0%, 32%, 61%, 9%)
Oklch
oklch(75.7% 0.122 60.7)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#E87B66

Peach Pink · Salmon · Coral Red

HEX
#E87B66
RGB
rgb(232, 123, 102)
HSL
hsl(10, 74%, 65%)
HSB
hsb(10, 56%, 91%)
CMYK
cmyk(0%, 47%, 56%, 9%)
Oklch
oklch(70.1% 0.139 32.1)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5B5E61
615E5C

Analogous

5C6161
5B5E61
5C5C61

Triadic

5B5E61
615C5E
5E615C

Split-Comp.

5B5E61
615C5C
61615C

Tetradic

5B5E61
615C61
615E5C
5C615C

Contrast Matrix WCAG 2.1 Contrast

5B5E61
57AB98
ABE9DC
E89D5B
E87B66
—
2.4
Fail
4.8
AA
2.9
Fail
2.3
Fail
2.4
Fail
—
2.0
Fail
1.2
Fail
1.0
Fail
4.8
AA
2.0
Fail
—
1.6
Fail
2.1
Fail
2.9
Fail
1.2
Fail
1.6
Fail
—
1.3
Fail
2.3
Fail
1.0
Fail
2.1
Fail
1.3
Fail
—
White BG
6.5AA
2.7Fail
1.4Fail
2.2Fail
2.8Fail
Black BG
3.2AA Large
7.7AAA
15.4AAA
9.4AAA
7.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5C5C60
7B7C9D
C6C6DF
C8C76B
B9B86B

Deuteranopia

5C5C60
77709E
C2BEE0
CCD16F
BFC76C

Tritanopia

5B6060
5BA0A1
AEE2E2
E4787A
E36F70

Achromatopsia

5D5D5D
909090
D5D5D5
ACACAC
999999

Shades & Tints Shades & Tints

#5B5E61

Dark
Light

#57AB98

Dark
Light

#ABE9DC

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5b5e61;
  --color-2: #57ab98;
  --color-3: #abe9dc;
  --color-4: #e89d5b;
  --color-5: #e87b66;
}

SCSS

$color-1: #5b5e61;
$color-2: #57ab98;
$color-3: #abe9dc;
$color-4: #e89d5b;
$color-5: #e87b66;

TAILWIND

colors: {
  'brand-1': '#5b5e61',
  'brand-2': '#57ab98',
  'brand-3': '#abe9dc',
  'brand-4': '#e89d5b',
  'brand-5': '#e87b66',
}

RGB Array

[91, 94, 97], [87, 171, 152], [171, 233, 220], [232, 157, 91], [232, 123, 102]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #5B5E61, #57AB98, #ABE9DC, #E89D5B, #E87B66 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: #5b5e61; --color-2: #57ab98; --color-3: #abe9dc; --color-4: #e89d5b; --color-5: #e87b66. 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