← Back to Editor

#87393F · #EAB448 · #E6DB4E · #B2B37A · #808260

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 Library

Color Details Color Details

#87393F

Crimson · Brown · Wine Red

HEX
#87393F
RGB
rgb(135, 57, 63)
HSL
hsl(355, 41%, 38%)
HSB
hsb(355, 58%, 53%)
CMYK
cmyk(0%, 58%, 53%, 47%)
Oklch
oklch(45.2% 0.107 17.7)

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

#EAB448

Ginger · SandyBrown · Sunflower

HEX
#EAB448
RGB
rgb(234, 180, 72)
HSL
hsl(40, 79%, 60%)
HSB
hsb(40, 69%, 92%)
CMYK
cmyk(0%, 23%, 69%, 8%)
Oklch
oklch(80.0% 0.137 81.6)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#E6DB4E

Autumn Sage · SandyBrown · Sunflower

HEX
#E6DB4E
RGB
rgb(230, 219, 78)
HSL
hsl(56, 75%, 60%)
HSB
hsb(56, 66%, 90%)
CMYK
cmyk(0%, 5%, 66%, 10%)
Oklch
oklch(87.5% 0.158 104.9)

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

#B2B37A

Autumn Sage · Tan · Sunflower

HEX
#B2B37A
RGB
rgb(178, 179, 122)
HSL
hsl(61, 27%, 59%)
HSB
hsb(61, 32%, 70%)
CMYK
cmyk(1%, 0%, 32%, 30%)
Oklch
oklch(75.2% 0.076 109.0)

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

#808260

Autumn Sage · Gray · Honey Gold

HEX
#808260
RGB
rgb(128, 130, 96)
HSL
hsl(64, 15%, 44%)
HSB
hsb(64, 26%, 51%)
CMYK
cmyk(2%, 0%, 26%, 49%)
Oklch
oklch(59.6% 0.049 110.6)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

87393F
398982

Analogous

893968
87393F
895A39

Triadic

87393F
408939
394089

Split-Comp.

87393F
39895A
396889

Tetradic

87393F
688939
398982
5A3989

Contrast Matrix WCAG 2.1 Contrast

87393F
EAB448
E6DB4E
B2B37A
808260
—
4.1
AA Large
5.4
AA
3.6
AA Large
2.0
Fail
4.1
AA Large
—
1.3
Fail
1.2
Fail
2.1
Fail
5.4
AA
1.3
Fail
—
1.5
Fail
2.8
Fail
3.6
AA Large
1.2
Fail
1.5
Fail
—
1.8
Fail
2.0
Fail
2.1
Fail
2.8
Fail
1.8
Fail
—
White BG
7.8AAA
1.9Fail
1.4Fail
2.2Fail
4.0AA Large
Black BG
2.7Fail
11.1AAA
14.6AAA
9.6AAA
5.3AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

65653E
D3D262
E1E170
B2B288
818168

Deuteranopia

6A703D
D6DA68
E2E378
B2B28B
81816A

Tritanopia

833C3C
E7777B
E58B91
B29395
806F70

Achromatopsia

515151
B8B8B8
CECECE
ACACAC
7E7E7E

Shades & Tints Shades & Tints

#87393F

Dark
Light

#EAB448

Dark
Light

#E6DB4E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #87393f;
  --color-2: #eab448;
  --color-3: #e6db4e;
  --color-4: #b2b37a;
  --color-5: #808260;
}

SCSS

$color-1: #87393f;
$color-2: #eab448;
$color-3: #e6db4e;
$color-4: #b2b37a;
$color-5: #808260;

TAILWIND

colors: {
  'brand-1': '#87393f',
  'brand-2': '#eab448',
  'brand-3': '#e6db4e',
  'brand-4': '#b2b37a',
  'brand-5': '#808260',
}

RGB Array

[135, 57, 63], [234, 180, 72], [230, 219, 78], [178, 179, 122], [128, 130, 96]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #87393F, #EAB448, #E6DB4E, #B2B37A, #808260 is ideal for: corporate websites, product showcases, portfolios. 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: #87393f; --color-2: #eab448; --color-3: #e6db4e; --color-4: #b2b37a; --color-5: #808260. 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. 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