#8EE8D4 + #8BE0D8 + #A4D0EE + #B9C4E3 + #BAC3D5 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#8EE8D4

Jade · SkyBlue · Lake Green

HEX

#8EE8D4

RGB

rgb(142, 232, 212)

HSL

hsl(167, 66%, 73%)

HSB

hsb(167, 39%, 91%)

CMYK

cmyk(39%, 0%, 9%, 9%)

Oklch

oklch(86.9% 0.092 178.2)

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

#8BE0D8

Jade · SkyBlue · Lake Green

HEX

#8BE0D8

RGB

rgb(139, 224, 216)

HSL

hsl(174, 58%, 71%)

HSB

hsb(174, 38%, 88%)

CMYK

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

Oklch

oklch(85.0% 0.084 188.1)

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

#A4D0EE

Sky Blue · LightBlue · Cobalt Blue

HEX

#A4D0EE

RGB

rgb(164, 208, 238)

HSL

hsl(204, 69%, 79%)

HSB

hsb(204, 31%, 93%)

CMYK

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

Oklch

oklch(83.6% 0.063 238.3)

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

#B9C4E3

Azure · LightSteelBlue · Sky Blue

HEX

#B9C4E3

RGB

rgb(185, 196, 227)

HSL

hsl(224, 43%, 81%)

HSB

hsb(224, 19%, 89%)

CMYK

cmyk(19%, 14%, 0%, 11%)

Oklch

oklch(82.2% 0.045 269.9)

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

#BAC3D5

Azure · LightSteelBlue · Cobalt Blue

HEX

#BAC3D5

RGB

rgb(186, 195, 213)

HSL

hsl(220, 24%, 78%)

HSB

hsb(220, 13%, 84%)

CMYK

cmyk(13%, 8%, 0%, 16%)

Oklch

oklch(81.6% 0.027 264.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8EE8D4

E88DA0

Analogous

8DE8A6

8EE8D4

8DCEE8

Triadic

8EE8D4

D48DE8

E8D48D

Split-Comp.

8EE8D4

E88DCE

E8A68D

Tetradic

8EE8D4

A68DE8

E88DA0

CEE88D

Contrast Matrix WCAG 2.1 Contrast

8EE8D4	8BE0D8	A4D0EE	B9C4E3	BAC3D5
—	1.1 Fail	1.1 Fail	1.2 Fail	1.2 Fail
1.1 Fail	—	1.1 Fail	1.1 Fail	1.2 Fail
1.1 Fail	1.1 Fail	—	1.1 Fail	1.1 Fail
1.2 Fail	1.1 Fail	1.1 Fail	—	1.0 Fail
1.2 Fail	1.2 Fail	1.1 Fail	1.0 Fail	—

White BG

1.4Fail

1.5Fail

1.6Fail

1.7Fail

1.8Fail

Black BG

14.6AAA

13.8AAA

12.8AAA

12.1AAA

11.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B5B6D9

B0B1DA

B7B7E7

BEBEDB

BEBED1

Deuteranopia

B0A9DA

ABA5DA

B5B1E5

BDBCDA

BDBDD0

Tritanopia

93DDDE

8FDBDC

A6E1E0

BAD6D4

BACDCC

Achromatopsia

CBCBCB

C6C6C6

C4C4C4

C2C2C2

Shades & Tints Shades & Tints

#8EE8D4

Dark

Light

#8BE0D8

Dark

Light

#A4D0EE

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8ee8d4;
  --color-2: #8be0d8;
  --color-3: #a4d0ee;
  --color-4: #b9c4e3;
  --color-5: #bac3d5;
}

SCSS

$color-1: #8ee8d4;
$color-2: #8be0d8;
$color-3: #a4d0ee;
$color-4: #b9c4e3;
$color-5: #bac3d5;

TAILWIND

colors: {
  'brand-1': '#8ee8d4',
  'brand-2': '#8be0d8',
  'brand-3': '#a4d0ee',
  'brand-4': '#b9c4e3',
  'brand-5': '#bac3d5',
}

RGB Array

[142, 232, 212], [139, 224, 216], [164, 208, 238], [185, 196, 227], [186, 195, 213]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8EE8D4, #8BE0D8, #A4D0EE, #B9C4E3, #BAC3D5 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: #8ee8d4; --color-2: #8be0d8; --color-3: #a4d0ee; --color-4: #b9c4e3; --color-5: #bac3d5. 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