← Back to Editor

#9C2A20 · #17120C · #403D36 · #9E8F8A · #E3BCBF

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

#9C2A20

Vermilion · Brown · Wine Red

HEX
#9C2A20
RGB
rgb(156, 42, 32)
HSL
hsl(5, 66%, 37%)
HSB
hsb(5, 79%, 61%)
CMYK
cmyk(0%, 73%, 79%, 39%)
Oklch
oklch(46.3% 0.152 29.2)

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

#17120C

Ochre · Black · Cinnamon

HEX
#17120C
RGB
rgb(23, 18, 12)
HSL
hsl(33, 31%, 7%)
HSB
hsb(33, 48%, 9%)
CMYK
cmyk(0%, 22%, 48%, 91%)
Oklch
oklch(18.6% 0.014 71.9)

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

#403D36

Ochre · DarkSlateGray · Dark Stone

HEX
#403D36
RGB
rgb(64, 61, 54)
HSL
hsl(42, 8%, 23%)
HSB
hsb(42, 16%, 25%)
CMYK
cmyk(0%, 5%, 16%, 75%)
Oklch
oklch(36.1% 0.012 87.6)

Traditional「Ochre」· Paint「Dark Stone」· Creative Midnight Shadow

#9E8F8A

Tangerine · Gray · Silver Sand

HEX
#9E8F8A
RGB
rgb(158, 143, 138)
HSL
hsl(15, 9%, 58%)
HSB
hsb(15, 13%, 62%)
CMYK
cmyk(0%, 9%, 13%, 38%)
Oklch
oklch(66.2% 0.019 39.4)

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

#E3BCBF

Peach Pink · LightPink · Cherry Blossom

HEX
#E3BCBF
RGB
rgb(227, 188, 191)
HSL
hsl(355, 41%, 81%)
HSB
hsb(355, 17%, 89%)
CMYK
cmyk(0%, 17%, 16%, 11%)
Oklch
oklch(83.0% 0.045 12.9)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9C2A20
20929D

Analogous

9D2054
9C2A20
9D6920

Triadic

9C2A20
209D2A
2A209D

Split-Comp.

9C2A20
209D69
20549D

Tetradic

9C2A20
549D20
20929D
69209D

Contrast Matrix WCAG 2.1 Contrast

9C2A20
17120C
403D36
9E8F8A
E3BCBF
—
2.5
Fail
1.4
Fail
2.4
Fail
4.4
AA Large
2.5
Fail
—
1.7
Fail
6.0
AA
10.8
AAA
1.4
Fail
1.7
Fail
—
3.5
AA Large
6.3
AA
2.4
Fail
6.0
AA
3.5
AA Large
—
1.8
Fail
4.4
AA Large
10.8
AAA
6.3
AA
1.8
Fail
—
White BG
7.6AAA
18.6AAA
10.8AAA
3.1AA Large
1.7Fail
Black BG
2.8Fail
1.1Fail
1.9Fail
6.7AA
12.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6B6A22
15150D
3F3F38
98978B
D2D2BE

Deuteranopia

717A23
15150E
3F3F38
989A8C
D4D7BE

Tritanopia

962425
170F0F
403939
9D8C8C
E1BEBE

Achromatopsia

4B4B4B
131313
3D3D3D
939393
C8C8C8

Shades & Tints Shades & Tints

#9C2A20

Dark
Light

#17120C

Dark
Light

#403D36

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9c2a20;
  --color-2: #17120c;
  --color-3: #403d36;
  --color-4: #9e8f8a;
  --color-5: #e3bcbf;
}

SCSS

$color-1: #9c2a20;
$color-2: #17120c;
$color-3: #403d36;
$color-4: #9e8f8a;
$color-5: #e3bcbf;

TAILWIND

colors: {
  'brand-1': '#9c2a20',
  'brand-2': '#17120c',
  'brand-3': '#403d36',
  'brand-4': '#9e8f8a',
  'brand-5': '#e3bcbf',
}

RGB Array

[156, 42, 32], [23, 18, 12], [64, 61, 54], [158, 143, 138], [227, 188, 191]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9C2A20, #17120C, #403D36, #9E8F8A, #E3BCBF 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: #9c2a20; --color-2: #17120c; --color-3: #403d36; --color-4: #9e8f8a; --color-5: #e3bcbf. 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