#9AC0C3 + #84E7FE + #A9CED6 + #A5F2FF + #C1E0E5 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#9AC0C3

Sky Blue · LightSteelBlue · Lake Green

HEX

#9AC0C3

RGB

rgb(154, 192, 195)

HSL

hsl(184, 25%, 68%)

HSB

hsb(184, 21%, 76%)

CMYK

cmyk(21%, 2%, 0%, 24%)

Oklch

oklch(78.1% 0.041 202.3)

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

#84E7FE

Sky Blue · LightSkyBlue · Glacier Blue

HEX

#84E7FE

RGB

rgb(132, 231, 254)

HSL

hsl(191, 98%, 76%)

HSB

hsb(191, 48%, 100%)

CMYK

cmyk(48%, 9%, 0%, 0%)

Oklch

oklch(87.6% 0.098 214.5)

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

#A9CED6

Sky Blue · LightSteelBlue · Lake Green

HEX

#A9CED6

RGB

rgb(169, 206, 214)

HSL

hsl(191, 35%, 75%)

HSB

hsb(191, 21%, 84%)

CMYK

cmyk(21%, 4%, 0%, 16%)

Oklch

oklch(82.7% 0.041 212.3)

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

#A5F2FF

Sky Blue · LightBlue · Glacier Blue

HEX

#A5F2FF

RGB

rgb(165, 242, 255)

HSL

hsl(189, 100%, 82%)

HSB

hsb(189, 35%, 100%)

CMYK

cmyk(35%, 5%, 0%, 0%)

Oklch

oklch(91.5% 0.077 209.2)

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

#C1E0E5

Sky Blue · LightBlue · Glacier Blue

HEX

#C1E0E5

RGB

rgb(193, 224, 229)

HSL

hsl(188, 41%, 83%)

HSB

hsb(188, 16%, 90%)

CMYK

cmyk(16%, 2%, 0%, 10%)

Oklch

oklch(88.6% 0.033 208.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9AC0C3

C29C99

Analogous

99C2B0

9AC0C3

99ABC2

Triadic

9AC0C3

C299BF

BFC299

Split-Comp.

9AC0C3

C299AB

C2B099

Tetradic

9AC0C3

B099C2

C29C99

ABC299

Contrast Matrix WCAG 2.1 Contrast

9AC0C3	84E7FE	A9CED6	A5F2FF	C1E0E5
—	1.4 Fail	1.2 Fail	1.6 Fail	1.4 Fail
1.4 Fail	—	1.2 Fail	1.1 Fail	1.0 Fail
1.2 Fail	1.2 Fail	—	1.3 Fail	1.2 Fail
1.6 Fail	1.1 Fail	1.3 Fail	—	1.1 Fail
1.4 Fail	1.0 Fail	1.2 Fail	1.1 Fail	—

White BG

2.0Fail

1.4Fail

1.7Fail

1.3Fail

1.4Fail

Black BG

10.7AAA

14.8AAA

12.5AAA

16.7AAA

15.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

AAABC2

AFB0F8

B9B9D4

C6C7FC

CECFE4

Deuteranopia

A8A5C2

A9A2F7

B7B4D4

C2BCFB

CDCAE4

Tritanopia

9CC2C2

89F4F3

ABD3D2

A9F9F9

C3E3E3

Achromatopsia

B5B5B5

CCCCCC

C4C4C4

DCDCDC

D7D7D7

Shades & Tints Shades & Tints

#9AC0C3

Dark

Light

#84E7FE

Dark

Light

#A9CED6

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9ac0c3;
  --color-2: #84e7fe;
  --color-3: #a9ced6;
  --color-4: #a5f2ff;
  --color-5: #c1e0e5;
}

SCSS

$color-1: #9ac0c3;
$color-2: #84e7fe;
$color-3: #a9ced6;
$color-4: #a5f2ff;
$color-5: #c1e0e5;

TAILWIND

colors: {
  'brand-1': '#9ac0c3',
  'brand-2': '#84e7fe',
  'brand-3': '#a9ced6',
  'brand-4': '#a5f2ff',
  'brand-5': '#c1e0e5',
}

RGB Array

[154, 192, 195], [132, 231, 254], [169, 206, 214], [165, 242, 255], [193, 224, 229]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9AC0C3, #84E7FE, #A9CED6, #A5F2FF, #C1E0E5 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: #9ac0c3; --color-2: #84e7fe; --color-3: #a9ced6; --color-4: #a5f2ff; --color-5: #c1e0e5. 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