← Back to Editor

#4DB5D8 · #83CCEC · #CAECF2 · #E1F6F6 · #FAFCF7

cool

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#4DB5D8

Lake Blue · MediumTurquoise · Lake Green

HEX
#4DB5D8
RGB
rgb(77, 181, 216)
HSL
hsl(195, 64%, 57%)
HSB
hsb(195, 64%, 85%)
CMYK
cmyk(64%, 16%, 0%, 15%)
Oklch
oklch(72.6% 0.107 223.5)

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

#83CCEC

Sky Blue · SkyBlue · Lake Green

HEX
#83CCEC
RGB
rgb(131, 204, 236)
HSL
hsl(198, 73%, 72%)
HSB
hsb(198, 44%, 93%)
CMYK
cmyk(44%, 14%, 0%, 7%)
Oklch
oklch(80.9% 0.086 227.6)

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

#CAECF2

Sky Blue · Lavender · Glacier Blue

HEX
#CAECF2
RGB
rgb(202, 236, 242)
HSL
hsl(189, 61%, 87%)
HSB
hsb(189, 17%, 95%)
CMYK
cmyk(17%, 2%, 0%, 5%)
Oklch
oklch(92.1% 0.036 209.4)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

#E1F6F6

Sky Blue · Lavender · Glacier Blue

HEX
#E1F6F6
RGB
rgb(225, 246, 246)
HSL
hsl(180, 54%, 92%)
HSB
hsb(180, 9%, 96%)
CMYK
cmyk(9%, 0%, 0%, 4%)
Oklch
oklch(95.8% 0.022 196.8)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

#FAFCF7

Willow Green · Snow · Mint Green

HEX
#FAFCF7
RGB
rgb(250, 252, 247)
HSL
hsl(84, 45%, 98%)
HSB
hsb(84, 2%, 99%)
CMYK
cmyk(1%, 0%, 2%, 1%)
Oklch
oklch(98.8% 0.007 124.4)

Traditional「Willow Green」· Paint「Mint Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4DB5D8
D86E4B

Analogous

4BD8B4
4DB5D8
4B6ED8

Triadic

4DB5D8
D84BB4
B4D84B

Split-Comp.

4DB5D8
D84B6E
D8B44B

Tetradic

4DB5D8
B44BD8
D86E4B
6ED84B

Contrast Matrix WCAG 2.1 Contrast

4DB5D8
83CCEC
CAECF2
E1F6F6
FAFCF7
—
1.3
Fail
1.9
Fail
2.1
Fail
2.3
Fail
1.3
Fail
—
1.4
Fail
1.6
Fail
1.7
Fail
1.9
Fail
1.4
Fail
—
1.1
Fail
1.2
Fail
2.1
Fail
1.6
Fail
1.1
Fail
—
1.1
Fail
2.3
Fail
1.7
Fail
1.2
Fail
1.1
Fail
—
White BG
2.4Fail
1.8Fail
1.3Fail
1.1Fail
1.0Fail
Black BG
8.9AAA
11.8AAA
16.8AAA
18.7AAA
20.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7A7BD0
A3A3E4
D9D9F1
EAEAF6
FBFBF8

Deuteranopia

746CCE
9E99E2
D7D4F0
E9E7F6
FBFBF8

Tritanopia

52C9C7
87DEDD
CCEFEF
E2F6F6
FAF9F9

Achromatopsia

9A9A9A
BABABA
E3E3E3
F0F0F0
FBFBFB

Shades & Tints Shades & Tints

#4DB5D8

Dark
Light

#83CCEC

Dark
Light

#CAECF2

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4db5d8;
  --color-2: #83ccec;
  --color-3: #caecf2;
  --color-4: #e1f6f6;
  --color-5: #fafcf7;
}

SCSS

$color-1: #4db5d8;
$color-2: #83ccec;
$color-3: #caecf2;
$color-4: #e1f6f6;
$color-5: #fafcf7;

TAILWIND

colors: {
  'brand-1': '#4db5d8',
  'brand-2': '#83ccec',
  'brand-3': '#caecf2',
  'brand-4': '#e1f6f6',
  'brand-5': '#fafcf7',
}

RGB Array

[77, 181, 216], [131, 204, 236], [202, 236, 242], [225, 246, 246], [250, 252, 247]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #4DB5D8, #83CCEC, #CAECF2, #E1F6F6, #FAFCF7 is ideal for: health products, baby brands, fresh-style blogs, 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: #4db5d8; --color-2: #83ccec; --color-3: #caecf2; --color-4: #e1f6f6; --color-5: #fafcf7. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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