← Back to Editor

#B87C27 · #C4AC86 · #19524C · #332611 · #EB8A04

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 LibraryData Visualization

Color Details Color Details

#B87C27

Ochre · DarkGoldenRod · Amber Brown

HEX
#B87C27
RGB
rgb(184, 124, 39)
HSL
hsl(35, 65%, 44%)
HSB
hsb(35, 79%, 72%)
CMYK
cmyk(0%, 33%, 79%, 28%)
Oklch
oklch(63.4% 0.122 70.9)

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

#C4AC86

Ginger · Tan · Warm Sun

HEX
#C4AC86
RGB
rgb(196, 172, 134)
HSL
hsl(37, 34%, 65%)
HSB
hsb(37, 32%, 77%)
CMYK
cmyk(0%, 12%, 32%, 23%)
Oklch
oklch(75.6% 0.059 79.1)

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

#19524C

Mineral Blue · DarkSlateGray · Peacock Green

HEX
#19524C
RGB
rgb(25, 82, 76)
HSL
hsl(174, 53%, 21%)
HSB
hsb(174, 70%, 32%)
CMYK
cmyk(70%, 0%, 7%, 68%)
Oklch
oklch(40.0% 0.059 185.3)

Traditional「Mineral Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#332611

Ochre · Black · Cinnamon

HEX
#332611
RGB
rgb(51, 38, 17)
HSL
hsl(37, 50%, 13%)
HSB
hsb(37, 67%, 20%)
CMYK
cmyk(0%, 25%, 67%, 80%)
Oklch
oklch(27.8% 0.039 78.1)

Traditional「Ochre」· Paint「Cinnamon」· Creative Blush Sunrise

#EB8A04

Ochre · Orange · Amber Brown

HEX
#EB8A04
RGB
rgb(235, 138, 4)
HSL
hsl(35, 97%, 47%)
HSB
hsb(35, 98%, 92%)
CMYK
cmyk(0%, 41%, 98%, 8%)
Oklch
oklch(72.1% 0.164 63.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B87C27
2764B9

Analogous

B93327
B87C27
ADB927

Triadic

B87C27
27B97C
7C27B9

Split-Comp.

B87C27
27ADB9
3327B9

Tetradic

B87C27
27B933
2764B9
B927AD

Contrast Matrix WCAG 2.1 Contrast

B87C27
C4AC86
19524C
332611
EB8A04
—
1.6
Fail
2.5
Fail
4.2
AA Large
1.4
Fail
1.6
Fail
—
4.1
AA Large
6.7
AA
1.2
Fail
2.5
Fail
4.1
AA Large
—
1.6
Fail
3.5
AA Large
4.2
AA Large
6.7
AA
1.6
Fail
—
5.7
AA
1.4
Fail
1.2
Fail
3.5
AA Large
5.7
AA
—
White BG
3.5AA Large
2.2Fail
8.9AAA
14.7AAA
2.6Fail
Black BG
6.0AA
9.6AAA
2.4Fail
1.4Fail
8.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9E9D3C
BAB98F
32324D
2D2D16
C1C024

Deuteranopia

A2A641
BBBD91
2E2A4E
2E2F17
C7CE2C

Tritanopia

B54C4F
C39698
1C4F4F
321A1B
E63E44

Achromatopsia

848484
AFAFAF
404040
272727
989898

Shades & Tints Shades & Tints

#B87C27

Dark
Light

#C4AC86

Dark
Light

#19524C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b87c27;
  --color-2: #c4ac86;
  --color-3: #19524c;
  --color-4: #332611;
  --color-5: #eb8a04;
}

SCSS

$color-1: #b87c27;
$color-2: #c4ac86;
$color-3: #19524c;
$color-4: #332611;
$color-5: #eb8a04;

TAILWIND

colors: {
  'brand-1': '#b87c27',
  'brand-2': '#c4ac86',
  'brand-3': '#19524c',
  'brand-4': '#332611',
  'brand-5': '#eb8a04',
}

RGB Array

[184, 124, 39], [196, 172, 134], [25, 82, 76], [51, 38, 17], [235, 138, 4]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B87C27, #C4AC86, #19524C, #332611, #EB8A04 is ideal for: tech websites, dark mode UIs, game UIs, 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: #b87c27; --color-2: #c4ac86; --color-3: #19524c; --color-4: #332611; --color-5: #eb8a04. 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. 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