← Back to Editor

#5B6051 · #8C5937 · #958D73 · #9E9E96 · #C5AC7C

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 Library

Color Details Color Details

#5B6051

Grass Green · DimGray · Charcoal

HEX
#5B6051
RGB
rgb(91, 96, 81)
HSL
hsl(80, 8%, 35%)
HSB
hsb(80, 16%, 38%)
CMYK
cmyk(5%, 0%, 16%, 62%)
Oklch
oklch(48.0% 0.024 122.3)

Traditional「Grass Green」· Paint「Charcoal」· Creative Midnight Shadow

#8C5937

Tangerine · Sienna · Amber Brown

HEX
#8C5937
RGB
rgb(140, 89, 55)
HSL
hsl(24, 44%, 38%)
HSB
hsb(24, 61%, 55%)
CMYK
cmyk(0%, 36%, 61%, 45%)
Oklch
oklch(51.3% 0.083 53.5)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#958D73

Ginger · Gray · Sunflower

HEX
#958D73
RGB
rgb(149, 141, 115)
HSL
hsl(46, 14%, 52%)
HSB
hsb(46, 23%, 58%)
CMYK
cmyk(0%, 5%, 23%, 42%)
Oklch
oklch(64.3% 0.038 93.0)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#9E9E96

Ash · DarkGray · Silver Sand

HEX
#9E9E96
RGB
rgb(158, 158, 150)
HSL
hsl(60, 4%, 60%)
HSB
hsb(60, 5%, 62%)
CMYK
cmyk(0%, 0%, 5%, 38%)
Oklch
oklch(69.7% 0.011 106.7)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#C5AC7C

Ginger · Tan · Warm Sun

HEX
#C5AC7C
RGB
rgb(197, 172, 124)
HSL
hsl(39, 39%, 63%)
HSB
hsb(39, 37%, 77%)
CMYK
cmyk(0%, 13%, 37%, 23%)
Oklch
oklch(75.5% 0.070 83.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5B6051
575260

Analogous

605E52
5B6051
546052

Triadic

5B6051
525C60
60525C

Split-Comp.

5B6051
525460
5E5260

Tetradic

5B6051
52605E
575260
605254

Contrast Matrix WCAG 2.1 Contrast

5B6051
8C5937
958D73
9E9E96
C5AC7C
—
1.1
Fail
2.0
Fail
2.4
Fail
3.0
Fail
1.1
Fail
—
1.8
Fail
2.2
Fail
2.7
Fail
2.0
Fail
1.8
Fail
—
1.2
Fail
1.5
Fail
2.4
Fail
2.2
Fail
1.2
Fail
—
1.2
Fail
3.0
Fail
2.7
Fail
1.5
Fail
1.2
Fail
—
White BG
6.5AA
5.8AA
3.3AA Large
2.7Fail
2.2Fail
Black BG
3.2AA Large
3.6AA Large
6.3AA
7.8AAA
9.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5D5D55
76753F
929179
9E9E98
BABA88

Deuteranopia

5D5D56
797D41
92937B
9E9E98
BCBD8A

Tritanopia

5B5758
894647
957E7F
9E999A
C49193

Achromatopsia

5D5D5D
646464
8C8C8C
9D9D9D
AEAEAE

Shades & Tints Shades & Tints

#5B6051

Dark
Light

#8C5937

Dark
Light

#958D73

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5b6051;
  --color-2: #8c5937;
  --color-3: #958d73;
  --color-4: #9e9e96;
  --color-5: #c5ac7c;
}

SCSS

$color-1: #5b6051;
$color-2: #8c5937;
$color-3: #958d73;
$color-4: #9e9e96;
$color-5: #c5ac7c;

TAILWIND

colors: {
  'brand-1': '#5b6051',
  'brand-2': '#8c5937',
  'brand-3': '#958d73',
  'brand-4': '#9e9e96',
  'brand-5': '#c5ac7c',
}

RGB Array

[91, 96, 81], [140, 89, 55], [149, 141, 115], [158, 158, 150], [197, 172, 124]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #5B6051, #8C5937, #958D73, #9E9E96, #C5AC7C is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. 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: #5b6051; --color-2: #8c5937; --color-3: #958d73; --color-4: #9e9e96; --color-5: #c5ac7c. 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. 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. 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