← Back to Editor

#5B6B6B · #ECC19E · #E8DAB7 · #B9A987 · #827354

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

#5B6B6B

Slate Blue · DimGray · Charcoal

HEX
#5B6B6B
RGB
rgb(91, 107, 107)
HSL
hsl(180, 8%, 39%)
HSB
hsb(180, 15%, 42%)
CMYK
cmyk(15%, 0%, 0%, 58%)
Oklch
oklch(51.5% 0.019 196.6)

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

#ECC19E

Apricot · BurlyWood · Peach Orange

HEX
#ECC19E
RGB
rgb(236, 193, 158)
HSL
hsl(27, 67%, 77%)
HSB
hsb(27, 33%, 93%)
CMYK
cmyk(0%, 18%, 33%, 7%)
Oklch
oklch(84.0% 0.068 60.8)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#E8DAB7

Goose Yellow · Wheat · Lemon Cream

HEX
#E8DAB7
RGB
rgb(232, 218, 183)
HSL
hsl(43, 52%, 81%)
HSB
hsb(43, 21%, 91%)
CMYK
cmyk(0%, 6%, 21%, 9%)
Oklch
oklch(89.1% 0.049 88.8)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#B9A987

Ginger · Tan · Sunflower

HEX
#B9A987
RGB
rgb(185, 169, 135)
HSL
hsl(41, 26%, 63%)
HSB
hsb(41, 27%, 73%)
CMYK
cmyk(0%, 9%, 27%, 27%)
Oklch
oklch(74.0% 0.050 85.7)

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

#827354

Ochre · DimGray · Honey Gold

HEX
#827354
RGB
rgb(130, 115, 84)
HSL
hsl(40, 21%, 42%)
HSB
hsb(40, 35%, 51%)
CMYK
cmyk(0%, 12%, 35%, 49%)
Oklch
oklch(56.1% 0.049 85.0)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5B6B6B
6B5B5B

Analogous

5B6B63
5B6B6B
5B636B

Triadic

5B6B6B
6B5B6B
6B6B5B

Split-Comp.

5B6B6B
6B5B63
6B635B

Tetradic

5B6B6B
635B6B
6B5B5B
636B5B

Contrast Matrix WCAG 2.1 Contrast

5B6B6B
ECC19E
E8DAB7
B9A987
827354
—
3.4
AA Large
4.0
AA Large
2.4
Fail
1.2
Fail
3.4
AA Large
—
1.2
Fail
1.4
Fail
2.8
Fail
4.0
AA Large
1.2
Fail
—
1.7
Fail
3.3
AA Large
2.4
Fail
1.4
Fail
1.7
Fail
—
2.0
Fail
1.2
Fail
2.8
Fail
3.3
AA Large
2.0
Fail
—
White BG
5.6AA
1.7Fail
1.4Fail
2.3Fail
4.6AA
Black BG
3.8AA Large
12.7AAA
15.1AAA
9.1AAA
4.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

62626B
D9D9A6
E2E2BF
B2B28F
7C7B5C

Deuteranopia

61606B
DCDFA9
E3E4C2
B3B491
7C7E5D

Tritanopia

5C6B6B
EAADAF
E7C6C8
B89697
816163

Achromatopsia

666666
CACACA
DADADA
AAAAAA
747474

Shades & Tints Shades & Tints

#5B6B6B

Dark
Light

#ECC19E

Dark
Light

#E8DAB7

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5b6b6b;
  --color-2: #ecc19e;
  --color-3: #e8dab7;
  --color-4: #b9a987;
  --color-5: #827354;
}

SCSS

$color-1: #5b6b6b;
$color-2: #ecc19e;
$color-3: #e8dab7;
$color-4: #b9a987;
$color-5: #827354;

TAILWIND

colors: {
  'brand-1': '#5b6b6b',
  'brand-2': '#ecc19e',
  'brand-3': '#e8dab7',
  'brand-4': '#b9a987',
  'brand-5': '#827354',
}

RGB Array

[91, 107, 107], [236, 193, 158], [232, 218, 183], [185, 169, 135], [130, 115, 84]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #5B6B6B, #ECC19E, #E8DAB7, #B9A987, #827354 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: #5b6b6b; --color-2: #ecc19e; --color-3: #e8dab7; --color-4: #b9a987; --color-5: #827354. 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