← Back to Editor

#3C324A · #516775 · #808B9F · #DFDEC0 · #ED5472

cool

A 5-color cool 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

#3C324A

Deep Indigo · DarkSlateGray · Eggplant

HEX
#3C324A
RGB
rgb(60, 50, 74)
HSL
hsl(265, 19%, 24%)
HSB
hsb(265, 32%, 29%)
CMYK
cmyk(19%, 32%, 0%, 71%)
Oklch
oklch(33.8% 0.043 303.2)

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

#516775

Slate Blue · DimGray · Prussian Blue

HEX
#516775
RGB
rgb(81, 103, 117)
HSL
hsl(203, 18%, 39%)
HSB
hsb(203, 31%, 46%)
CMYK
cmyk(31%, 12%, 0%, 54%)
Oklch
oklch(50.1% 0.035 236.3)

Traditional「Slate Blue」· Paint「Prussian Blue」· Creative Blush Sunrise

#808B9F

Azure · LightSlateGray · Navy Blue

HEX
#808B9F
RGB
rgb(128, 139, 159)
HSL
hsl(219, 14%, 56%)
HSB
hsb(219, 19%, 62%)
CMYK
cmyk(19%, 13%, 0%, 38%)
Oklch
oklch(63.5% 0.033 262.5)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

#DFDEC0

Fresh Green · LightGray · Lemon Cream

HEX
#DFDEC0
RGB
rgb(223, 222, 192)
HSL
hsl(58, 33%, 81%)
HSB
hsb(58, 14%, 87%)
CMYK
cmyk(0%, 0%, 14%, 13%)
Oklch
oklch(89.4% 0.040 105.6)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#ED5472

Peach Pink · Salmon · Coral Red

HEX
#ED5472
RGB
rgb(237, 84, 114)
HSL
hsl(348, 81%, 63%)
HSB
hsb(348, 65%, 93%)
CMYK
cmyk(0%, 65%, 52%, 7%)
Oklch
oklch(65.8% 0.188 12.3)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3C324A
3F4932

Analogous

323449
3C324A
473249

Triadic

3C324A
493B32
32493B

Split-Comp.

3C324A
494732
344932

Tetradic

3C324A
493234
3F4932
324947

Contrast Matrix WCAG 2.1 Contrast

3C324A
516775
808B9F
DFDEC0
ED5472
—
2.0
Fail
3.5
AA Large
8.8
AAA
3.5
AA Large
2.0
Fail
—
1.7
Fail
4.3
AA Large
1.7
Fail
3.5
AA Large
1.7
Fail
—
2.5
Fail
1.0
Fail
8.8
AAA
4.3
AA Large
2.5
Fail
—
2.5
Fail
3.5
AA Large
1.7
Fail
1.0
Fail
2.5
Fail
—
White BG
12.0AAA
5.9AA
3.4AA Large
1.4Fail
3.4AA Large
Black BG
1.7Fail
3.5AA Large
6.1AA
15.3AAA
6.1AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

383844
5B5B72
85859A
DFDFC7
ABA96B

Deuteranopia

383943
595871
848399
DFDFC9
B4BF69

Tritanopia

3C403F
526F6E
819696
DFCDCE
E56564

Achromatopsia

383838
626262
8A8A8A
DBDBDB
858585

Shades & Tints Shades & Tints

#3C324A

Dark
Light

#516775

Dark
Light

#808B9F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3c324a;
  --color-2: #516775;
  --color-3: #808b9f;
  --color-4: #dfdec0;
  --color-5: #ed5472;
}

SCSS

$color-1: #3c324a;
$color-2: #516775;
$color-3: #808b9f;
$color-4: #dfdec0;
$color-5: #ed5472;

TAILWIND

colors: {
  'brand-1': '#3c324a',
  'brand-2': '#516775',
  'brand-3': '#808b9f',
  'brand-4': '#dfdec0',
  'brand-5': '#ed5472',
}

RGB Array

[60, 50, 74], [81, 103, 117], [128, 139, 159], [223, 222, 192], [237, 84, 114]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #3C324A, #516775, #808B9F, #DFDEC0, #ED5472 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: #3c324a; --color-2: #516775; --color-3: #808b9f; --color-4: #dfdec0; --color-5: #ed5472. 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 cool-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