← Back to Editor

#8BB2C4 · #60B1D6 · #00A2ED · #3880EB · #5F79A1

cool

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#8BB2C4

Sky Blue · DarkGray · Lake Green

HEX
#8BB2C4
RGB
rgb(139, 178, 196)
HSL
hsl(199, 33%, 66%)
HSB
hsb(199, 29%, 77%)
CMYK
cmyk(29%, 9%, 0%, 23%)
Oklch
oklch(74.1% 0.049 227.8)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#60B1D6

Sky Blue · CornflowerBlue · Lake Green

HEX
#60B1D6
RGB
rgb(96, 177, 214)
HSL
hsl(199, 59%, 61%)
HSB
hsb(199, 55%, 84%)
CMYK
cmyk(55%, 17%, 0%, 16%)
Oklch
oklch(72.3% 0.096 229.7)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#00A2ED

Lake Blue · DeepSkyBlue · Mint Ice

HEX
#00A2ED
RGB
rgb(0, 162, 237)
HSL
hsl(199, 100%, 46%)
HSB
hsb(199, 100%, 93%)
CMYK
cmyk(100%, 32%, 0%, 7%)
Oklch
oklch(67.9% 0.155 239.9)

Traditional「Lake Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#3880EB

Azure · DodgerBlue · Navy Blue

HEX
#3880EB
RGB
rgb(56, 128, 235)
HSL
hsl(216, 82%, 57%)
HSB
hsb(216, 76%, 92%)
CMYK
cmyk(76%, 46%, 0%, 8%)
Oklch
oklch(61.1% 0.177 258.5)

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

#5F79A1

Indigo · SlateGray · Navy Blue

HEX
#5F79A1
RGB
rgb(95, 121, 161)
HSL
hsl(216, 26%, 50%)
HSB
hsb(216, 41%, 63%)
CMYK
cmyk(41%, 25%, 0%, 37%)
Oklch
oklch(57.2% 0.069 258.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8BB2C4
C59E8C

Analogous

8CC5BA
8BB2C4
8C96C5

Triadic

8BB2C4
C58CB3
B3C58C

Split-Comp.

8BB2C4
C58C96
C5BA8C

Tetradic

8BB2C4
BA8CC5
C59E8C
96C58C

Contrast Matrix WCAG 2.1 Contrast

8BB2C4
60B1D6
00A2ED
3880EB
5F79A1
—
1.1
Fail
1.3
Fail
1.7
Fail
2.0
Fail
1.1
Fail
—
1.2
Fail
1.6
Fail
1.8
Fail
1.3
Fail
1.2
Fail
—
1.4
Fail
1.6
Fail
1.7
Fail
1.6
Fail
1.4
Fail
—
1.2
Fail
2.0
Fail
1.8
Fail
1.6
Fail
1.2
Fail
—
White BG
2.3Fail
2.4Fail
2.8Fail
3.8AA Large
4.4AA Large
Black BG
9.3AAA
8.8AAA
7.4AAA
5.5AA
4.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9C9CC0
8384CD
4648DB
5758D1
6A6A97

Deuteranopia

9A97BF
7E78CB
3D31D6
534ECB
696795

Tritanopia

8DBCBB
64C6C4
08CDC9
3CBDB8
60908E

Achromatopsia

A8A8A8
9D9D9D
7A7A7A
777777
767676

Shades & Tints Shades & Tints

#8BB2C4

Dark
Light

#60B1D6

Dark
Light

#00A2ED

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8bb2c4;
  --color-2: #60b1d6;
  --color-3: #00a2ed;
  --color-4: #3880eb;
  --color-5: #5f79a1;
}

SCSS

$color-1: #8bb2c4;
$color-2: #60b1d6;
$color-3: #00a2ed;
$color-4: #3880eb;
$color-5: #5f79a1;

TAILWIND

colors: {
  'brand-1': '#8bb2c4',
  'brand-2': '#60b1d6',
  'brand-3': '#00a2ed',
  'brand-4': '#3880eb',
  'brand-5': '#5f79a1',
}

RGB Array

[139, 178, 196], [96, 177, 214], [0, 162, 237], [56, 128, 235], [95, 121, 161]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #8BB2C4, #60B1D6, #00A2ED, #3880EB, #5F79A1 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: #8bb2c4; --color-2: #60b1d6; --color-3: #00a2ed; --color-4: #3880eb; --color-5: #5f79a1. 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