#88AABB + #8BC6AF + #A1D8A5 + #CAE78B + #DEF482 · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#88AABB

Sky Blue · DarkGray · Cobalt Blue

HEX

#88AABB

RGB

rgb(136, 170, 187)

HSL

hsl(200, 27%, 63%)

HSB

hsb(200, 27%, 73%)

CMYK

cmyk(27%, 9%, 0%, 27%)

Oklch

oklch(71.9% 0.045 229.8)

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

#8BC6AF

Jade · DarkSeaGreen · Apple Green

HEX

#8BC6AF

RGB

rgb(139, 198, 175)

HSL

hsl(157, 34%, 66%)

HSB

hsb(157, 30%, 78%)

CMYK

cmyk(30%, 0%, 12%, 22%)

Oklch

oklch(77.9% 0.069 168.3)

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

#A1D8A5

Celadon · LightGreen · Apple Green

HEX

#A1D8A5

RGB

rgb(161, 216, 165)

HSL

hsl(124, 41%, 74%)

HSB

hsb(124, 25%, 85%)

CMYK

cmyk(25%, 0%, 24%, 15%)

Oklch

oklch(83.1% 0.091 146.6)

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

#CAE78B

Willow Green · Khaki · Apple Green

HEX

#CAE78B

RGB

rgb(202, 231, 139)

HSL

hsl(79, 66%, 73%)

HSB

hsb(79, 40%, 91%)

CMYK

cmyk(13%, 0%, 40%, 9%)

Oklch

oklch(88.6% 0.122 123.2)

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

#DEF482

Willow Green · Khaki · Apple Green

HEX

#DEF482

RGB

rgb(222, 244, 130)

HSL

hsl(72, 84%, 73%)

HSB

hsb(72, 47%, 96%)

CMYK

cmyk(9%, 0%, 47%, 4%)

Oklch

oklch(92.7% 0.142 118.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

88AABB

BA9887

Analogous

87BAB2

88AABB

8790BA

Triadic

88AABB

BA87A9

A9BA87

Split-Comp.

88AABB

BA8790

BAB287

Tetradic

88AABB

B287BA

BA9887

90BA87

Contrast Matrix WCAG 2.1 Contrast

88AABB	8BC6AF	A1D8A5	CAE78B	DEF482
—	1.3 Fail	1.5 Fail	1.8 Fail	2.0 Fail
1.3 Fail	—	1.2 Fail	1.4 Fail	1.6 Fail
1.5 Fail	1.2 Fail	—	1.2 Fail	1.3 Fail
1.8 Fail	1.4 Fail	1.2 Fail	—	1.1 Fail
2.0 Fail	1.6 Fail	1.3 Fail	1.1 Fail	—

White BG

2.5Fail

1.9Fail

1.6Fail

1.4Fail

1.2Fail

Black BG

8.5AAA

10.8AAA

12.9AAA

15.3AAA

17.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9797B7

A5A5B5

B9B9B1

D7D7A1

E8E89E

Deuteranopia

9592B6

A19DB6

B6B2B4

D5D3A7

E6E5A4

Tritanopia

8AB4B3

8EB9BA

A4BBBD

CBB3B7

DFB3B8

Achromatopsia

A2A2A2

B2B2B2

C2C2C2

D4D4D4

E0E0E0

Shades & Tints Shades & Tints

#88AABB

Dark

Light

#8BC6AF

Dark

Light

#A1D8A5

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #88aabb;
  --color-2: #8bc6af;
  --color-3: #a1d8a5;
  --color-4: #cae78b;
  --color-5: #def482;
}

SCSS

$color-1: #88aabb;
$color-2: #8bc6af;
$color-3: #a1d8a5;
$color-4: #cae78b;
$color-5: #def482;

TAILWIND

colors: {
  'brand-1': '#88aabb',
  'brand-2': '#8bc6af',
  'brand-3': '#a1d8a5',
  'brand-4': '#cae78b',
  'brand-5': '#def482',
}

RGB Array

[136, 170, 187], [139, 198, 175], [161, 216, 165], [202, 231, 139], [222, 244, 130]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #88AABB, #8BC6AF, #A1D8A5, #CAE78B, #DEF482 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: #88aabb; --color-2: #8bc6af; --color-3: #a1d8a5; --color-4: #cae78b; --color-5: #def482. 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