← Back to Editor

#584737 · #8F8D74 · #EDE8E2 · #D6C8AD · #B3852F

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

#584737

Tangerine · DarkOliveGreen · Amber Brown

HEX
#584737
RGB
rgb(88, 71, 55)
HSL
hsl(29, 23%, 28%)
HSB
hsb(29, 37%, 35%)
CMYK
cmyk(0%, 19%, 37%, 65%)
Oklch
oklch(41.1% 0.034 64.9)

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

#8F8D74

Autumn Sage · Gray · Sunflower

HEX
#8F8D74
RGB
rgb(143, 141, 116)
HSL
hsl(56, 11%, 51%)
HSB
hsb(56, 19%, 56%)
CMYK
cmyk(0%, 1%, 19%, 44%)
Oklch
oklch(63.8% 0.036 103.6)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#EDE8E2

Goose Yellow · Linen · Peach Orange

HEX
#EDE8E2
RGB
rgb(237, 232, 226)
HSL
hsl(33, 23%, 91%)
HSB
hsb(33, 5%, 93%)
CMYK
cmyk(0%, 2%, 5%, 7%)
Oklch
oklch(93.3% 0.010 72.7)

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

#D6C8AD

Goose Yellow · Silver · Lemon Cream

HEX
#D6C8AD
RGB
rgb(214, 200, 173)
HSL
hsl(40, 33%, 76%)
HSB
hsb(40, 19%, 84%)
CMYK
cmyk(0%, 7%, 19%, 16%)
Oklch
oklch(83.7% 0.040 83.8)

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

#B3852F

Ochre · DarkGoldenRod · Amber Brown

HEX
#B3852F
RGB
rgb(179, 133, 47)
HSL
hsl(39, 58%, 44%)
HSB
hsb(39, 74%, 70%)
CMYK
cmyk(0%, 26%, 74%, 30%)
Oklch
oklch(64.6% 0.115 79.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

584737
374858

Analogous

583738
584737
585737

Triadic

584737
375847
473758

Split-Comp.

584737
375857
373858

Tetradic

584737
385837
374858
573758

Contrast Matrix WCAG 2.1 Contrast

584737
8F8D74
EDE8E2
D6C8AD
B3852F
—
2.6
Fail
7.3
AAA
5.4
AA
2.7
Fail
2.6
Fail
—
2.8
Fail
2.0
Fail
1.0
Fail
7.3
AAA
2.8
Fail
—
1.4
Fail
2.7
Fail
5.4
AA
2.0
Fail
1.4
Fail
—
2.0
Fail
2.7
Fail
1.0
Fail
2.7
Fail
2.0
Fail
—
White BG
8.9AAA
3.4AA Large
1.2Fail
1.7Fail
3.3AA Large
Black BG
2.4Fail
6.2AA
17.2AAA
12.7AAA
6.3AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

51503B
8E8E7A
EBEBE3
D0D0B4
9F9F44

Deuteranopia

52533C
8E8E7B
EBEBE4
D1D2B5
A2A549

Tritanopia

573E3F
8F7F80
EDE5E5
D5B9BA
B15458

Achromatopsia

4A4A4A
8B8B8B
E9E9E9
C9C9C9
898989

Shades & Tints Shades & Tints

#584737

Dark
Light

#8F8D74

Dark
Light

#EDE8E2

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #584737;
  --color-2: #8f8d74;
  --color-3: #ede8e2;
  --color-4: #d6c8ad;
  --color-5: #b3852f;
}

SCSS

$color-1: #584737;
$color-2: #8f8d74;
$color-3: #ede8e2;
$color-4: #d6c8ad;
$color-5: #b3852f;

TAILWIND

colors: {
  'brand-1': '#584737',
  'brand-2': '#8f8d74',
  'brand-3': '#ede8e2',
  'brand-4': '#d6c8ad',
  'brand-5': '#b3852f',
}

RGB Array

[88, 71, 55], [143, 141, 116], [237, 232, 226], [214, 200, 173], [179, 133, 47]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #584737, #8F8D74, #EDE8E2, #D6C8AD, #B3852F is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #584737; --color-2: #8f8d74; --color-3: #ede8e2; --color-4: #d6c8ad; --color-5: #b3852f. 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. Restrained colors convey professionalism and trust. 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