← Back to Editor

#111122 · #333355 · #665599 · #CCAAEE · #9977BB

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#111122

Deep Indigo · Black · Deep Sea Blue

HEX
#111122
RGB
rgb(17, 17, 34)
HSL
hsl(240, 33%, 10%)
HSB
hsb(240, 50%, 13%)
CMYK
cmyk(50%, 50%, 0%, 87%)
Oklch
oklch(18.7% 0.034 282.6)

Traditional「Deep Indigo」· Paint「Deep Sea Blue」· Creative Blush Sunrise

#333355

Deep Indigo · DarkSlateGray · Prussian Blue

HEX
#333355
RGB
rgb(51, 51, 85)
HSL
hsl(240, 25%, 27%)
HSB
hsb(240, 40%, 33%)
CMYK
cmyk(40%, 40%, 0%, 67%)
Oklch
oklch(33.8% 0.059 282.8)

Traditional「Deep Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#665599

Deep Indigo · DarkSlateBlue · Navy Blue

HEX
#665599
RGB
rgb(102, 85, 153)
HSL
hsl(255, 29%, 47%)
HSB
hsb(255, 44%, 60%)
CMYK
cmyk(33%, 44%, 0%, 40%)
Oklch
oklch(49.7% 0.107 293.7)

Traditional「Deep Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

#CCAAEE

Lilac · LightSteelBlue · Lilac Purple

HEX
#CCAAEE
RGB
rgb(204, 170, 238)
HSL
hsl(270, 67%, 80%)
HSB
hsb(270, 29%, 93%)
CMYK
cmyk(14%, 29%, 0%, 7%)
Oklch
oklch(79.1% 0.101 307.0)

Traditional「Lilac」· Paint「Lilac Purple」· Creative Lavender Dream

#9977BB

Dark Plum · LightSlateGray · Violet

HEX
#9977BB
RGB
rgb(153, 119, 187)
HSL
hsl(270, 33%, 60%)
HSB
hsb(270, 36%, 73%)
CMYK
cmyk(18%, 36%, 0%, 27%)
Oklch
oklch(62.8% 0.106 306.5)

Traditional「Dark Plum」· Paint「Violet」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

111122
222211

Analogous

111A22
111122
1A1122

Triadic

111122
221111
112211

Split-Comp.

111122
221A11
1A2211

Tetradic

111122
22111A
222211
11221A

Contrast Matrix WCAG 2.1 Contrast

111122
333355
665599
CCAAEE
9977BB
—
1.5
Fail
2.9
Fail
9.4
AAA
5.1
AA
1.5
Fail
—
1.9
Fail
6.0
AA
3.3
AA Large
2.9
Fail
1.9
Fail
—
3.2
AA Large
1.7
Fail
9.4
AAA
6.0
AA
3.2
AA Large
—
1.8
Fail
5.1
AA
3.3
AA Large
1.7
Fail
1.8
Fail
—
White BG
18.6AAA
12.0AAA
6.3AA
2.0Fail
3.7AA Large
Black BG
1.1Fail
1.7Fail
3.3AA Large
10.6AAA
5.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

11111E
33334D
5F5E89
BDBDDE
8A8AAB

Deuteranopia

11111D
33334B
606185
BFC2DA
8C8FA7

Tritanopia

111B1A
334645
657C79
CAD1CE
979E9B

Achromatopsia

131313
373737
626262
BCBCBC
898989

Shades & Tints Shades & Tints

#111122

Dark
Light

#333355

Dark
Light

#665599

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #111122;
  --color-2: #333355;
  --color-3: #665599;
  --color-4: #ccaaee;
  --color-5: #9977bb;
}

SCSS

$color-1: #111122;
$color-2: #333355;
$color-3: #665599;
$color-4: #ccaaee;
$color-5: #9977bb;

TAILWIND

colors: {
  'brand-1': '#111122',
  'brand-2': '#333355',
  'brand-3': '#665599',
  'brand-4': '#ccaaee',
  'brand-5': '#9977bb',
}

RGB Array

[17, 17, 34], [51, 51, 85], [102, 85, 153], [204, 170, 238], [153, 119, 187]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #111122, #333355, #665599, #CCAAEE, #9977BB 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: #111122; --color-2: #333355; --color-3: #665599; --color-4: #ccaaee; --color-5: #9977bb. 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