← Back to Editor

#CCC9D1 · #84759C · #FF0DE3 · #FF0084 · #211C1C

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#CCC9D1

Wisteria · LightGray · Pearl Gray

HEX
#CCC9D1
RGB
rgb(204, 201, 209)
HSL
hsl(263, 8%, 80%)
HSB
hsb(263, 4%, 82%)
CMYK
cmyk(2%, 4%, 0%, 18%)
Oklch
oklch(84.1% 0.011 303.1)

Traditional「Wisteria」· Paint「Pearl Gray」· Creative Silver Lining

#84759C

Deep Indigo · LightSlateGray · Violet

HEX
#84759C
RGB
rgb(132, 117, 156)
HSL
hsl(263, 16%, 54%)
HSB
hsb(263, 25%, 61%)
CMYK
cmyk(15%, 25%, 0%, 39%)
Oklch
oklch(59.0% 0.061 302.2)

Traditional「Deep Indigo」· Paint「Violet」· Creative Blush Sunrise

#FF0DE3

Rose Purple · Magenta · Violet

HEX
#FF0DE3
RGB
rgb(255, 13, 227)
HSL
hsl(307, 100%, 53%)
HSB
hsb(307, 95%, 100%)
CMYK
cmyk(0%, 95%, 11%, 0%)
Oklch
oklch(68.8% 0.303 334.7)

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

#FF0084

Rose Purple · DeepPink · Camellia

HEX
#FF0084
RGB
rgb(255, 0, 132)
HSL
hsl(329, 100%, 50%)
HSB
hsb(329, 100%, 100%)
CMYK
cmyk(0%, 100%, 48%, 0%)
Oklch
oklch(64.7% 0.261 1.2)

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

#211C1C

Crimson · Black · Dark Stone

HEX
#211C1C
RGB
rgb(33, 28, 28)
HSL
hsl(0, 8%, 12%)
HSB
hsb(0, 15%, 13%)
CMYK
cmyk(0%, 15%, 15%, 87%)
Oklch
oklch(23.2% 0.008 17.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CCC9D1
CDD0C8

Analogous

C8C9D0
CCC9D1
CFC8D0

Triadic

CCC9D1
D0CBC8
C8D0CB

Split-Comp.

CCC9D1
D0CFC8
C9D0C8

Tetradic

CCC9D1
D0C8C9
CDD0C8
C8D0CF

Contrast Matrix WCAG 2.1 Contrast

CCC9D1
84759C
FF0DE3
FF0084
211C1C
—
2.6
Fail
2.0
Fail
2.3
Fail
10.3
AAA
2.6
Fail
—
1.3
Fail
1.1
Fail
4.0
AA Large
2.0
Fail
1.3
Fail
—
1.1
Fail
5.1
AA
2.3
Fail
1.1
Fail
1.1
Fail
—
4.5
AA Large
10.3
AAA
4.0
AA Large
5.1
AA
4.5
AA Large
—
White BG
1.6Fail
4.2AA Large
3.3AA Large
3.8AA Large
16.8AAA
Black BG
12.8AAA
5.0AA
6.4AA
5.6AA
1.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

CBCBCF
7E7D93
9694AF
918E64
1F1F1C

Deuteranopia

CBCBCF
7E8090
A4B6A3
9FB35C
1F201C

Tritanopia

CCCECD
838B89
F3867D
F24B45
211C1C

Achromatopsia

CBCBCB
7E7E7E
6E6E6E
5B5B5B
1D1D1D

Shades & Tints Shades & Tints

#CCC9D1

Dark
Light

#84759C

Dark
Light

#FF0DE3

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ccc9d1;
  --color-2: #84759c;
  --color-3: #ff0de3;
  --color-4: #ff0084;
  --color-5: #211c1c;
}

SCSS

$color-1: #ccc9d1;
$color-2: #84759c;
$color-3: #ff0de3;
$color-4: #ff0084;
$color-5: #211c1c;

TAILWIND

colors: {
  'brand-1': '#ccc9d1',
  'brand-2': '#84759c',
  'brand-3': '#ff0de3',
  'brand-4': '#ff0084',
  'brand-5': '#211c1c',
}

RGB Array

[204, 201, 209], [132, 117, 156], [255, 13, 227], [255, 0, 132], [33, 28, 28]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CCC9D1, #84759C, #FF0DE3, #FF0084, #211C1C 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: #ccc9d1; --color-2: #84759c; --color-3: #ff0de3; --color-4: #ff0084; --color-5: #211c1c. 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