#81DDE6 + #8CCDC9 + #ABD4CB + #F2EBE1 + #F1DED4 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#81DDE6

Sky Blue · SkyBlue · Lake Green

HEX

#81DDE6

RGB

rgb(129, 221, 230)

HSL

hsl(185, 67%, 70%)

HSB

hsb(185, 44%, 90%)

CMYK

cmyk(44%, 4%, 0%, 10%)

Oklch

oklch(84.4% 0.089 203.7)

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

#8CCDC9

Jade · SkyBlue · Lake Green

HEX

#8CCDC9

RGB

rgb(140, 205, 201)

HSL

hsl(176, 39%, 68%)

HSB

hsb(176, 32%, 80%)

CMYK

cmyk(32%, 0%, 2%, 20%)

Oklch

oklch(80.4% 0.066 191.1)

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

#ABD4CB

Jade · LightSteelBlue · Lake Green

HEX

#ABD4CB

RGB

rgb(171, 212, 203)

HSL

hsl(167, 32%, 75%)

HSB

hsb(167, 19%, 83%)

CMYK

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

Oklch

oklch(83.8% 0.045 180.3)

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

#F2EBE1

Goose Yellow · Linen · Peach Orange

HEX

#F2EBE1

RGB

rgb(242, 235, 225)

HSL

hsl(35, 40%, 92%)

HSB

hsb(35, 7%, 95%)

CMYK

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

Oklch

oklch(94.3% 0.015 77.1)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#F1DED4

Apricot · Bisque · Peach Orange

HEX

#F1DED4

RGB

rgb(241, 222, 212)

HSL

hsl(21, 51%, 89%)

HSB

hsb(21, 12%, 95%)

CMYK

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

Oklch

oklch(91.3% 0.025 49.7)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

81DDE6

E6887F

Analogous

7FE6BB

81DDE6

7FAAE6

Triadic

81DDE6

E67FDD

DDE67F

Split-Comp.

81DDE6

E67FAA

E6BB7F

Tetradic

81DDE6

BB7FE6

E6887F

AAE67F

Contrast Matrix WCAG 2.1 Contrast

81DDE6	8CCDC9	ABD4CB	F2EBE1	F1DED4
—	1.1 Fail	1.0 Fail	1.3 Fail	1.2 Fail
1.1 Fail	—	1.1 Fail	1.5 Fail	1.4 Fail
1.0 Fail	1.1 Fail	—	1.4 Fail	1.2 Fail
1.3 Fail	1.5 Fail	1.4 Fail	—	1.1 Fail
1.2 Fail	1.4 Fail	1.2 Fail	1.1 Fail	—

White BG

1.6Fail

1.8Fail

1.6Fail

1.2Fail

1.3Fail

Black BG

13.4AAA

11.7AAA

13.0AAA

17.7AAA

16.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A9AAE4

A8A9CA

BDBDCD

EFEFE3

E9E9D6

Deuteranopia

A49DE3

A4A0CA

BAB7CE

EFF0E4

EAEBD7

Tritanopia

86E2E2

8FCBCB

ADCFCF

F2E5E6

F0D8D9

Achromatopsia

C3C3C3

B9B9B9

C7C7C7

ECECEC

E3E3E3

Shades & Tints Shades & Tints

#81DDE6

Dark

Light

#8CCDC9

Dark

Light

#ABD4CB

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #81dde6;
  --color-2: #8ccdc9;
  --color-3: #abd4cb;
  --color-4: #f2ebe1;
  --color-5: #f1ded4;
}

SCSS

$color-1: #81dde6;
$color-2: #8ccdc9;
$color-3: #abd4cb;
$color-4: #f2ebe1;
$color-5: #f1ded4;

TAILWIND

colors: {
  'brand-1': '#81dde6',
  'brand-2': '#8ccdc9',
  'brand-3': '#abd4cb',
  'brand-4': '#f2ebe1',
  'brand-5': '#f1ded4',
}

RGB Array

[129, 221, 230], [140, 205, 201], [171, 212, 203], [242, 235, 225], [241, 222, 212]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #81DDE6, #8CCDC9, #ABD4CB, #F2EBE1, #F1DED4 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: #81dde6; --color-2: #8ccdc9; --color-3: #abd4cb; --color-4: #f2ebe1; --color-5: #f1ded4. 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