← Back to Editor

#574B23 · #8A541E · #211612 · #E9E4AA · #B31B1B

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

Color Details Color Details

#574B23

Ochre · DarkOliveGreen · Amber Gold

HEX
#574B23
RGB
rgb(87, 75, 35)
HSL
hsl(46, 43%, 24%)
HSB
hsb(46, 60%, 34%)
CMYK
cmyk(0%, 14%, 60%, 66%)
Oklch
oklch(41.5% 0.060 93.0)

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

#8A541E

Ochre · Sienna · Amber Brown

HEX
#8A541E
RGB
rgb(138, 84, 30)
HSL
hsl(30, 64%, 33%)
HSB
hsb(30, 78%, 54%)
CMYK
cmyk(0%, 39%, 78%, 46%)
Oklch
oklch(49.8% 0.098 61.6)

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

#211612

Tangerine · Black · Cinnamon

HEX
#211612
RGB
rgb(33, 22, 18)
HSL
hsl(16, 29%, 10%)
HSB
hsb(16, 45%, 13%)
CMYK
cmyk(0%, 33%, 45%, 87%)
Oklch
oklch(21.3% 0.020 40.9)

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

#E9E4AA

Fresh Green · Wheat · Lemon Cream

HEX
#E9E4AA
RGB
rgb(233, 228, 170)
HSL
hsl(55, 59%, 79%)
HSB
hsb(55, 27%, 91%)
CMYK
cmyk(0%, 2%, 27%, 9%)
Oklch
oklch(90.9% 0.075 103.6)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#B31B1B

Vermilion · FireBrick · Wine Red

HEX
#B31B1B
RGB
rgb(179, 27, 27)
HSL
hsl(0, 74%, 40%)
HSB
hsb(0, 85%, 70%)
CMYK
cmyk(0%, 85%, 85%, 30%)
Oklch
oklch(49.3% 0.186 27.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

574B23
232F58

Analogous

583123
574B23
495823

Triadic

574B23
23584B
4B2358

Split-Comp.

574B23
234958
312358

Tetradic

574B23
235831
232F58
582349

Contrast Matrix WCAG 2.1 Contrast

574B23
8A541E
211612
E9E4AA
B31B1B
—
1.4
Fail
2.1
Fail
6.6
AA
1.3
Fail
1.4
Fail
—
2.8
Fail
4.8
AA
1.1
Fail
2.1
Fail
2.8
Fail
—
13.6
AAA
2.6
Fail
6.6
AA
4.8
AA
13.6
AAA
—
5.2
AA
1.3
Fail
1.1
Fail
2.6
Fail
5.2
AA
—
White BG
8.6AAA
6.2AA
17.7AAA
1.3Fail
6.8AA
Black BG
2.4Fail
3.4AA Large
1.2Fail
16.1AAA
3.1AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

52522D
73722B
1C1C13
E7E7B8
71701B

Deuteranopia

53532F
767A2E
1D1E13
E7E8BB
7A851B

Tritanopia

563436
873538
201414
E9C3C6
AB1B1B

Achromatopsia

4A4A4A
5E5E5E
191919
DFDFDF
484848

Shades & Tints Shades & Tints

#574B23

Dark
Light

#8A541E

Dark
Light

#211612

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #574b23;
  --color-2: #8a541e;
  --color-3: #211612;
  --color-4: #e9e4aa;
  --color-5: #b31b1b;
}

SCSS

$color-1: #574b23;
$color-2: #8a541e;
$color-3: #211612;
$color-4: #e9e4aa;
$color-5: #b31b1b;

TAILWIND

colors: {
  'brand-1': '#574b23',
  'brand-2': '#8a541e',
  'brand-3': '#211612',
  'brand-4': '#e9e4aa',
  'brand-5': '#b31b1b',
}

RGB Array

[87, 75, 35], [138, 84, 30], [33, 22, 18], [233, 228, 170], [179, 27, 27]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #574B23, #8A541E, #211612, #E9E4AA, #B31B1B 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: #574b23; --color-2: #8a541e; --color-3: #211612; --color-4: #e9e4aa; --color-5: #b31b1b. 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