#52C7B2 + #16E3BF + #8FE39E + #C2DAC9 + #B6BCC1 · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#52C7B2

Mineral Blue · MediumAquaMarine · Lake Green

HEX

#52C7B2

RGB

rgb(82, 199, 178)

HSL

hsl(169, 51%, 55%)

HSB

hsb(169, 59%, 78%)

CMYK

cmyk(59%, 0%, 11%, 22%)

Oklch

oklch(75.7% 0.110 179.4)

Traditional「Mineral Blue」· Paint「Lake Green」· Creative Blush Sunrise

#16E3BF

Mineral Blue · DarkTurquoise · Mint Ice

HEX

#16E3BF

RGB

rgb(22, 227, 191)

HSL

hsl(169, 82%, 49%)

HSB

hsb(169, 90%, 89%)

CMYK

cmyk(90%, 0%, 16%, 11%)

Oklch

oklch(81.9% 0.151 175.4)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#8FE39E

Emerald · LightGreen · Apple Green

HEX

#8FE39E

RGB

rgb(143, 227, 158)

HSL

hsl(131, 60%, 73%)

HSB

hsb(131, 37%, 89%)

CMYK

cmyk(37%, 0%, 30%, 11%)

Oklch

oklch(84.4% 0.126 148.8)

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

#C2DAC9

Celadon · LightGray · Mint Green

HEX

#C2DAC9

RGB

rgb(194, 218, 201)

HSL

hsl(138, 24%, 81%)

HSB

hsb(138, 11%, 85%)

CMYK

cmyk(11%, 0%, 8%, 15%)

Oklch

oklch(86.6% 0.035 154.8)

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

#B6BCC1

Sky Blue · Silver · Pearl Gray

HEX

#B6BCC1

RGB

rgb(182, 188, 193)

HSL

hsl(207, 8%, 74%)

HSB

hsb(207, 6%, 76%)

CMYK

cmyk(6%, 3%, 0%, 24%)

Oklch

oklch(79.2% 0.010 242.9)

Traditional「Sky Blue」· Paint「Pearl Gray」· Creative Silver Lining

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

52C7B2

C75267

Analogous

52C777

52C7B2

52A2C7

Triadic

52C7B2

B152C7

C7B152

Split-Comp.

52C7B2

C752A2

C77752

Tetradic

52C7B2

7752C7

C75267

A2C752

Contrast Matrix WCAG 2.1 Contrast

52C7B2	16E3BF	8FE39E	C2DAC9	B6BCC1
—	1.3 Fail	1.3 Fail	1.4 Fail	1.1 Fail
1.3 Fail	—	1.1 Fail	1.1 Fail	1.2 Fail
1.3 Fail	1.1 Fail	—	1.0 Fail	1.2 Fail
1.4 Fail	1.1 Fail	1.0 Fail	—	1.3 Fail
1.1 Fail	1.2 Fail	1.2 Fail	1.3 Fail	—

White BG

2.1Fail

1.6Fail

1.5Fail

1.9Fail

Black BG

10.2AAA

12.8AAA

13.6AAA

14.2AAA

11.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8586B7

6F71C8

B3B4AF

CCCDCD

B9B9C0

Deuteranopia

7E75B8

6354CA

AFA8B3

CBC9CE

B8B8C0

Tritanopia

58BBBC

20CFD0

93BCBF

C3D0D1

B6BFBF

Achromatopsia

A2A2A2

C2C2C2

D1D1D1

BBBBBB

Shades & Tints Shades & Tints

#52C7B2

Dark

Light

#16E3BF

Dark

Light

#8FE39E

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #52c7b2;
  --color-2: #16e3bf;
  --color-3: #8fe39e;
  --color-4: #c2dac9;
  --color-5: #b6bcc1;
}

SCSS

$color-1: #52c7b2;
$color-2: #16e3bf;
$color-3: #8fe39e;
$color-4: #c2dac9;
$color-5: #b6bcc1;

TAILWIND

colors: {
  'brand-1': '#52c7b2',
  'brand-2': '#16e3bf',
  'brand-3': '#8fe39e',
  'brand-4': '#c2dac9',
  'brand-5': '#b6bcc1',
}

RGB Array

[82, 199, 178], [22, 227, 191], [143, 227, 158], [194, 218, 201], [182, 188, 193]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #52C7B2, #16E3BF, #8FE39E, #C2DAC9, #B6BCC1 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: #52c7b2; --color-2: #16e3bf; --color-3: #8fe39e; --color-4: #c2dac9; --color-5: #b6bcc1. 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