← Back to Editor

#655A46 · #868B87 · #D8B57F · #BD8E64 · #C9AC6A

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

#655A46

Ochre · DarkOliveGreen · Amber Brown

HEX
#655A46
RGB
rgb(101, 90, 70)
HSL
hsl(39, 18%, 34%)
HSB
hsb(39, 31%, 40%)
CMYK
cmyk(0%, 11%, 31%, 60%)
Oklch
oklch(47.3% 0.034 82.4)

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

#868B87

Ash · Gray · Warm Gray

HEX
#868B87
RGB
rgb(134, 139, 135)
HSL
hsl(132, 2%, 54%)
HSB
hsb(132, 4%, 55%)
CMYK
cmyk(4%, 0%, 3%, 45%)
Oklch
oklch(63.1% 0.008 151.8)

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

#D8B57F

Ginger · BurlyWood · Warm Sun

HEX
#D8B57F
RGB
rgb(216, 181, 127)
HSL
hsl(36, 53%, 67%)
HSB
hsb(36, 41%, 85%)
CMYK
cmyk(0%, 16%, 41%, 15%)
Oklch
oklch(79.1% 0.081 78.0)

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

#BD8E64

Tangerine · DarkSalmon · Warm Sun

HEX
#BD8E64
RGB
rgb(189, 142, 100)
HSL
hsl(28, 40%, 57%)
HSB
hsb(28, 47%, 74%)
CMYK
cmyk(0%, 25%, 47%, 26%)
Oklch
oklch(68.2% 0.081 62.6)

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

#C9AC6A

Ginger · Tan · Sunflower

HEX
#C9AC6A
RGB
rgb(201, 172, 106)
HSL
hsl(42, 47%, 60%)
HSB
hsb(42, 47%, 79%)
CMYK
cmyk(0%, 14%, 47%, 21%)
Oklch
oklch(75.5% 0.091 86.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

655A46
475266

Analogous

664C47
655A46
626647

Triadic

655A46
47665B
5B4766

Split-Comp.

655A46
476266
4C4766

Tetradic

655A46
47664C
475266
664762

Contrast Matrix WCAG 2.1 Contrast

655A46
868B87
D8B57F
BD8E64
C9AC6A
—
2.0
Fail
3.5
AA Large
2.3
Fail
3.1
AA Large
2.0
Fail
—
1.8
Fail
1.2
Fail
1.6
Fail
3.5
AA Large
1.8
Fail
—
1.5
Fail
1.1
Fail
2.3
Fail
1.2
Fail
1.5
Fail
—
1.3
Fail
3.1
AA Large
1.6
Fail
1.1
Fail
1.3
Fail
—
White BG
6.8AA
3.5AA Large
1.9Fail
2.9Fail
2.2Fail
Black BG
3.1AA Large
6.1AA
10.8AAA
7.2AAA
9.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

60604B
888888
C9C98C
A9A86E
BCBC7A

Deuteranopia

61624C
888888
CBCE8F
ABAF71
BEC07E

Tritanopia

644F50
868989
D69699
BB7678
C88789

Achromatopsia

5B5B5B
898989
B9B9B9
979797
ADADAD

Shades & Tints Shades & Tints

#655A46

Dark
Light

#868B87

Dark
Light

#D8B57F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #655a46;
  --color-2: #868b87;
  --color-3: #d8b57f;
  --color-4: #bd8e64;
  --color-5: #c9ac6a;
}

SCSS

$color-1: #655a46;
$color-2: #868b87;
$color-3: #d8b57f;
$color-4: #bd8e64;
$color-5: #c9ac6a;

TAILWIND

colors: {
  'brand-1': '#655a46',
  'brand-2': '#868b87',
  'brand-3': '#d8b57f',
  'brand-4': '#bd8e64',
  'brand-5': '#c9ac6a',
}

RGB Array

[101, 90, 70], [134, 139, 135], [216, 181, 127], [189, 142, 100], [201, 172, 106]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #655A46, #868B87, #D8B57F, #BD8E64, #C9AC6A is ideal for: corporate websites, product showcases, portfolios. 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: #655a46; --color-2: #868b87; --color-3: #d8b57f; --color-4: #bd8e64; --color-5: #c9ac6a. 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. 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