← Back to Editor

#876B18 · #9C7C1C · #BF9822 · #FFE0BD · #562B3F

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#876B18

Ochre · Olive · Honey Gold

HEX
#876B18
RGB
rgb(135, 107, 24)
HSL
hsl(45, 70%, 31%)
HSB
hsb(45, 82%, 53%)
CMYK
cmyk(0%, 21%, 82%, 47%)
Oklch
oklch(54.1% 0.102 88.7)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#9C7C1C

Ochre · DarkGoldenRod · Honey Gold

HEX
#9C7C1C
RGB
rgb(156, 124, 28)
HSL
hsl(45, 70%, 36%)
HSB
hsb(45, 82%, 61%)
CMYK
cmyk(0%, 21%, 82%, 39%)
Oklch
oklch(60.1% 0.114 88.8)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#BF9822

Ochre · GoldenRod · Honey Gold

HEX
#BF9822
RGB
rgb(191, 152, 34)
HSL
hsl(45, 70%, 44%)
HSB
hsb(45, 82%, 75%)
CMYK
cmyk(0%, 20%, 82%, 25%)
Oklch
oklch(69.7% 0.133 88.7)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#FFE0BD

Goose Yellow · Bisque · Peach Orange

HEX
#FFE0BD
RGB
rgb(255, 224, 189)
HSL
hsl(32, 100%, 87%)
HSB
hsb(32, 26%, 100%)
CMYK
cmyk(0%, 12%, 26%, 0%)
Oklch
oklch(92.4% 0.057 70.4)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#562B3F

Dark Violet · DarkSlateGray · Raspberry

HEX
#562B3F
RGB
rgb(86, 43, 63)
HSL
hsl(332, 33%, 25%)
HSB
hsb(332, 50%, 34%)
CMYK
cmyk(0%, 50%, 27%, 66%)
Oklch
oklch(35.3% 0.069 351.9)

Traditional「Dark Violet」· Paint「Raspberry」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

876B18
183386

Analogous

863318
876B18
6B8618

Triadic

876B18
18866B
6B1886

Split-Comp.

876B18
186B86
331886

Tetradic

876B18
188633
183386
86186B

Contrast Matrix WCAG 2.1 Contrast

876B18
9C7C1C
BF9822
FFE0BD
562B3F
—
1.3
Fail
1.9
Fail
4.0
AA Large
2.3
Fail
1.3
Fail
—
1.5
Fail
3.1
AA Large
2.9
Fail
1.9
Fail
1.5
Fail
—
2.2
Fail
4.3
AA Large
4.0
AA Large
3.1
AA Large
2.2
Fail
—
9.2
AAA
2.3
Fail
2.9
Fail
4.3
AA Large
9.2
AAA
—
White BG
5.1AA
4.0AA Large
2.7Fail
1.3Fail
11.6AAA
Black BG
4.1AA Large
5.3AA
7.7AAA
16.6AAA
1.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

7B7B2C
8E8E33
AEAE3F
F2F1C5
43433A

Deuteranopia

7D7F31
909239
B0B345
F3F6C8
464939

Tritanopia

863C3F
9A464A
BD555A
FDCCCE
543636

Achromatopsia

6A6A6A
7B7B7B
969696
E5E5E5
3A3A3A

Shades & Tints Shades & Tints

#876B18

Dark
Light

#9C7C1C

Dark
Light

#BF9822

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #876b18;
  --color-2: #9c7c1c;
  --color-3: #bf9822;
  --color-4: #ffe0bd;
  --color-5: #562b3f;
}

SCSS

$color-1: #876b18;
$color-2: #9c7c1c;
$color-3: #bf9822;
$color-4: #ffe0bd;
$color-5: #562b3f;

TAILWIND

colors: {
  'brand-1': '#876b18',
  'brand-2': '#9c7c1c',
  'brand-3': '#bf9822',
  'brand-4': '#ffe0bd',
  'brand-5': '#562b3f',
}

RGB Array

[135, 107, 24], [156, 124, 28], [191, 152, 34], [255, 224, 189], [86, 43, 63]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #876B18, #9C7C1C, #BF9822, #FFE0BD, #562B3F is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #876b18; --color-2: #9c7c1c; --color-3: #bf9822; --color-4: #ffe0bd; --color-5: #562b3f. 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. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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