← Back to Editor

#221122 · #662222 · #E63C3C · #CC9955 · #AACC99

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

#221122

Rose Purple · Black · Dark Purple

HEX
#221122
RGB
rgb(34, 17, 34)
HSL
hsl(300, 33%, 10%)
HSB
hsb(300, 50%, 13%)
CMYK
cmyk(0%, 50%, 0%, 87%)
Oklch
oklch(21.0% 0.041 326.9)

Traditional「Rose Purple」· Paint「Dark Purple」· Creative Blush Sunrise

#662222

Crimson · Maroon · Wine Red

HEX
#662222
RGB
rgb(102, 34, 34)
HSL
hsl(0, 50%, 27%)
HSB
hsb(0, 67%, 40%)
CMYK
cmyk(0%, 67%, 67%, 60%)
Oklch
oklch(35.6% 0.098 23.5)

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

#E63C3C

Vermilion · Crimson · Passion Red

HEX
#E63C3C
RGB
rgb(230, 60, 60)
HSL
hsl(0, 77%, 57%)
HSB
hsb(0, 74%, 90%)
CMYK
cmyk(0%, 74%, 74%, 10%)
Oklch
oklch(61.3% 0.207 25.8)

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

#CC9955

Ginger · SandyBrown · Warm Sun

HEX
#CC9955
RGB
rgb(204, 153, 85)
HSL
hsl(34, 54%, 57%)
HSB
hsb(34, 58%, 80%)
CMYK
cmyk(0%, 25%, 58%, 20%)
Oklch
oklch(71.7% 0.105 72.7)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#AACC99

Celadon · DarkSeaGreen · Apple Green

HEX
#AACC99
RGB
rgb(170, 204, 153)
HSL
hsl(100, 33%, 70%)
HSB
hsb(100, 25%, 80%)
CMYK
cmyk(17%, 0%, 25%, 20%)
Oklch
oklch(80.7% 0.079 135.4)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

221122
112211

Analogous

1A1122
221122
22111A

Triadic

221122
222211
112222

Split-Comp.

221122
1A2211
11221A

Tetradic

221122
221A11
112211
111A22

Contrast Matrix WCAG 2.1 Contrast

221122
662222
E63C3C
CC9955
AACC99
—
1.6
Fail
4.3
AA Large
7.0
AAA
10.1
AAA
1.6
Fail
—
2.8
Fail
4.5
AA
6.5
AA
4.3
AA Large
2.8
Fail
—
1.6
Fail
2.3
Fail
7.0
AAA
4.5
AA
1.6
Fail
—
1.4
Fail
10.1
AAA
6.5
AA
2.3
Fail
1.4
Fail
—
White BG
17.9AAA
11.6AAA
4.1AA Large
2.5Fail
1.8Fail
Black BG
1.2Fail
1.8Fail
5.1AA
8.3AAA
11.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

1B1A1E
494822
9C9B3C
B6B565
B9B9A5

Deuteranopia

1C1D1D
4D5222
A6B33C
B9BD69
B7B4A8

Tritanopia

211B1A
632222
DE3C3C
C97275
ACAFB1

Achromatopsia

181818
363636
6F6F6F
A0A0A0
BCBCBC

Shades & Tints Shades & Tints

#221122

Dark
Light

#662222

Dark
Light

#E63C3C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #221122;
  --color-2: #662222;
  --color-3: #e63c3c;
  --color-4: #cc9955;
  --color-5: #aacc99;
}

SCSS

$color-1: #221122;
$color-2: #662222;
$color-3: #e63c3c;
$color-4: #cc9955;
$color-5: #aacc99;

TAILWIND

colors: {
  'brand-1': '#221122',
  'brand-2': '#662222',
  'brand-3': '#e63c3c',
  'brand-4': '#cc9955',
  'brand-5': '#aacc99',
}

RGB Array

[34, 17, 34], [102, 34, 34], [230, 60, 60], [204, 153, 85], [170, 204, 153]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #221122, #662222, #E63C3C, #CC9955, #AACC99 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: #221122; --color-2: #662222; --color-3: #e63c3c; --color-4: #cc9955; --color-5: #aacc99. 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