← Back to Editor

#5F5647 · #9E9DA3 · #C1B7AD · #D5C39F · #9A9D82

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 Library

Color Details Color Details

#5F5647

Ochre · DarkOliveGreen · Amber Brown

HEX
#5F5647
RGB
rgb(95, 86, 71)
HSL
hsl(38, 14%, 33%)
HSB
hsb(38, 25%, 37%)
CMYK
cmyk(0%, 9%, 25%, 63%)
Oklch
oklch(45.7% 0.026 80.5)

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

#9E9DA3

Ash · DarkGray · Silver Sand

HEX
#9E9DA3
RGB
rgb(158, 157, 163)
HSL
hsl(250, 3%, 63%)
HSB
hsb(250, 4%, 64%)
CMYK
cmyk(3%, 4%, 0%, 36%)
Oklch
oklch(69.9% 0.009 293.8)

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

#C1B7AD

Goose Yellow · Silver · Warm Sun

HEX
#C1B7AD
RGB
rgb(193, 183, 173)
HSL
hsl(30, 14%, 72%)
HSB
hsb(30, 10%, 76%)
CMYK
cmyk(0%, 5%, 10%, 24%)
Oklch
oklch(78.5% 0.018 67.6)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#D5C39F

Goose Yellow · Tan · Sunflower

HEX
#D5C39F
RGB
rgb(213, 195, 159)
HSL
hsl(40, 39%, 73%)
HSB
hsb(40, 25%, 84%)
CMYK
cmyk(0%, 8%, 25%, 16%)
Oklch
oklch(82.3% 0.052 84.5)

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

#9A9D82

Autumn Sage · DarkSeaGreen · Sunflower

HEX
#9A9D82
RGB
rgb(154, 157, 130)
HSL
hsl(67, 12%, 56%)
HSB
hsb(67, 17%, 62%)
CMYK
cmyk(2%, 0%, 17%, 38%)
Oklch
oklch(68.6% 0.038 112.6)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5F5647
485160

Analogous

604C48
5F5647
5D6048

Triadic

5F5647
486057
574860

Split-Comp.

5F5647
485D60
4C4860

Tetradic

5F5647
48604C
485160
60485D

Contrast Matrix WCAG 2.1 Contrast

5F5647
9E9DA3
C1B7AD
D5C39F
9A9D82
—
2.7
Fail
3.7
AA Large
4.2
AA Large
2.6
Fail
2.7
Fail
—
1.4
Fail
1.6
Fail
1.0
Fail
3.7
AA Large
1.4
Fail
—
1.1
Fail
1.4
Fail
4.2
AA Large
1.6
Fail
1.1
Fail
—
1.6
Fail
2.6
Fail
1.0
Fail
1.4
Fail
1.6
Fail
—
White BG
7.2AAA
2.7Fail
2.0Fail
1.7Fail
2.8Fail
Black BG
2.9Fail
7.8AAA
10.6AAA
12.1AAA
7.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5B5B4B
9E9EA2
BDBDAF
CDCDA8
9B9B89

Deuteranopia

5C5C4C
9E9EA1
BDBEB0
CED0AA
9B9B8A

Tritanopia

5F4D4E
9EA0A0
C1B1B2
D4AFB0
9A8E8F

Achromatopsia

575757
9E9E9E
B9B9B9
C4C4C4
999999

Shades & Tints Shades & Tints

#5F5647

Dark
Light

#9E9DA3

Dark
Light

#C1B7AD

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5f5647;
  --color-2: #9e9da3;
  --color-3: #c1b7ad;
  --color-4: #d5c39f;
  --color-5: #9a9d82;
}

SCSS

$color-1: #5f5647;
$color-2: #9e9da3;
$color-3: #c1b7ad;
$color-4: #d5c39f;
$color-5: #9a9d82;

TAILWIND

colors: {
  'brand-1': '#5f5647',
  'brand-2': '#9e9da3',
  'brand-3': '#c1b7ad',
  'brand-4': '#d5c39f',
  'brand-5': '#9a9d82',
}

RGB Array

[95, 86, 71], [158, 157, 163], [193, 183, 173], [213, 195, 159], [154, 157, 130]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #5F5647, #9E9DA3, #C1B7AD, #D5C39F, #9A9D82 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: #5f5647; --color-2: #9e9da3; --color-3: #c1b7ad; --color-4: #d5c39f; --color-5: #9a9d82. 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