#ADE5FF + #9ACEE6 + #91BBCF + #8CA9B8 + #8A979E - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#ADE5FF

Sky Blue · LightBlue · Glacier Blue

HEX

#ADE5FF

RGB

rgb(173, 229, 255)

HSL

hsl(199, 100%, 84%)

HSB

hsb(199, 32%, 100%)

CMYK

cmyk(32%, 10%, 0%, 0%)

Oklch

oklch(89.2% 0.067 228.2)

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

#9ACEE6

Sky Blue · SkyBlue · Lake Green

HEX

#9ACEE6

RGB

rgb(154, 206, 230)

HSL

hsl(199, 60%, 75%)

HSB

hsb(199, 33%, 90%)

CMYK

cmyk(33%, 10%, 0%, 10%)

Oklch

oklch(82.3% 0.064 228.1)

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

#91BBCF

Sky Blue · SkyBlue · Lake Green

HEX

#91BBCF

RGB

rgb(145, 187, 207)

HSL

hsl(199, 39%, 69%)

HSB

hsb(199, 30%, 81%)

CMYK

cmyk(30%, 10%, 0%, 19%)

Oklch

oklch(76.9% 0.053 228.7)

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

#8CA9B8

Sky Blue · DarkGray · Cobalt Blue

HEX

#8CA9B8

RGB

rgb(140, 169, 184)

HSL

hsl(200, 24%, 64%)

HSB

hsb(200, 24%, 72%)

CMYK

cmyk(24%, 8%, 0%, 28%)

Oklch

oklch(71.8% 0.039 230.5)

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

#8A979E

Slate Blue · LightSlateGray · Silver Sand

HEX

#8A979E

RGB

rgb(138, 151, 158)

HSL

hsl(201, 9%, 58%)

HSB

hsb(201, 13%, 62%)

CMYK

cmyk(13%, 4%, 0%, 38%)

Oklch

oklch(66.8% 0.018 231.1)

Traditional「Slate Blue」· Paint「Silver Sand」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ADE5FF

FFC7AD

Analogous

ADFFF0

ADE5FF

ADBCFF

Triadic

ADE5FF

FFADE5

E5FFAD

Split-Comp.

ADE5FF

FFADBC

FFF0AD

Tetradic

ADE5FF

F0ADFF

FFC7AD

BCFFAD

Contrast Matrix WCAG 2.1 Contrast

ADE5FF	9ACEE6	91BBCF	8CA9B8	8A979E
—	1.2 Fail	1.5 Fail	1.8 Fail	2.2 Fail
1.2 Fail	—	1.2 Fail	1.5 Fail	1.8 Fail
1.5 Fail	1.2 Fail	—	1.2 Fail	1.5 Fail
1.8 Fail	1.5 Fail	1.2 Fail	—	1.2 Fail
2.2 Fail	1.8 Fail	1.5 Fail	1.2 Fail	—

White BG

1.4Fail

1.7Fail

2.1Fail

2.5Fail

3.0Fail

Black BG

15.4AAA

12.3AAA

10.2AAA

8.5AAA

7.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C5C6F9

B1B1E0

A3A4CA

9999B4

90909C

Deuteranopia

C2BEF7

AEAADF

A19EC9

9795B3

8F8E9C

Tritanopia

B0F4F3

9DDCDB

93C6C6

8DB2B1

8B9B9B

Achromatopsia

D7D7D7

C1C1C1

B1B1B1

A2A2A2

949494

Shades & Tints Shades & Tints

#ADE5FF

Dark

Light

#9ACEE6

Dark

Light

#91BBCF

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ade5ff;
  --color-2: #9acee6;
  --color-3: #91bbcf;
  --color-4: #8ca9b8;
  --color-5: #8a979e;
}

SCSS

$color-1: #ade5ff;
$color-2: #9acee6;
$color-3: #91bbcf;
$color-4: #8ca9b8;
$color-5: #8a979e;

TAILWIND

colors: {
  'brand-1': '#ade5ff',
  'brand-2': '#9acee6',
  'brand-3': '#91bbcf',
  'brand-4': '#8ca9b8',
  'brand-5': '#8a979e',
}

RGB Array

[173, 229, 255], [154, 206, 230], [145, 187, 207], [140, 169, 184], [138, 151, 158]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #ADE5FF, #9ACEE6, #91BBCF, #8CA9B8, #8A979E is ideal for: health products, baby brands, fresh-style blogs. 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: #ade5ff; --color-2: #9acee6; --color-3: #91bbcf; --color-4: #8ca9b8; --color-5: #8a979e. 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. 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 general-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