← Back to Editor

#B59771 · #C6AB44 · #87672A · #49282F · #372437

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

#B59771

Ginger · Tan · Warm Sun

HEX
#B59771
RGB
rgb(181, 151, 113)
HSL
hsl(34, 31%, 58%)
HSB
hsb(34, 38%, 71%)
CMYK
cmyk(0%, 17%, 38%, 29%)
Oklch
oklch(69.4% 0.063 73.1)

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

#C6AB44

Ginger · GoldenRod · Sunflower

HEX
#C6AB44
RGB
rgb(198, 171, 68)
HSL
hsl(48, 53%, 52%)
HSB
hsb(48, 66%, 78%)
CMYK
cmyk(0%, 14%, 66%, 22%)
Oklch
oklch(74.6% 0.125 94.4)

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

#87672A

Ochre · Sienna · Amber Brown

HEX
#87672A
RGB
rgb(135, 103, 42)
HSL
hsl(39, 53%, 35%)
HSB
hsb(39, 69%, 53%)
CMYK
cmyk(0%, 24%, 69%, 47%)
Oklch
oklch(53.4% 0.088 80.9)

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

#49282F

Crimson · DarkSlateGray · Wine Red

HEX
#49282F
RGB
rgb(73, 40, 47)
HSL
hsl(347, 29%, 22%)
HSB
hsb(347, 45%, 29%)
CMYK
cmyk(0%, 45%, 36%, 71%)
Oklch
oklch(32.2% 0.050 6.6)

Traditional「Crimson」· Paint「Wine Red」· Creative Blush Sunrise

#372437

Rose Purple · DarkSlateGray · Dark Purple

HEX
#372437
RGB
rgb(55, 36, 55)
HSL
hsl(300, 21%, 18%)
HSB
hsb(300, 35%, 22%)
CMYK
cmyk(0%, 35%, 0%, 78%)
Oklch
oklch(29.2% 0.043 326.6)

Traditional「Rose Purple」· Paint「Dark Purple」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B59771
738FB5

Analogous

B57773
B59771
B1B573

Triadic

B59771
73B598
9873B5

Split-Comp.

B59771
73B1B5
7773B5

Tetradic

B59771
73B577
738FB5
B573B1

Contrast Matrix WCAG 2.1 Contrast

B59771
C6AB44
87672A
49282F
372437
—
1.2
Fail
1.9
Fail
4.7
AA
5.2
AA
1.2
Fail
—
2.3
Fail
5.7
AA
6.3
AA
1.9
Fail
2.3
Fail
—
2.5
Fail
2.7
Fail
4.7
AA
5.7
AA
2.5
Fail
—
1.1
Fail
5.2
AA
6.3
AA
2.7
Fail
1.1
Fail
—
White BG
2.8Fail
2.3Fail
5.2AA
12.9AAA
14.3AAA
Black BG
7.6AAA
9.3AAA
4.0AA Large
1.6Fail
1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

A8A87A
BABA5D
797939
3B3A2D
2F2F32

Deuteranopia

AAAC7C
BCBE63
7B7D3C
3D3F2D
303131

Tritanopia

B48183
C57175
854447
472C2C
362F2E

Achromatopsia

9C9C9C
A7A7A7
6A6A6A
333333
2C2C2C

Shades & Tints Shades & Tints

#B59771

Dark
Light

#C6AB44

Dark
Light

#87672A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b59771;
  --color-2: #c6ab44;
  --color-3: #87672a;
  --color-4: #49282f;
  --color-5: #372437;
}

SCSS

$color-1: #b59771;
$color-2: #c6ab44;
$color-3: #87672a;
$color-4: #49282f;
$color-5: #372437;

TAILWIND

colors: {
  'brand-1': '#b59771',
  'brand-2': '#c6ab44',
  'brand-3': '#87672a',
  'brand-4': '#49282f',
  'brand-5': '#372437',
}

RGB Array

[181, 151, 113], [198, 171, 68], [135, 103, 42], [73, 40, 47], [55, 36, 55]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B59771, #C6AB44, #87672A, #49282F, #372437 is ideal for: tech websites, dark mode UIs, game UIs. 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: #b59771; --color-2: #c6ab44; --color-3: #87672a; --color-4: #49282f; --color-5: #372437. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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