← Back to Editor

#887453 · #C6A677 · #E7C274 · #AB6041 · #221D1A

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

#887453

Ochre · DimGray · Amber Brown

HEX
#887453
RGB
rgb(136, 116, 83)
HSL
hsl(37, 24%, 43%)
HSB
hsb(37, 39%, 53%)
CMYK
cmyk(0%, 15%, 39%, 47%)
Oklch
oklch(56.9% 0.053 79.8)

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

#C6A677

Ginger · Tan · Warm Sun

HEX
#C6A677
RGB
rgb(198, 166, 119)
HSL
hsl(36, 41%, 62%)
HSB
hsb(36, 40%, 78%)
CMYK
cmyk(0%, 16%, 40%, 22%)
Oklch
oklch(74.3% 0.073 76.8)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#E7C274

Ginger · BurlyWood · Sunflower

HEX
#E7C274
RGB
rgb(231, 194, 116)
HSL
hsl(41, 71%, 68%)
HSB
hsb(41, 50%, 91%)
CMYK
cmyk(0%, 16%, 50%, 9%)
Oklch
oklch(83.0% 0.106 84.8)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#AB6041

Tangerine · Sienna · Amber Brown

HEX
#AB6041
RGB
rgb(171, 96, 65)
HSL
hsl(18, 45%, 46%)
HSB
hsb(18, 62%, 67%)
CMYK
cmyk(0%, 44%, 62%, 33%)
Oklch
oklch(56.9% 0.107 42.7)

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

#221D1A

Tangerine · Black · Cinnamon

HEX
#221D1A
RGB
rgb(34, 29, 26)
HSL
hsl(23, 13%, 12%)
HSB
hsb(23, 24%, 13%)
CMYK
cmyk(0%, 15%, 24%, 87%)
Oklch
oklch(23.5% 0.010 53.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

887453
536888

Analogous

885953
887453
828853

Triadic

887453
538874
745388

Split-Comp.

887453
538288
595388

Tetradic

887453
538859
536888
885382

Contrast Matrix WCAG 2.1 Contrast

887453
C6A677
E7C274
AB6041
221D1A
—
2.0
Fail
2.6
Fail
1.0
Fail
3.7
AA Large
2.0
Fail
—
1.4
Fail
2.0
Fail
7.2
AAA
2.6
Fail
1.4
Fail
—
2.8
Fail
9.8
AAA
1.0
Fail
2.0
Fail
2.8
Fail
—
3.6
AA Large
3.7
AA Large
7.2
AAA
9.8
AAA
3.6
AA Large
—
White BG
4.5AA Large
2.3Fail
1.7Fail
4.7AA
16.7AAA
Black BG
4.7AA
9.1AAA
12.4AAA
4.5AA Large
1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

7F7F5B
B8B882
D7D787
8B8A49
20201B

Deuteranopia

81825D
BABC85
D9DC8B
8F954A
20211B

Tritanopia

876163
C48B8D
E59699
A74E50
221B1B

Achromatopsia

767676
AAAAAA
C4C4C4
737373
1E1E1E

Shades & Tints Shades & Tints

#887453

Dark
Light

#C6A677

Dark
Light

#E7C274

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #887453;
  --color-2: #c6a677;
  --color-3: #e7c274;
  --color-4: #ab6041;
  --color-5: #221d1a;
}

SCSS

$color-1: #887453;
$color-2: #c6a677;
$color-3: #e7c274;
$color-4: #ab6041;
$color-5: #221d1a;

TAILWIND

colors: {
  'brand-1': '#887453',
  'brand-2': '#c6a677',
  'brand-3': '#e7c274',
  'brand-4': '#ab6041',
  'brand-5': '#221d1a',
}

RGB Array

[136, 116, 83], [198, 166, 119], [231, 194, 116], [171, 96, 65], [34, 29, 26]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #887453, #C6A677, #E7C274, #AB6041, #221D1A 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: #887453; --color-2: #c6a677; --color-3: #e7c274; --color-4: #ab6041; --color-5: #221d1a. 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