#99ACBA + #8FC0CE + #D9E8EF + #7C87A5 + #E8C2C1 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#99ACBA

Sky Blue · DarkGray · Cobalt Blue

HEX

#99ACBA

RGB

rgb(153, 172, 186)

HSL

hsl(205, 19%, 66%)

HSB

hsb(205, 18%, 73%)

CMYK

cmyk(18%, 8%, 0%, 27%)

Oklch

oklch(73.4% 0.029 239.8)

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

#8FC0CE

Sky Blue · SkyBlue · Lake Green

HEX

#8FC0CE

RGB

rgb(143, 192, 206)

HSL

hsl(193, 39%, 68%)

HSB

hsb(193, 31%, 81%)

CMYK

cmyk(31%, 7%, 0%, 19%)

Oklch

oklch(77.8% 0.055 217.3)

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

#D9E8EF

Sky Blue · Lavender · Glacier Blue

HEX

#D9E8EF

RGB

rgb(217, 232, 239)

HSL

hsl(199, 41%, 89%)

HSB

hsb(199, 9%, 94%)

CMYK

cmyk(9%, 3%, 0%, 6%)

Oklch

oklch(92.2% 0.019 227.3)

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

#7C87A5

Azure · LightSlateGray · Navy Blue

HEX

#7C87A5

RGB

rgb(124, 135, 165)

HSL

hsl(224, 19%, 57%)

HSB

hsb(224, 25%, 65%)

CMYK

cmyk(25%, 18%, 0%, 35%)

Oklch

oklch(62.5% 0.047 269.2)

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

#E8C2C1

Peach Pink · Pink · Cherry Blossom

HEX

#E8C2C1

RGB

rgb(232, 194, 193)

HSL

hsl(2, 46%, 83%)

HSB

hsb(2, 17%, 91%)

CMYK

cmyk(0%, 16%, 17%, 9%)

Oklch

oklch(84.7% 0.044 19.8)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

99ACBA

B9A698

Analogous

98B9B6

99ACBA

989BB9

Triadic

99ACBA

B998AB

ABB998

Split-Comp.

99ACBA

B9989B

B9B698

Tetradic

99ACBA

B698B9

B9A698

9BB998

Contrast Matrix WCAG 2.1 Contrast

99ACBA	8FC0CE	D9E8EF	7C87A5	E8C2C1
—	1.2 Fail	1.9 Fail	1.5 Fail	1.4 Fail
1.2 Fail	—	1.6 Fail	1.8 Fail	1.2 Fail
1.9 Fail	1.6 Fail	—	2.9 Fail	1.3 Fail
1.5 Fail	1.8 Fail	2.9 Fail	—	2.2 Fail
1.4 Fail	1.2 Fail	1.3 Fail	2.2 Fail	—

White BG

2.3Fail

2.0Fail

1.3Fail

3.6AA Large

1.6Fail

Black BG

9.0AAA

10.6AAA

16.7AAA

5.9AA

12.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A1A1B7

A4A5CB

DFE0ED

81819E

D8D7C1

Deuteranopia

A09FB6

A19ECA

DFDDED

807F9C

DADDC1

Tritanopia

9AB4B3

91C8C7

DAECEC

7D9897

E6C1C1

Achromatopsia

A8A8A8

B3B3B3

E4E4E4

878787

CDCDCD

Shades & Tints Shades & Tints

#99ACBA

Dark

Light

#8FC0CE

Dark

Light

#D9E8EF

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #99acba;
  --color-2: #8fc0ce;
  --color-3: #d9e8ef;
  --color-4: #7c87a5;
  --color-5: #e8c2c1;
}

SCSS

$color-1: #99acba;
$color-2: #8fc0ce;
$color-3: #d9e8ef;
$color-4: #7c87a5;
$color-5: #e8c2c1;

TAILWIND

colors: {
  'brand-1': '#99acba',
  'brand-2': '#8fc0ce',
  'brand-3': '#d9e8ef',
  'brand-4': '#7c87a5',
  'brand-5': '#e8c2c1',
}

RGB Array

[153, 172, 186], [143, 192, 206], [217, 232, 239], [124, 135, 165], [232, 194, 193]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #99ACBA, #8FC0CE, #D9E8EF, #7C87A5, #E8C2C1 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: #99acba; --color-2: #8fc0ce; --color-3: #d9e8ef; --color-4: #7c87a5; --color-5: #e8c2c1. 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