← Back to Editor

#CDD6E5 · #DF462F · #C43593 · #413B36 · #4139D5

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

#CDD6E5

Azure · LightGray · Sky Blue

HEX
#CDD6E5
RGB
rgb(205, 214, 229)
HSL
hsl(218, 32%, 85%)
HSB
hsb(218, 10%, 90%)
CMYK
cmyk(10%, 7%, 0%, 10%)
Oklch
oklch(87.4% 0.023 260.7)

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

#DF462F

Vermilion · Chocolate · Passion Red

HEX
#DF462F
RGB
rgb(223, 70, 47)
HSL
hsl(8, 73%, 53%)
HSB
hsb(8, 79%, 87%)
CMYK
cmyk(0%, 69%, 79%, 13%)
Oklch
oklch(61.0% 0.193 31.4)

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

#C43593

Rose Purple · MediumVioletRed · Camellia

HEX
#C43593
RGB
rgb(196, 53, 147)
HSL
hsl(321, 57%, 49%)
HSB
hsb(321, 73%, 77%)
CMYK
cmyk(0%, 73%, 25%, 23%)
Oklch
oklch(57.4% 0.201 345.0)

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

#413B36

Tangerine · DarkSlateGray · Dark Stone

HEX
#413B36
RGB
rgb(65, 59, 54)
HSL
hsl(27, 9%, 23%)
HSB
hsb(27, 17%, 25%)
CMYK
cmyk(0%, 9%, 17%, 75%)
Oklch
oklch(35.7% 0.012 62.3)

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

#4139D5

Deep Indigo · SlateBlue · Navy Blue

HEX
#4139D5
RGB
rgb(65, 57, 213)
HSL
hsl(243, 65%, 53%)
HSB
hsb(243, 73%, 84%)
CMYK
cmyk(69%, 73%, 0%, 16%)
Oklch
oklch(46.8% 0.227 275.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CDD6E5
E5DCCD

Analogous

CDE2E5
CDD6E5
D0CDE5

Triadic

CDD6E5
E5CDD5
D5E5CD

Split-Comp.

CDD6E5
E5D0CD
E2E5CD

Tetradic

CDD6E5
E5CDE2
E5DCCD
CDE5D0

Contrast Matrix WCAG 2.1 Contrast

CDD6E5
DF462F
C43593
413B36
4139D5
—
2.8
Fail
3.4
AA Large
7.5
AAA
5.2
AA
2.8
Fail
—
1.2
Fail
2.7
Fail
1.8
Fail
3.4
AA Large
1.2
Fail
—
2.2
Fail
1.5
Fail
7.5
AAA
2.7
Fail
2.2
Fail
—
1.5
Fail
5.2
AA
1.8
Fail
1.5
Fail
1.5
Fail
—
White BG
1.5Fail
4.2AA Large
4.9AA
11.0AAA
7.6AAA
Black BG
14.3AAA
5.1AA
4.3AA Large
1.9Fail
2.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D1D1E1
9D9B35
86857C
3E3E37
3E3DAF

Deuteranopia

D0D0E1
A6B136
8E9977
3F3F38
3E3FA6

Tritanopia

CDDFDE
D7393A
BD6A66
413838
41918B

Achromatopsia

D5D5D5
717171
6A6A6A
3C3C3C
4D4D4D

Shades & Tints Shades & Tints

#CDD6E5

Dark
Light

#DF462F

Dark
Light

#C43593

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cdd6e5;
  --color-2: #df462f;
  --color-3: #c43593;
  --color-4: #413b36;
  --color-5: #4139d5;
}

SCSS

$color-1: #cdd6e5;
$color-2: #df462f;
$color-3: #c43593;
$color-4: #413b36;
$color-5: #4139d5;

TAILWIND

colors: {
  'brand-1': '#cdd6e5',
  'brand-2': '#df462f',
  'brand-3': '#c43593',
  'brand-4': '#413b36',
  'brand-5': '#4139d5',
}

RGB Array

[205, 214, 229], [223, 70, 47], [196, 53, 147], [65, 59, 54], [65, 57, 213]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CDD6E5, #DF462F, #C43593, #413B36, #4139D5 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: #cdd6e5; --color-2: #df462f; --color-3: #c43593; --color-4: #413b36; --color-5: #4139d5. 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