← Back to Editor

#4DB6EA · #4D8FEB · #4D68EB · #5B4DEB · #824DEB

cool

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial App

Color Details Color Details

#4DB6EA

Sky Blue · CornflowerBlue · Cobalt Blue

HEX
#4DB6EA
RGB
rgb(77, 182, 234)
HSL
hsl(200, 79%, 61%)
HSB
hsb(200, 67%, 92%)
CMYK
cmyk(67%, 22%, 0%, 8%)
Oklch
oklch(73.6% 0.122 233.5)

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

#4D8FEB

Azure · CornflowerBlue · Cobalt Blue

HEX
#4D8FEB
RGB
rgb(77, 143, 235)
HSL
hsl(215, 80%, 61%)
HSB
hsb(215, 67%, 92%)
CMYK
cmyk(67%, 39%, 0%, 8%)
Oklch
oklch(65.0% 0.154 257.1)

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

#4D68EB

Azure · SlateBlue · Cobalt Blue

HEX
#4D68EB
RGB
rgb(77, 104, 235)
HSL
hsl(230, 80%, 61%)
HSB
hsb(230, 67%, 92%)
CMYK
cmyk(67%, 56%, 0%, 8%)
Oklch
oklch(57.1% 0.199 270.1)

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

#5B4DEB

Wisteria · SlateBlue · Cobalt Blue

HEX
#5B4DEB
RGB
rgb(91, 77, 235)
HSL
hsl(245, 80%, 61%)
HSB
hsb(245, 67%, 92%)
CMYK
cmyk(61%, 67%, 0%, 8%)
Oklch
oklch(53.5% 0.227 279.4)

Traditional「Wisteria」· Paint「Cobalt Blue」· Creative Lavender Dream

#824DEB

Wisteria · MediumSlateBlue · Lilac Purple

HEX
#824DEB
RGB
rgb(130, 77, 235)
HSL
hsl(260, 80%, 61%)
HSB
hsb(260, 67%, 92%)
CMYK
cmyk(45%, 67%, 0%, 8%)
Oklch
oklch(56.8% 0.224 293.3)

Traditional「Wisteria」· Paint「Lilac Purple」· Creative Lavender Dream

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4DB6EA
EA814D

Analogous

4DEAD0
4DB6EA
4D67EA

Triadic

4DB6EA
EA4DB6
B6EA4D

Split-Comp.

4DB6EA
EA4D67
EAD04D

Tetradic

4DB6EA
D04DEA
EA814D
67EA4D

Contrast Matrix WCAG 2.1 Contrast

4DB6EA
4D8FEB
4D68EB
5B4DEB
824DEB
—
1.4
Fail
2.0
Fail
2.5
Fail
2.2
Fail
1.4
Fail
—
1.4
Fail
1.7
Fail
1.5
Fail
2.0
Fail
1.4
Fail
—
1.2
Fail
1.1
Fail
2.5
Fail
1.7
Fail
1.2
Fail
—
1.1
Fail
2.2
Fail
1.5
Fail
1.1
Fail
1.1
Fail
—
White BG
2.3Fail
3.3AA Large
4.7AA
5.7AA
5.0AA
Black BG
9.2AAA
6.4AA
4.5AA Large
3.7AA Large
4.2AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

7A7BDD
6A6AD5
5959CB
5555C5
6B6BC5

Deuteranopia

746DDA
6661CF
5755C4
5657BC
6E72BC

Tritanopia

52D3D1
50C3BF
4EB2AD
5AA7A0
7FA7A0

Achromatopsia

9D9D9D
868686
6F6F6F
636363
6F6F6F

Shades & Tints Shades & Tints

#4DB6EA

Dark
Light

#4D8FEB

Dark
Light

#4D68EB

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4db6ea;
  --color-2: #4d8feb;
  --color-3: #4d68eb;
  --color-4: #5b4deb;
  --color-5: #824deb;
}

SCSS

$color-1: #4db6ea;
$color-2: #4d8feb;
$color-3: #4d68eb;
$color-4: #5b4deb;
$color-5: #824deb;

TAILWIND

colors: {
  'brand-1': '#4db6ea',
  'brand-2': '#4d8feb',
  'brand-3': '#4d68eb',
  'brand-4': '#5b4deb',
  'brand-5': '#824deb',
}

RGB Array

[77, 182, 234], [77, 143, 235], [77, 104, 235], [91, 77, 235], [130, 77, 235]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #4DB6EA, #4D8FEB, #4D68EB, #5B4DEB, #824DEB is ideal for: social media posters, mobile apps, e-commerce promos. Vivid colors effectively attract user attention. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #4db6ea; --color-2: #4d8feb; --color-3: #4d68eb; --color-4: #5b4deb; --color-5: #824deb. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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