#B2E8B8 + #D0E7B2 + #BED2AB + #F0F4CD + #D9ED93 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryClean

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B2E8B8

Emerald · Silver · Apple Green

HEX

#B2E8B8

RGB

rgb(178, 232, 184)

HSL

hsl(127, 54%, 80%)

HSB

hsb(127, 23%, 91%)

CMYK

cmyk(23%, 0%, 21%, 9%)

Oklch

oklch(88.1% 0.086 147.8)

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

#D0E7B2

Willow Green · Wheat · Apple Green

HEX

#D0E7B2

RGB

rgb(208, 231, 178)

HSL

hsl(86, 52%, 80%)

HSB

hsb(86, 23%, 91%)

CMYK

cmyk(10%, 0%, 23%, 9%)

Oklch

oklch(89.8% 0.074 126.9)

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

#BED2AB

Celadon · Silver · Apple Green

HEX

#BED2AB

RGB

rgb(190, 210, 171)

HSL

hsl(91, 30%, 75%)

HSB

hsb(91, 19%, 82%)

CMYK

cmyk(10%, 0%, 19%, 18%)

Oklch

oklch(83.8% 0.057 129.7)

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

#F0F4CD

Fresh Green · Beige · Lemon Cream

HEX

#F0F4CD

RGB

rgb(240, 244, 205)

HSL

hsl(66, 64%, 88%)

HSB

hsb(66, 16%, 96%)

CMYK

cmyk(2%, 0%, 16%, 4%)

Oklch

oklch(95.4% 0.051 112.1)

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

#D9ED93

Willow Green · Khaki · Apple Green

HEX

#D9ED93

RGB

rgb(217, 237, 147)

HSL

hsl(73, 71%, 75%)

HSB

hsb(73, 38%, 93%)

CMYK

cmyk(8%, 0%, 38%, 7%)

Oklch

oklch(91.1% 0.116 119.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B2E8B8

E8B0E1

Analogous

C6E8B0

B2E8B8

B0E8D2

Triadic

B2E8B8

B7B0E8

E8B7B0

Split-Comp.

B2E8B8

D2B0E8

E8B0C6

Tetradic

B2E8B8

B0C6E8

E8B0E1

E8D2B0

Contrast Matrix WCAG 2.1 Contrast

B2E8B8	D0E7B2	BED2AB	F0F4CD	D9ED93
—	1.0 Fail	1.2 Fail	1.2 Fail	1.1 Fail
1.0 Fail	—	1.2 Fail	1.2 Fail	1.0 Fail
1.2 Fail	1.2 Fail	—	1.4 Fail	1.3 Fail
1.2 Fail	1.2 Fail	1.4 Fail	—	1.1 Fail
1.1 Fail	1.0 Fail	1.3 Fail	1.1 Fail	—

White BG

1.4Fail

1.3Fail

1.6Fail

1.1Fail

1.3Fail

Black BG

15.1AAA

15.8AAA

13.0AAA

18.5AAA

16.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C9CAC4

DADABF

C7C7B4

F2F2D6

E2E2A9

Deuteranopia

C6C2C6

D9D7C2

C6C4B7

F2F1D9

E1DFAE

Tritanopia

B5CDCF

D1C9CB

BFBCBE

F0DEE0

DABABE

Achromatopsia

D2D2D2

DADADA

C8C8C8

EEEEEE

DDDDDD

Shades & Tints Shades & Tints

#B2E8B8

Dark

Light

#D0E7B2

Dark

Light

#BED2AB

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b2e8b8;
  --color-2: #d0e7b2;
  --color-3: #bed2ab;
  --color-4: #f0f4cd;
  --color-5: #d9ed93;
}

SCSS

$color-1: #b2e8b8;
$color-2: #d0e7b2;
$color-3: #bed2ab;
$color-4: #f0f4cd;
$color-5: #d9ed93;

TAILWIND

colors: {
  'brand-1': '#b2e8b8',
  'brand-2': '#d0e7b2',
  'brand-3': '#bed2ab',
  'brand-4': '#f0f4cd',
  'brand-5': '#d9ed93',
}

RGB Array

[178, 232, 184], [208, 231, 178], [190, 210, 171], [240, 244, 205], [217, 237, 147]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B2E8B8, #D0E7B2, #BED2AB, #F0F4CD, #D9ED93 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: #b2e8b8; --color-2: #d0e7b2; --color-3: #bed2ab; --color-4: #f0f4cd; --color-5: #d9ed93. 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