#CCF9E9 + #B2F7E7 + #5FFFD9 + #87B2A8 + #8EA39E · pastel - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

GentleSoothingSweetCool

Industry INDUSTRY

Kids & BabyBeautyLifestyle

UI Context UI CONTEXT

E-commerceSocial PostIllustration

Color Details Color Details

#CCF9E9

Jade · Lavender · Mint Green

HEX

#CCF9E9

RGB

rgb(204, 249, 233)

HSL

hsl(159, 79%, 89%)

HSB

hsb(159, 18%, 98%)

CMYK

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

Oklch

oklch(94.6% 0.051 171.6)

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

#B2F7E7

Jade · LightBlue · Glacier Blue

HEX

#B2F7E7

RGB

rgb(178, 247, 231)

HSL

hsl(166, 81%, 83%)

HSB

hsb(166, 28%, 97%)

CMYK

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

Oklch

oklch(92.6% 0.072 178.6)

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

#5FFFD9

Jade · Turquoise · Lake Green

HEX

#5FFFD9

RGB

rgb(95, 255, 217)

HSL

hsl(166, 100%, 69%)

HSB

hsb(166, 63%, 100%)

CMYK

cmyk(63%, 0%, 15%, 0%)

Oklch

oklch(90.6% 0.144 174.2)

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

#87B2A8

Jade · DarkSeaGreen · Lake Green

HEX

#87B2A8

RGB

rgb(135, 178, 168)

HSL

hsl(166, 22%, 61%)

HSB

hsb(166, 24%, 70%)

CMYK

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

Oklch

oklch(73.0% 0.048 179.0)

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

#8EA39E

Mineral Blue · DarkSeaGreen · Lake Green

HEX

#8EA39E

RGB

rgb(142, 163, 158)

HSL

hsl(166, 10%, 60%)

HSB

hsb(166, 13%, 64%)

CMYK

cmyk(13%, 0%, 3%, 36%)

Oklch

oklch(69.8% 0.025 179.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CCF9E9

F9CDDC

Analogous

CDF9D3

CCF9E9

CDF2F9

Triadic

CCF9E9

EACDF9

F9EACD

Split-Comp.

CCF9E9

F9CDF2

F9D3CD

Tetradic

CCF9E9

D3CDF9

F9CDDC

F2F9CD

Contrast Matrix WCAG 2.1 Contrast

CCF9E9	B2F7E7	5FFFD9	87B2A8	8EA39E
—	1.1 Fail	1.1 Fail	2.0 Fail	2.3 Fail
1.1 Fail	—	1.0 Fail	1.9 Fail	2.2 Fail
1.1 Fail	1.0 Fail	—	1.9 Fail	2.1 Fail
2.0 Fail	1.9 Fail	1.9 Fail	—	1.1 Fail
2.3 Fail	2.2 Fail	2.1 Fail	1.1 Fail	—

White BG

1.1Fail

1.2Fail

1.3Fail

2.3Fail

2.7Fail

Black BG

18.3AAA

17.4AAA

16.8AAA

9.0AAA

7.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DFE0ED

D0D0EB

A4A6E2

9A9AAA

97979F

Deuteranopia

DDDAEE

CCC7EC

9B8FE4

9794AB

9694A0

Tritanopia

CEF0F1

B5EEEF

67E9EB

89ACAD

8FA0A0

Achromatopsia

EAEAEA

E1E1E1

CBCBCB

A4A4A4

9C9C9C

Shades & Tints Shades & Tints

#CCF9E9

Dark

Light

#B2F7E7

Dark

Light

#5FFFD9

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ccf9e9;
  --color-2: #b2f7e7;
  --color-3: #5fffd9;
  --color-4: #87b2a8;
  --color-5: #8ea39e;
}

SCSS

$color-1: #ccf9e9;
$color-2: #b2f7e7;
$color-3: #5fffd9;
$color-4: #87b2a8;
$color-5: #8ea39e;

TAILWIND

colors: {
  'brand-1': '#ccf9e9',
  'brand-2': '#b2f7e7',
  'brand-3': '#5fffd9',
  'brand-4': '#87b2a8',
  'brand-5': '#8ea39e',
}

RGB Array

[204, 249, 233], [178, 247, 231], [95, 255, 217], [135, 178, 168], [142, 163, 158]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #CCF9E9, #B2F7E7, #5FFFD9, #87B2A8, #8EA39E 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: #ccf9e9; --color-2: #b2f7e7; --color-3: #5fffd9; --color-4: #87b2a8; --color-5: #8ea39e. 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 pastel-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