#B2F7DD + #87D6D0 + #CEF7B2 + #DCDEB4 + #B9BAA2 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B2F7DD

Jade · LightBlue · Mint Green

HEX

#B2F7DD

RGB

rgb(178, 247, 221)

HSL

hsl(157, 81%, 83%)

HSB

hsb(157, 28%, 97%)

CMYK

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

Oklch

oklch(92.3% 0.078 169.3)

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

#87D6D0

Jade · SkyBlue · Lake Green

HEX

#87D6D0

RGB

rgb(135, 214, 208)

HSL

hsl(175, 49%, 68%)

HSB

hsb(175, 37%, 84%)

CMYK

cmyk(37%, 0%, 3%, 16%)

Oklch

oklch(82.3% 0.078 189.6)

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

#CEF7B2

Emerald · Wheat · Mint Green

HEX

#CEF7B2

RGB

rgb(206, 247, 178)

HSL

hsl(96, 81%, 83%)

HSB

hsb(96, 28%, 97%)

CMYK

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

Oklch

oklch(93.0% 0.100 133.0)

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

#DCDEB4

Fresh Green · Wheat · Lemon Cream

HEX

#DCDEB4

RGB

rgb(220, 222, 180)

HSL

hsl(63, 39%, 79%)

HSB

hsb(63, 19%, 87%)

CMYK

cmyk(1%, 0%, 19%, 13%)

Oklch

oklch(88.8% 0.056 109.7)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#B9BAA2

Fresh Green · DarkGray · Sunflower

HEX

#B9BAA2

RGB

rgb(185, 186, 162)

HSL

hsl(62, 15%, 68%)

HSB

hsb(62, 13%, 73%)

CMYK

cmyk(1%, 0%, 13%, 27%)

Oklch

oklch(78.2% 0.033 109.1)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B2F7DD

F7B1CB

Analogous

B1F7B9

B2F7DD

B1EFF7

Triadic

B2F7DD

DCB1F7

F7DCB1

Split-Comp.

B2F7DD

F7B1EF

F7B9B1

Tetradic

B2F7DD

B9B1F7

F7B1CB

EFF7B1

Contrast Matrix WCAG 2.1 Contrast

B2F7DD	87D6D0	CEF7B2	DCDEB4	B9BAA2
—	1.4 Fail	1.0 Fail	1.1 Fail	1.6 Fail
1.4 Fail	—	1.4 Fail	1.2 Fail	1.2 Fail
1.0 Fail	1.4 Fail	—	1.2 Fail	1.7 Fail
1.1 Fail	1.2 Fail	1.2 Fail	—	1.4 Fail
1.6 Fail	1.2 Fail	1.7 Fail	1.4 Fail	—

White BG

1.2Fail

1.7Fail

1.2Fail

1.4Fail

2.0Fail

Black BG

17.2AAA

12.6AAA

17.6AAA

15.2AAA

10.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D0D0E3

A9AAD1

E0E0C3

DDDDBE

B9B9A8

Deuteranopia

CCC7E5

A59FD2

DDDAC7

DDDDC1

B9B9A9

Tritanopia

B5E8E9

8BD3D3

D0D0D3

DCC6C8

B9ACAD

Achromatopsia

DFDFDF

BEBEBE

E3E3E3

D9D9D9

B7B7B7

Shades & Tints Shades & Tints

#B2F7DD

Dark

Light

#87D6D0

Dark

Light

#CEF7B2

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b2f7dd;
  --color-2: #87d6d0;
  --color-3: #cef7b2;
  --color-4: #dcdeb4;
  --color-5: #b9baa2;
}

SCSS

$color-1: #b2f7dd;
$color-2: #87d6d0;
$color-3: #cef7b2;
$color-4: #dcdeb4;
$color-5: #b9baa2;

TAILWIND

colors: {
  'brand-1': '#b2f7dd',
  'brand-2': '#87d6d0',
  'brand-3': '#cef7b2',
  'brand-4': '#dcdeb4',
  'brand-5': '#b9baa2',
}

RGB Array

[178, 247, 221], [135, 214, 208], [206, 247, 178], [220, 222, 180], [185, 186, 162]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B2F7DD, #87D6D0, #CEF7B2, #DCDEB4, #B9BAA2 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: #b2f7dd; --color-2: #87d6d0; --color-3: #cef7b2; --color-4: #dcdeb4; --color-5: #b9baa2. 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