#8C9F93 + #81D3DB + #7BE8EE + #C7E2F2 + #F6D4FD · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#8C9F93

Celadon · DarkSeaGreen · Silver Sand

HEX

#8C9F93

RGB

rgb(140, 159, 147)

HSL

hsl(142, 9%, 59%)

HSB

hsb(142, 12%, 62%)

CMYK

cmyk(12%, 0%, 8%, 38%)

Oklch

oklch(68.4% 0.028 157.9)

Traditional「Celadon」· Paint「Silver Sand」· Creative Urban Concrete

#81D3DB

Sky Blue · SkyBlue · Lake Green

HEX

#81D3DB

RGB

rgb(129, 211, 219)

HSL

hsl(185, 56%, 68%)

HSB

hsb(185, 41%, 86%)

CMYK

cmyk(41%, 4%, 0%, 14%)

Oklch

oklch(81.7% 0.081 203.7)

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

#7BE8EE

Sky Blue · SkyBlue · Lake Green

HEX

#7BE8EE

RGB

rgb(123, 232, 238)

HSL

hsl(183, 77%, 71%)

HSB

hsb(183, 48%, 93%)

CMYK

cmyk(48%, 3%, 0%, 7%)

Oklch

oklch(86.8% 0.101 200.2)

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

#C7E2F2

Sky Blue · LightBlue · Sky Blue

HEX

#C7E2F2

RGB

rgb(199, 226, 242)

HSL

hsl(202, 62%, 86%)

HSB

hsb(202, 18%, 95%)

CMYK

cmyk(18%, 7%, 0%, 5%)

Oklch

oklch(89.8% 0.036 233.8)

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

#F6D4FD

Lilac · Lavender · Lavender

HEX

#F6D4FD

RGB

rgb(246, 212, 253)

HSL

hsl(290, 91%, 91%)

HSB

hsb(290, 16%, 99%)

CMYK

cmyk(3%, 16%, 0%, 1%)

Oklch

oklch(91.1% 0.066 320.5)

Traditional「Lilac」· Paint「Lavender」· Creative Lavender Dream

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8C9F93

A08D99

Analogous

90A08D

8C9F93

8DA09D

Triadic

8C9F93

948DA0

A0948D

Split-Comp.

8C9F93

9D8DA0

A08D90

Tetradic

8C9F93

8D90A0

A08D99

A09D8D

Contrast Matrix WCAG 2.1 Contrast

8C9F93	81D3DB	7BE8EE	C7E2F2	F6D4FD
—	1.6 Fail	2.0 Fail	2.1 Fail	2.1 Fail
1.6 Fail	—	1.2 Fail	1.3 Fail	1.3 Fail
2.0 Fail	1.2 Fail	—	1.1 Fail	1.1 Fail
2.1 Fail	1.3 Fail	1.1 Fail	—	1.0 Fail
2.1 Fail	1.3 Fail	1.1 Fail	1.0 Fail	—

White BG

2.8Fail

1.7Fail

1.4Fail

1.3Fail

Black BG

7.5AAA

12.3AAA

14.6AAA

15.6AAA

15.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

949496

A5A5D9

AAABED

D3D3EE

E7E7F3

Deuteranopia

939297

A09AD9

A49CEC

D1CFED

E9ECF1

Tritanopia

8D9899

85D8D7

80EBEB

C8EBEA

F4EBEA

Achromatopsia

989898

BBBBBB

C8C8C8

DCDCDC

E3E3E3

Shades & Tints Shades & Tints

#8C9F93

Dark

Light

#81D3DB

Dark

Light

#7BE8EE

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8c9f93;
  --color-2: #81d3db;
  --color-3: #7be8ee;
  --color-4: #c7e2f2;
  --color-5: #f6d4fd;
}

SCSS

$color-1: #8c9f93;
$color-2: #81d3db;
$color-3: #7be8ee;
$color-4: #c7e2f2;
$color-5: #f6d4fd;

TAILWIND

colors: {
  'brand-1': '#8c9f93',
  'brand-2': '#81d3db',
  'brand-3': '#7be8ee',
  'brand-4': '#c7e2f2',
  'brand-5': '#f6d4fd',
}

RGB Array

[140, 159, 147], [129, 211, 219], [123, 232, 238], [199, 226, 242], [246, 212, 253]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #8C9F93, #81D3DB, #7BE8EE, #C7E2F2, #F6D4FD 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: #8c9f93; --color-2: #81d3db; --color-3: #7be8ee; --color-4: #c7e2f2; --color-5: #f6d4fd. 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 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