← Back to Editor

#858181 · #9C6565 · #C24444 · #E32020 · #FF0000

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

#858181

Ash · Gray · Warm Gray

HEX
#858181
RGB
rgb(133, 129, 129)
HSL
hsl(0, 2%, 51%)
HSB
hsb(0, 3%, 52%)
CMYK
cmyk(0%, 3%, 3%, 48%)
Oklch
oklch(60.7% 0.005 17.3)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

#9C6565

Crimson · Gray · Passion Red

HEX
#9C6565
RGB
rgb(156, 101, 101)
HSL
hsl(0, 22%, 50%)
HSB
hsb(0, 35%, 61%)
CMYK
cmyk(0%, 35%, 35%, 39%)
Oklch
oklch(56.6% 0.071 19.5)

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

#C24444

Crimson · Sienna · Passion Red

HEX
#C24444
RGB
rgb(194, 68, 68)
HSL
hsl(0, 51%, 51%)
HSB
hsb(0, 65%, 76%)
CMYK
cmyk(0%, 65%, 65%, 24%)
Oklch
oklch(56.3% 0.162 23.9)

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

#E32020

Vermilion · Crimson · Passion Red

HEX
#E32020
RGB
rgb(227, 32, 32)
HSL
hsl(0, 78%, 51%)
HSB
hsb(0, 86%, 89%)
CMYK
cmyk(0%, 86%, 86%, 11%)
Oklch
oklch(58.6% 0.225 27.8)

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

#FF0000

Vermilion · Red · Passion Red

HEX
#FF0000
RGB
rgb(255, 0, 0)
HSL
hsl(0, 100%, 50%)
HSB
hsb(0, 100%, 100%)
CMYK
cmyk(0%, 100%, 100%, 0%)
Oklch
oklch(62.8% 0.258 29.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

858181
808585

Analogous

858082
858181
858280

Triadic

858181
808580
808085

Split-Comp.

858181
808582
808285

Tetradic

858181
828580
808585
828085

Contrast Matrix WCAG 2.1 Contrast

858181
9C6565
C24444
E32020
FF0000
—
1.2
Fail
1.3
Fail
1.2
Fail
1.0
Fail
1.2
Fail
—
1.1
Fail
1.0
Fail
1.2
Fail
1.3
Fail
1.1
Fail
—
1.1
Fail
1.2
Fail
1.2
Fail
1.0
Fail
1.1
Fail
—
1.2
Fail
1.0
Fail
1.2
Fail
1.2
Fail
1.2
Fail
—
White BG
3.9AA Large
4.7AA
5.0AA
4.7AA
4.0AA Large
Black BG
5.5AA
4.5AA Large
4.2AA Large
4.5AA Large
5.3AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

838381
848465
8B8A44
8F8D20
918E00

Deuteranopia

848481
878C65
939C44
9AA820
9FB300

Tritanopia

858181
996565
BC4444
D92020
F20000

Achromatopsia

828282
757575
6A6A6A
5A5A5A
4C4C4C

Shades & Tints Shades & Tints

#858181

Dark
Light

#9C6565

Dark
Light

#C24444

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #858181;
  --color-2: #9c6565;
  --color-3: #c24444;
  --color-4: #e32020;
  --color-5: #ff0000;
}

SCSS

$color-1: #858181;
$color-2: #9c6565;
$color-3: #c24444;
$color-4: #e32020;
$color-5: #ff0000;

TAILWIND

colors: {
  'brand-1': '#858181',
  'brand-2': '#9c6565',
  'brand-3': '#c24444',
  'brand-4': '#e32020',
  'brand-5': '#ff0000',
}

RGB Array

[133, 129, 129], [156, 101, 101], [194, 68, 68], [227, 32, 32], [255, 0, 0]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #858181, #9C6565, #C24444, #E32020, #FF0000 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: #858181; --color-2: #9c6565; --color-3: #c24444; --color-4: #e32020; --color-5: #ff0000. 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