← Back to Editor

#D5DEF5 · #CCC0C0 · #FF0000 · #450A0A · #211616

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

#D5DEF5

Azure · Lavender · Sky Blue

HEX
#D5DEF5
RGB
rgb(213, 222, 245)
HSL
hsl(223, 62%, 90%)
HSB
hsb(223, 13%, 96%)
CMYK
cmyk(13%, 9%, 0%, 4%)
Oklch
oklch(90.1% 0.033 268.7)

Traditional「Azure」· Paint「Sky Blue」· Creative Twilight Haze

#CCC0C0

Peach Pink · Silver · Coral Red

HEX
#CCC0C0
RGB
rgb(204, 192, 192)
HSL
hsl(0, 11%, 78%)
HSB
hsb(0, 6%, 80%)
CMYK
cmyk(0%, 6%, 6%, 20%)
Oklch
oklch(81.8% 0.014 17.4)

Traditional「Peach Pink」· Paint「Coral 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

#450A0A

Vermilion · Maroon · Deep Berry

HEX
#450A0A
RGB
rgb(69, 10, 10)
HSL
hsl(0, 75%, 15%)
HSB
hsb(0, 86%, 27%)
CMYK
cmyk(0%, 86%, 86%, 73%)
Oklch
oklch(25.8% 0.089 26.0)

Traditional「Vermilion」· Paint「Deep Berry」· Creative Blush Sunrise

#211616

Crimson · Black · Deep Berry

HEX
#211616
RGB
rgb(33, 22, 22)
HSL
hsl(0, 20%, 11%)
HSB
hsb(0, 33%, 13%)
CMYK
cmyk(0%, 33%, 33%, 87%)
Oklch
oklch(21.4% 0.018 18.7)

Traditional「Crimson」· Paint「Deep Berry」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D5DEF5
F5ECD6

Analogous

D6EEF5
D5DEF5
DDD6F5

Triadic

D5DEF5
F5D6DF
DFF5D6

Split-Comp.

D5DEF5
F5DDD6
EEF5D6

Tetradic

D5DEF5
F5D6EE
F5ECD6
D6F5DD

Contrast Matrix WCAG 2.1 Contrast

D5DEF5
CCC0C0
FF0000
450A0A
211616
—
1.3
Fail
3.0
Fail
12.0
AAA
13.1
AAA
1.3
Fail
—
2.3
Fail
9.1
AAA
10.0
AAA
3.0
Fail
2.3
Fail
—
4.0
AA Large
4.4
AA Large
12.0
AAA
9.1
AAA
4.0
AA Large
—
1.1
Fail
13.1
AAA
10.0
AAA
4.4
AA Large
1.1
Fail
—
White BG
1.3Fail
1.8Fail
4.0AA Large
16.1AAA
17.6AAA
Black BG
15.6AAA
11.9AAA
5.3AA
1.3Fail
1.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D9D9EF
C7C7C0
918E00
2B2B0A
1C1C16

Deuteranopia

D8D8EE
C8C8C0
9FB300
2F330A
1D1E16

Tritanopia

D5EBEA
CBC0C0
F20000
420A0A
201616

Achromatopsia

DEDEDE
C4C4C4
4C4C4C
1C1C1C
191919

Shades & Tints Shades & Tints

#D5DEF5

Dark
Light

#CCC0C0

Dark
Light

#FF0000

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d5def5;
  --color-2: #ccc0c0;
  --color-3: #ff0000;
  --color-4: #450a0a;
  --color-5: #211616;
}

SCSS

$color-1: #d5def5;
$color-2: #ccc0c0;
$color-3: #ff0000;
$color-4: #450a0a;
$color-5: #211616;

TAILWIND

colors: {
  'brand-1': '#d5def5',
  'brand-2': '#ccc0c0',
  'brand-3': '#ff0000',
  'brand-4': '#450a0a',
  'brand-5': '#211616',
}

RGB Array

[213, 222, 245], [204, 192, 192], [255, 0, 0], [69, 10, 10], [33, 22, 22]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D5DEF5, #CCC0C0, #FF0000, #450A0A, #211616 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: #d5def5; --color-2: #ccc0c0; --color-3: #ff0000; --color-4: #450a0a; --color-5: #211616. 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