← Back to Editor

#5F6A61 · #848D87 · #C3BEA4 · #ECE6AB · #DCA032

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#5F6A61

Ink Gray · DimGray · Charcoal

HEX
#5F6A61
RGB
rgb(95, 106, 97)
HSL
hsl(131, 5%, 39%)
HSB
hsb(131, 10%, 42%)
CMYK
cmyk(10%, 0%, 8%, 58%)
Oklch
oklch(51.2% 0.019 150.8)

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

#848D87

Ash · Gray · Warm Gray

HEX
#848D87
RGB
rgb(132, 141, 135)
HSL
hsl(140, 4%, 54%)
HSB
hsb(140, 6%, 55%)
CMYK
cmyk(6%, 0%, 4%, 45%)
Oklch
oklch(63.4% 0.014 156.8)

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

#C3BEA4

Fresh Green · Silver · Sunflower

HEX
#C3BEA4
RGB
rgb(195, 190, 164)
HSL
hsl(50, 21%, 70%)
HSB
hsb(50, 16%, 76%)
CMYK
cmyk(0%, 3%, 16%, 24%)
Oklch
oklch(79.9% 0.036 98.2)

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

#ECE6AB

Fresh Green · Wheat · Lemon Cream

HEX
#ECE6AB
RGB
rgb(236, 230, 171)
HSL
hsl(54, 63%, 80%)
HSB
hsb(54, 28%, 93%)
CMYK
cmyk(0%, 3%, 28%, 7%)
Oklch
oklch(91.6% 0.076 102.9)

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

#DCA032

Ginger · GoldenRod · Warm Sun

HEX
#DCA032
RGB
rgb(220, 160, 50)
HSL
hsl(39, 71%, 53%)
HSB
hsb(39, 77%, 86%)
CMYK
cmyk(0%, 27%, 77%, 14%)
Oklch
oklch(74.5% 0.139 78.0)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5F6A61
685E67

Analogous

62685E
5F6A61
5E6865

Triadic

5F6A61
605E68
68605E

Split-Comp.

5F6A61
655E68
685E62

Tetradic

5F6A61
5E6268
685E67
68655E

Contrast Matrix WCAG 2.1 Contrast

5F6A61
848D87
C3BEA4
ECE6AB
DCA032
—
1.7
Fail
3.0
AA Large
4.4
AA Large
2.5
Fail
1.7
Fail
—
1.8
Fail
2.7
Fail
1.5
Fail
3.0
AA Large
1.8
Fail
—
1.5
Fail
1.2
Fail
4.4
AA Large
2.7
Fail
1.5
Fail
—
1.8
Fail
2.5
Fail
1.5
Fail
1.2
Fail
1.8
Fail
—
White BG
5.6AA
3.4AA Large
1.9Fail
1.3Fail
2.3Fail
Black BG
3.7AA Large
6.1AA
11.2AAA
16.5AAA
9.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

646463
888888
C1C1AA
E9E9B9
C2C14D

Deuteranopia

636264
878789
C1C2AC
EAEABD
C6CA53

Tritanopia

606565
848A8A
C3AFB0
ECC5C7
D96266

Achromatopsia

666666
8A8A8A
BDBDBD
E1E1E1
A5A5A5

Shades & Tints Shades & Tints

#5F6A61

Dark
Light

#848D87

Dark
Light

#C3BEA4

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5f6a61;
  --color-2: #848d87;
  --color-3: #c3bea4;
  --color-4: #ece6ab;
  --color-5: #dca032;
}

SCSS

$color-1: #5f6a61;
$color-2: #848d87;
$color-3: #c3bea4;
$color-4: #ece6ab;
$color-5: #dca032;

TAILWIND

colors: {
  'brand-1': '#5f6a61',
  'brand-2': '#848d87',
  'brand-3': '#c3bea4',
  'brand-4': '#ece6ab',
  'brand-5': '#dca032',
}

RGB Array

[95, 106, 97], [132, 141, 135], [195, 190, 164], [236, 230, 171], [220, 160, 50]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #5F6A61, #848D87, #C3BEA4, #ECE6AB, #DCA032 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: #5f6a61; --color-2: #848d87; --color-3: #c3bea4; --color-4: #ece6ab; --color-5: #dca032. 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