← Back to Editor

#B5CBFF · #3BB9D9 · #3B92D9 · #3B6AD9 · #000000

cool

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#B5CBFF

Azure · LightBlue · Sky Blue

HEX
#B5CBFF
RGB
rgb(181, 203, 255)
HSL
hsl(222, 100%, 85%)
HSB
hsb(222, 29%, 100%)
CMYK
cmyk(29%, 20%, 0%, 0%)
Oklch
oklch(84.4% 0.077 266.9)

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

#3BB9D9

Lake Blue · MediumTurquoise · Lake Green

HEX
#3BB9D9
RGB
rgb(59, 185, 217)
HSL
hsl(192, 68%, 54%)
HSB
hsb(192, 73%, 85%)
CMYK
cmyk(73%, 15%, 0%, 15%)
Oklch
oklch(73.1% 0.116 218.7)

Traditional「Lake Blue」· Paint「Lake Green」· Creative Blush Sunrise

#3B92D9

Lake Blue · SteelBlue · Navy Blue

HEX
#3B92D9
RGB
rgb(59, 146, 217)
HSL
hsl(207, 68%, 54%)
HSB
hsb(207, 73%, 85%)
CMYK
cmyk(73%, 33%, 0%, 15%)
Oklch
oklch(64.0% 0.135 246.8)

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

#3B6AD9

Azure · SteelBlue · Navy Blue

HEX
#3B6AD9
RGB
rgb(59, 106, 217)
HSL
hsl(222, 68%, 54%)
HSB
hsb(222, 73%, 85%)
CMYK
cmyk(73%, 51%, 0%, 15%)
Oklch
oklch(55.3% 0.178 264.1)

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

#000000

Ink Black · Black · Jet Black

HEX
#000000
RGB
rgb(0, 0, 0)
HSL
hsl(0, 0%, 0%)
HSB
hsb(0, 0%, 0%)
CMYK
cmyk(0%, 0%, 0%, 100%)
Oklch
oklch(0.0% 0.000 0.0)

Traditional「Ink Black」· Paint「Jet Black」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B5CBFF
FFE8B3

Analogous

B3F0FF
B5CBFF
C2B3FF

Triadic

B5CBFF
FFB3C9
C9FFB3

Split-Comp.

B5CBFF
FFC2B3
F0FFB3

Tetradic

B5CBFF
FFB3F0
FFE8B3
B3FFC2

Contrast Matrix WCAG 2.1 Contrast

B5CBFF
3BB9D9
3B92D9
3B6AD9
000000
—
1.4
Fail
2.1
Fail
3.0
AA Large
13.0
AAA
1.4
Fail
—
1.4
Fail
2.1
Fail
9.1
AAA
2.1
Fail
1.4
Fail
—
1.5
Fail
6.3
AA
3.0
AA Large
2.1
Fail
1.5
Fail
—
4.2
AA Large
13.0
AAA
9.1
AAA
6.3
AA
4.2
AA Large
—
White BG
1.6Fail
2.3Fail
3.3AA Large
4.9AA
21.0AAA
Black BG
13.0AAA
9.1AAA
6.3AA
4.2AA Large
1.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

BFBFF2
7273D1
6161C8
4F50BE
000000

Deuteranopia

BDBCEF
6A61CF
5C55C4
4D49B8
000000

Tritanopia

B6E8E6
41CBCA
3FBAB7
3DA9A4
000000

Achromatopsia

CACACA
979797
808080
696969
000000

Shades & Tints Shades & Tints

#B5CBFF

Dark
Light

#3BB9D9

Dark
Light

#3B92D9

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b5cbff;
  --color-2: #3bb9d9;
  --color-3: #3b92d9;
  --color-4: #3b6ad9;
  --color-5: #000000;
}

SCSS

$color-1: #b5cbff;
$color-2: #3bb9d9;
$color-3: #3b92d9;
$color-4: #3b6ad9;
$color-5: #000000;

TAILWIND

colors: {
  'brand-1': '#b5cbff',
  'brand-2': '#3bb9d9',
  'brand-3': '#3b92d9',
  'brand-4': '#3b6ad9',
  'brand-5': '#000000',
}

RGB Array

[181, 203, 255], [59, 185, 217], [59, 146, 217], [59, 106, 217], [0, 0, 0]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #B5CBFF, #3BB9D9, #3B92D9, #3B6AD9, #000000 is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. 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: #b5cbff; --color-2: #3bb9d9; --color-3: #3b92d9; --color-4: #3b6ad9; --color-5: #000000. 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 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