← Back to Editor

#584B40 · #E16B0C · #8E7857 · #CFC29E · #E4B900

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

#584B40

Tangerine · DarkOliveGreen · Amber Brown

HEX
#584B40
RGB
rgb(88, 75, 64)
HSL
hsl(28, 16%, 30%)
HSB
hsb(28, 27%, 35%)
CMYK
cmyk(0%, 15%, 27%, 65%)
Oklch
oklch(42.3% 0.025 62.3)

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

#E16B0C

Tangerine · Chocolate · Amber Brown

HEX
#E16B0C
RGB
rgb(225, 107, 12)
HSL
hsl(27, 90%, 46%)
HSB
hsb(27, 95%, 88%)
CMYK
cmyk(0%, 52%, 95%, 12%)
Oklch
oklch(65.8% 0.171 49.8)

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

#8E7857

Ochre · DimGray · Amber Brown

HEX
#8E7857
RGB
rgb(142, 120, 87)
HSL
hsl(36, 24%, 45%)
HSB
hsb(36, 39%, 56%)
CMYK
cmyk(0%, 15%, 39%, 44%)
Oklch
oklch(58.5% 0.054 77.5)

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

#CFC29E

Goose Yellow · Tan · Sunflower

HEX
#CFC29E
RGB
rgb(207, 194, 158)
HSL
hsl(44, 34%, 72%)
HSB
hsb(44, 24%, 81%)
CMYK
cmyk(0%, 6%, 24%, 19%)
Oklch
oklch(81.6% 0.051 90.5)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

#E4B900

Ochre · Orange · Honey Gold

HEX
#E4B900
RGB
rgb(228, 185, 0)
HSL
hsl(49, 100%, 45%)
HSB
hsb(49, 100%, 89%)
CMYK
cmyk(0%, 19%, 100%, 11%)
Oklch
oklch(80.1% 0.164 91.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

584B40
404D59

Analogous

594041
584B40
595840

Triadic

584B40
40594C
4C4059

Split-Comp.

584B40
405958
404159

Tetradic

584B40
415940
404D59
584059

Contrast Matrix WCAG 2.1 Contrast

584B40
E16B0C
8E7857
CFC29E
E4B900
—
2.5
Fail
2.0
Fail
4.8
AA
4.5
AA
2.5
Fail
—
1.3
Fail
1.9
Fail
1.8
Fail
2.0
Fail
1.3
Fail
—
2.4
Fail
2.3
Fail
4.8
AA
1.9
Fail
2.4
Fail
—
1.1
Fail
4.5
AA
1.8
Fail
2.3
Fail
1.1
Fail
—
White BG
8.4AAA
3.3AA Large
4.2AA Large
1.8Fail
1.9Fail
Black BG
2.5Fail
6.3AA
5.0AA
11.9AAA
11.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

525243
AEAD23
84845F
C9C9A7
D1D12D

Deuteranopia

535443
B5BE29
868761
CACBA9
D4D738

Tritanopia

574545
DB3539
8D6567
CEAEAF
E25058

Achromatopsia

4E4E4E
838383
7B7B7B
C2C2C2
B1B1B1

Shades & Tints Shades & Tints

#584B40

Dark
Light

#E16B0C

Dark
Light

#8E7857

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #584b40;
  --color-2: #e16b0c;
  --color-3: #8e7857;
  --color-4: #cfc29e;
  --color-5: #e4b900;
}

SCSS

$color-1: #584b40;
$color-2: #e16b0c;
$color-3: #8e7857;
$color-4: #cfc29e;
$color-5: #e4b900;

TAILWIND

colors: {
  'brand-1': '#584b40',
  'brand-2': '#e16b0c',
  'brand-3': '#8e7857',
  'brand-4': '#cfc29e',
  'brand-5': '#e4b900',
}

RGB Array

[88, 75, 64], [225, 107, 12], [142, 120, 87], [207, 194, 158], [228, 185, 0]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #584B40, #E16B0C, #8E7857, #CFC29E, #E4B900 is ideal for: 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: #584b40; --color-2: #e16b0c; --color-3: #8e7857; --color-4: #cfc29e; --color-5: #e4b900. 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 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