#8FC4C0 + #C0C9A2 + #BAD0D8 + #C6DCE1 + #CEE9F9 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#8FC4C0

Jade · DarkGray · Lake Green

HEX

#8FC4C0

RGB

rgb(143, 196, 192)

HSL

hsl(175, 31%, 66%)

HSB

hsb(175, 27%, 77%)

CMYK

cmyk(27%, 0%, 2%, 23%)

Oklch

oklch(78.2% 0.055 190.2)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#C0C9A2

Willow Green · Silver · Apple Green

HEX

#C0C9A2

RGB

rgb(192, 201, 162)

HSL

hsl(74, 27%, 71%)

HSB

hsb(74, 19%, 79%)

CMYK

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

Oklch

oklch(81.9% 0.054 118.2)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#BAD0D8

Sky Blue · LightSteelBlue · Glacier Blue

HEX

#BAD0D8

RGB

rgb(186, 208, 216)

HSL

hsl(196, 28%, 79%)

HSB

hsb(196, 14%, 85%)

CMYK

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

Oklch

oklch(84.4% 0.026 221.6)

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

#C6DCE1

Sky Blue · LightGray · Glacier Blue

HEX

#C6DCE1

RGB

rgb(198, 220, 225)

HSL

hsl(191, 31%, 83%)

HSB

hsb(191, 12%, 88%)

CMYK

cmyk(12%, 2%, 0%, 12%)

Oklch

oklch(88.0% 0.025 212.9)

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

#CEE9F9

Sky Blue · Lavender · Sky Blue

HEX

#CEE9F9

RGB

rgb(206, 233, 249)

HSL

hsl(202, 78%, 89%)

HSB

hsb(202, 17%, 98%)

CMYK

cmyk(17%, 6%, 0%, 2%)

Oklch

oklch(91.9% 0.036 233.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8FC4C0

C38D92

Analogous

8DC3A4

8FC4C0

8DADC3

Triadic

8FC4C0

BF8DC3

C3BF8D

Split-Comp.

8FC4C0

C38DAD

C3A48D

Tetradic

8FC4C0

A48DC3

C38D92

ADC38D

Contrast Matrix WCAG 2.1 Contrast

8FC4C0	C0C9A2	BAD0D8	C6DCE1	CEE9F9
—	1.1 Fail	1.2 Fail	1.4 Fail	1.5 Fail
1.1 Fail	—	1.1 Fail	1.2 Fail	1.4 Fail
1.2 Fail	1.1 Fail	—	1.1 Fail	1.3 Fail
1.4 Fail	1.2 Fail	1.1 Fail	—	1.1 Fail
1.5 Fail	1.4 Fail	1.3 Fail	1.1 Fail	—

White BG

1.9Fail

1.7Fail

1.6Fail

1.4Fail

1.3Fail

Black BG

10.8AAA

12.1AAA

13.1AAA

14.7AAA

16.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A6A6C1

C4C4AB

C4C4D6

D0D0E0

DADAF5

Deuteranopia

A39FC1

C3C3AE

C2C1D6

CECDE0

D8D6F4

Tritanopia

92C2C2

C0B3B5

BBD5D4

C7DFDF

CFF2F1

Achromatopsia

B4B4B4

C2C2C2

CACACA

D6D6D6

E3E3E3

Shades & Tints Shades & Tints

#8FC4C0

Dark

Light

#C0C9A2

Dark

Light

#BAD0D8

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8fc4c0;
  --color-2: #c0c9a2;
  --color-3: #bad0d8;
  --color-4: #c6dce1;
  --color-5: #cee9f9;
}

SCSS

$color-1: #8fc4c0;
$color-2: #c0c9a2;
$color-3: #bad0d8;
$color-4: #c6dce1;
$color-5: #cee9f9;

TAILWIND

colors: {
  'brand-1': '#8fc4c0',
  'brand-2': '#c0c9a2',
  'brand-3': '#bad0d8',
  'brand-4': '#c6dce1',
  'brand-5': '#cee9f9',
}

RGB Array

[143, 196, 192], [192, 201, 162], [186, 208, 216], [198, 220, 225], [206, 233, 249]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8FC4C0, #C0C9A2, #BAD0D8, #C6DCE1, #CEE9F9 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: #8fc4c0; --color-2: #c0c9a2; --color-3: #bad0d8; --color-4: #c6dce1; --color-5: #cee9f9. 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