← Back to Editor

#A29F9F · #AF8080 · #BB5B5B · #CC4040 · #E02222

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

#A29F9F

Ash · DarkGray · Silver Sand

HEX
#A29F9F
RGB
rgb(162, 159, 159)
HSL
hsl(0, 2%, 63%)
HSB
hsb(0, 2%, 64%)
CMYK
cmyk(0%, 2%, 2%, 36%)
Oklch
oklch(70.5% 0.003 17.2)

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

#AF8080

Crimson · Gray · Passion Red

HEX
#AF8080
RGB
rgb(175, 128, 128)
HSL
hsl(0, 23%, 59%)
HSB
hsb(0, 27%, 69%)
CMYK
cmyk(0%, 27%, 27%, 31%)
Oklch
oklch(64.6% 0.058 18.8)

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

#BB5B5B

Crimson · Sienna · Passion Red

HEX
#BB5B5B
RGB
rgb(187, 91, 91)
HSL
hsl(0, 41%, 55%)
HSB
hsb(0, 51%, 73%)
CMYK
cmyk(0%, 51%, 51%, 27%)
Oklch
oklch(58.8% 0.124 21.6)

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

#CC4040

Crimson · Crimson · Passion Red

HEX
#CC4040
RGB
rgb(204, 64, 64)
HSL
hsl(0, 58%, 53%)
HSB
hsb(0, 69%, 80%)
CMYK
cmyk(0%, 69%, 69%, 20%)
Oklch
oklch(57.4% 0.177 24.6)

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

#E02222

Vermilion · Crimson · Passion Red

HEX
#E02222
RGB
rgb(224, 34, 34)
HSL
hsl(0, 75%, 51%)
HSB
hsb(0, 85%, 88%)
CMYK
cmyk(0%, 85%, 85%, 12%)
Oklch
oklch(58.2% 0.221 27.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A29F9F
9FA3A3

Analogous

A39FA1
A29F9F
A3A19F

Triadic

A29F9F
9FA39F
9F9FA3

Split-Comp.

A29F9F
9FA3A1
9FA1A3

Tetradic

A29F9F
A1A39F
9FA3A3
A19FA3

Contrast Matrix WCAG 2.1 Contrast

A29F9F
AF8080
BB5B5B
CC4040
E02222
—
1.3
Fail
1.7
Fail
1.8
Fail
1.8
Fail
1.3
Fail
—
1.3
Fail
1.4
Fail
1.4
Fail
1.7
Fail
1.3
Fail
—
1.1
Fail
1.1
Fail
1.8
Fail
1.4
Fail
1.1
Fail
—
1.0
Fail
1.8
Fail
1.4
Fail
1.1
Fail
1.0
Fail
—
White BG
2.6Fail
3.4AA Large
4.4AA Large
4.8AA
4.7AA
Black BG
8.0AAA
6.2AA
4.8AA
4.4AA Large
4.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

A1A19F
9B9A80
91915B
8F8E40
8E8C22

Deuteranopia

A1A19F
9DA180
979E5B
98A240
99A722

Tritanopia

A29F9F
AD8080
B65B5B
C54040
D62222

Achromatopsia

A0A0A0
8E8E8E
787878
6A6A6A
5B5B5B

Shades & Tints Shades & Tints

#A29F9F

Dark
Light

#AF8080

Dark
Light

#BB5B5B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a29f9f;
  --color-2: #af8080;
  --color-3: #bb5b5b;
  --color-4: #cc4040;
  --color-5: #e02222;
}

SCSS

$color-1: #a29f9f;
$color-2: #af8080;
$color-3: #bb5b5b;
$color-4: #cc4040;
$color-5: #e02222;

TAILWIND

colors: {
  'brand-1': '#a29f9f',
  'brand-2': '#af8080',
  'brand-3': '#bb5b5b',
  'brand-4': '#cc4040',
  'brand-5': '#e02222',
}

RGB Array

[162, 159, 159], [175, 128, 128], [187, 91, 91], [204, 64, 64], [224, 34, 34]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #A29F9F, #AF8080, #BB5B5B, #CC4040, #E02222 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: #a29f9f; --color-2: #af8080; --color-3: #bb5b5b; --color-4: #cc4040; --color-5: #e02222. 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