#5E51D1 + #6F62D1 + #7073D1 + #8184D1 + #9295D1 · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#5E51D1

Deep Indigo · SlateBlue · Navy Blue

HEX

#5E51D1

RGB

rgb(94, 81, 209)

HSL

hsl(246, 58%, 57%)

HSB

hsb(246, 61%, 82%)

CMYK

cmyk(55%, 61%, 0%, 18%)

Oklch

oklch(52.2% 0.190 282.2)

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

#6F62D1

Deep Indigo · SlateBlue · Navy Blue

HEX

#6F62D1

RGB

rgb(111, 98, 209)

HSL

hsl(247, 55%, 60%)

HSB

hsb(247, 53%, 82%)

CMYK

cmyk(47%, 53%, 0%, 18%)

Oklch

oklch(56.4% 0.165 285.1)

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

#7073D1

Azure · SlateBlue · Cobalt Blue

HEX

#7073D1

RGB

rgb(112, 115, 209)

HSL

hsl(238, 51%, 63%)

HSB

hsb(238, 46%, 82%)

CMYK

cmyk(46%, 45%, 0%, 18%)

Oklch

oklch(59.7% 0.141 279.8)

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

#8184D1

Azure · MediumSlateBlue · Cobalt Blue

HEX

#8184D1

RGB

rgb(129, 132, 209)

HSL

hsl(238, 47%, 66%)

HSB

hsb(238, 38%, 82%)

CMYK

cmyk(38%, 37%, 0%, 18%)

Oklch

oklch(64.3% 0.114 281.0)

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

#9295D1

Azure · DarkGray · Cobalt Blue

HEX

#9295D1

RGB

rgb(146, 149, 209)

HSL

hsl(237, 41%, 70%)

HSB

hsb(237, 30%, 82%)

CMYK

cmyk(30%, 29%, 0%, 18%)

Oklch

oklch(69.0% 0.088 281.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5E51D1

C4D152

Analogous

5285D1

5E51D1

9E52D1

Triadic

5E51D1

D15E52

52D15E

Split-Comp.

5E51D1

D19E52

85D152

Tetradic

5E51D1

D15285

C4D152

52D19E

Contrast Matrix WCAG 2.1 Contrast

5E51D1	6F62D1	7073D1	8184D1	9295D1
—	1.2 Fail	1.4 Fail	1.7 Fail	2.1 Fail
1.2 Fail	—	1.2 Fail	1.4 Fail	1.7 Fail
1.4 Fail	1.2 Fail	—	1.2 Fail	1.5 Fail
1.7 Fail	1.4 Fail	1.2 Fail	—	1.2 Fail
2.1 Fail	1.7 Fail	1.5 Fail	1.2 Fail	—

White BG

5.9AA

4.8AA

4.1AA Large

3.4AA Large

2.8Fail

Black BG

3.6AA Large

4.3AA Large

5.1AA

6.2AA

7.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5858B2

6969B6

7171BA

8282BE

9393C2

Deuteranopia

595AAB

6A6BB0

7171B5

8282BA

9393BF

Tritanopia

5D9A94

6EA19C

70A8A4

81B0AC

92B7B5

Achromatopsia

636363

737373

7D7D7D

8C8C8C

9B9B9B

Shades & Tints Shades & Tints

#5E51D1

Dark

Light

#6F62D1

Dark

Light

#7073D1

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5e51d1;
  --color-2: #6f62d1;
  --color-3: #7073d1;
  --color-4: #8184d1;
  --color-5: #9295d1;
}

SCSS

$color-1: #5e51d1;
$color-2: #6f62d1;
$color-3: #7073d1;
$color-4: #8184d1;
$color-5: #9295d1;

TAILWIND

colors: {
  'brand-1': '#5e51d1',
  'brand-2': '#6f62d1',
  'brand-3': '#7073d1',
  'brand-4': '#8184d1',
  'brand-5': '#9295d1',
}

RGB Array

[94, 81, 209], [111, 98, 209], [112, 115, 209], [129, 132, 209], [146, 149, 209]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #5E51D1, #6F62D1, #7073D1, #8184D1, #9295D1 is ideal for: corporate websites, product showcases, portfolios. 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: #5e51d1; --color-2: #6f62d1; --color-3: #7073d1; --color-4: #8184d1; --color-5: #9295d1. 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. 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