← Back to Editor

#9E2604 · #577478 · #A3772F · #888867 · #ABA9AB

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#9E2604

Vermilion · FireBrick · Wine Red

HEX
#9E2604
RGB
rgb(158, 38, 4)
HSL
hsl(13, 95%, 32%)
HSB
hsb(13, 97%, 62%)
CMYK
cmyk(0%, 76%, 97%, 38%)
Oklch
oklch(46.1% 0.161 34.5)

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

#577478

Slate Blue · DimGray · Mint Ice

HEX
#577478
RGB
rgb(87, 116, 120)
HSL
hsl(187, 16%, 41%)
HSB
hsb(187, 27%, 47%)
CMYK
cmyk(27%, 3%, 0%, 53%)
Oklch
oklch(53.8% 0.034 206.7)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#A3772F

Ochre · Sienna · Amber Brown

HEX
#A3772F
RGB
rgb(163, 119, 47)
HSL
hsl(37, 55%, 41%)
HSB
hsb(37, 71%, 64%)
CMYK
cmyk(0%, 27%, 71%, 36%)
Oklch
oklch(60.0% 0.104 76.5)

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

#888867

Autumn Sage · Gray · Honey Gold

HEX
#888867
RGB
rgb(136, 136, 103)
HSL
hsl(60, 14%, 47%)
HSB
hsb(60, 24%, 53%)
CMYK
cmyk(0%, 0%, 24%, 47%)
Oklch
oklch(61.8% 0.047 107.7)

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

#ABA9AB

Ash · DarkGray · Silver Sand

HEX
#ABA9AB
RGB
rgb(171, 169, 171)
HSL
hsl(300, 1%, 67%)
HSB
hsb(300, 1%, 67%)
CMYK
cmyk(0%, 1%, 0%, 33%)
Oklch
oklch(73.7% 0.004 325.6)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9E2604
047E9F

Analogous

9F0430
9E2604
9F7304

Triadic

9E2604
049F26
26049F

Split-Comp.

9E2604
049F73
04309F

Tetradic

9E2604
309F04
047E9F
73049F

Contrast Matrix WCAG 2.1 Contrast

9E2604
577478
A3772F
888867
ABA9AB
—
1.5
Fail
1.9
Fail
2.1
Fail
3.3
AA Large
1.5
Fail
—
1.3
Fail
1.4
Fail
2.2
Fail
1.9
Fail
1.3
Fail
—
1.1
Fail
1.7
Fail
2.1
Fail
1.4
Fail
1.1
Fail
—
1.6
Fail
3.3
AA Large
2.2
Fail
1.7
Fail
1.6
Fail
—
White BG
7.7AAA
5.0AA
4.0AA Large
3.6AA Large
2.3Fail
Black BG
2.7Fail
4.2AA Large
5.2AA
5.8AA
9.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6A690C
646477
909040
88886F
AAAAAB

Deuteranopia

717A0E
626077
939645
888871
AAAAAA

Tritanopia

981314
587676
A14E51
887577
ABAAAA

Achromatopsia

464646
6C6C6C
7C7C7C
848484
AAAAAA

Shades & Tints Shades & Tints

#9E2604

Dark
Light

#577478

Dark
Light

#A3772F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9e2604;
  --color-2: #577478;
  --color-3: #a3772f;
  --color-4: #888867;
  --color-5: #aba9ab;
}

SCSS

$color-1: #9e2604;
$color-2: #577478;
$color-3: #a3772f;
$color-4: #888867;
$color-5: #aba9ab;

TAILWIND

colors: {
  'brand-1': '#9e2604',
  'brand-2': '#577478',
  'brand-3': '#a3772f',
  'brand-4': '#888867',
  'brand-5': '#aba9ab',
}

RGB Array

[158, 38, 4], [87, 116, 120], [163, 119, 47], [136, 136, 103], [171, 169, 171]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9E2604, #577478, #A3772F, #888867, #ABA9AB 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: #9e2604; --color-2: #577478; --color-3: #a3772f; --color-4: #888867; --color-5: #aba9ab. 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