← Back to Editor

#5A8E96 · #71B3BD · #88D7E3 · #FBFBF2 · #D4EBDC

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

#5A8E96

Slate Blue · CadetBlue · Mint Ice

HEX
#5A8E96
RGB
rgb(90, 142, 150)
HSL
hsl(188, 25%, 47%)
HSB
hsb(188, 40%, 59%)
CMYK
cmyk(40%, 5%, 0%, 41%)
Oklch
oklch(61.3% 0.057 208.1)

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

#71B3BD

Slate Blue · MediumAquaMarine · Lake Green

HEX
#71B3BD
RGB
rgb(113, 179, 189)
HSL
hsl(188, 37%, 59%)
HSB
hsb(188, 40%, 74%)
CMYK
cmyk(40%, 5%, 0%, 26%)
Oklch
oklch(72.6% 0.069 207.9)

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

#88D7E3

Sky Blue · SkyBlue · Lake Green

HEX
#88D7E3
RGB
rgb(136, 215, 227)
HSL
hsl(188, 62%, 71%)
HSB
hsb(188, 40%, 89%)
CMYK
cmyk(40%, 5%, 0%, 11%)
Oklch
oklch(83.2% 0.079 208.0)

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

#FBFBF2

Fresh Green · SeaShell · Lemon Cream

HEX
#FBFBF2
RGB
rgb(251, 251, 242)
HSL
hsl(60, 53%, 97%)
HSB
hsb(60, 4%, 98%)
CMYK
cmyk(0%, 0%, 4%, 2%)
Oklch
oklch(98.6% 0.012 106.6)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#D4EBDC

Celadon · LightGray · Mint Green

HEX
#D4EBDC
RGB
rgb(212, 235, 220)
HSL
hsl(141, 37%, 88%)
HSB
hsb(141, 10%, 92%)
CMYK
cmyk(10%, 0%, 6%, 8%)
Oklch
oklch(91.9% 0.032 157.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5A8E96
96625A

Analogous

5A9680
5A8E96
5A7096

Triadic

5A8E96
965A8E
8E965A

Split-Comp.

5A8E96
965A70
96805A

Tetradic

5A8E96
805A96
96625A
70965A

Contrast Matrix WCAG 2.1 Contrast

5A8E96
71B3BD
88D7E3
FBFBF2
D4EBDC
—
1.5
Fail
2.2
Fail
3.5
AA Large
2.9
Fail
1.5
Fail
—
1.4
Fail
2.3
Fail
1.9
Fail
2.2
Fail
1.4
Fail
—
1.6
Fail
1.3
Fail
3.5
AA Large
2.3
Fail
1.6
Fail
—
1.2
Fail
2.9
Fail
1.9
Fail
1.3
Fail
1.2
Fail
—
White BG
3.7AA Large
2.4Fail
1.6Fail
1.0Fail
1.3Fail
Black BG
5.7AA
8.9AAA
12.9AAA
20.2AAA
16.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

717194
8E8EBB
AAABE0
FBFBF4
DEDEE0

Deuteranopia

6E6A94
8A85BA
A6A0DF
FBFBF5
DDDBE1

Tritanopia

5D9392
74B9B8
8CDEDD
FBF6F6
D5E2E3

Achromatopsia

7F7F7F
A0A0A0
C1C1C1
FAFAFA
E2E2E2

Shades & Tints Shades & Tints

#5A8E96

Dark
Light

#71B3BD

Dark
Light

#88D7E3

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5a8e96;
  --color-2: #71b3bd;
  --color-3: #88d7e3;
  --color-4: #fbfbf2;
  --color-5: #d4ebdc;
}

SCSS

$color-1: #5a8e96;
$color-2: #71b3bd;
$color-3: #88d7e3;
$color-4: #fbfbf2;
$color-5: #d4ebdc;

TAILWIND

colors: {
  'brand-1': '#5a8e96',
  'brand-2': '#71b3bd',
  'brand-3': '#88d7e3',
  'brand-4': '#fbfbf2',
  'brand-5': '#d4ebdc',
}

RGB Array

[90, 142, 150], [113, 179, 189], [136, 215, 227], [251, 251, 242], [212, 235, 220]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #5A8E96, #71B3BD, #88D7E3, #FBFBF2, #D4EBDC 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: #5a8e96; --color-2: #71b3bd; --color-3: #88d7e3; --color-4: #fbfbf2; --color-5: #d4ebdc. 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