#BBF86B + #E8E8BF + #B0F2C0 + #DFDFDD + #F6CBF6 · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGrounded

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#BBF86B

Willow Green · LightGreen · Apple Green

HEX

#BBF86B

RGB

rgb(187, 248, 107)

HSL

hsl(86, 91%, 70%)

HSB

hsb(86, 57%, 97%)

CMYK

cmyk(25%, 0%, 57%, 3%)

Oklch

oklch(91.0% 0.182 129.1)

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

#E8E8BF

Fresh Green · Wheat · Lemon Cream

HEX

#E8E8BF

RGB

rgb(232, 232, 191)

HSL

hsl(60, 47%, 83%)

HSB

hsb(60, 18%, 91%)

CMYK

cmyk(0%, 0%, 18%, 9%)

Oklch

oklch(92.1% 0.054 107.4)

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

#B0F2C0

Emerald · LightBlue · Mint Green

HEX

#B0F2C0

RGB

rgb(176, 242, 192)

HSL

hsl(135, 72%, 82%)

HSB

hsb(135, 27%, 95%)

CMYK

cmyk(27%, 0%, 21%, 5%)

Oklch

oklch(90.4% 0.095 151.7)

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

#DFDFDD

Plain White · LightGray · Cloud White

HEX

#DFDFDD

RGB

rgb(223, 223, 221)

HSL

hsl(60, 3%, 87%)

HSB

hsb(60, 1%, 87%)

CMYK

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

Oklch

oklch(90.3% 0.003 106.5)

Traditional「Plain White」· Paint「Cloud White」· Creative Silver Lining

#F6CBF6

Mauve · Lavender · Lavender

HEX

#F6CBF6

RGB

rgb(246, 203, 246)

HSL

hsl(300, 70%, 88%)

HSB

hsb(300, 17%, 96%)

CMYK

cmyk(0%, 17%, 0%, 4%)

Oklch

oklch(89.2% 0.074 326.2)

Traditional「Mauve」· Paint「Lavender」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BBF86B

A96DF8

Analogous

F8EF6D

BBF86B

76F86D

Triadic

BBF86B

6DBCF8

F86DBC

Split-Comp.

BBF86B

6D76F8

EF6DF8

Tetradic

BBF86B

6DF8EF

A96DF8

F86D76

Contrast Matrix WCAG 2.1 Contrast

BBF86B	E8E8BF	B0F2C0	DFDFDD	F6CBF6
—	1.0 Fail	1.0 Fail	1.1 Fail	1.1 Fail
1.0 Fail	—	1.0 Fail	1.1 Fail	1.1 Fail
1.0 Fail	1.0 Fail	—	1.0 Fail	1.1 Fail
1.1 Fail	1.1 Fail	1.0 Fail	—	1.1 Fail
1.1 Fail	1.1 Fail	1.1 Fail	1.1 Fail	—

White BG

1.3Fail

1.4Fail

Black BG

16.8AAA

16.7AAA

16.3AAA

15.7AAA

14.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D5D68D

E8E8C9

CDCDCC

DFDFDD

E3E3EC

Deuteranopia

D2CD95

E8E8CB

C9C4CF

DFDFDE

E6E9E9

Tritanopia

BEA8AE

E8D1D2

B3D6D8

DFDEDE

F4E3E2

Achromatopsia

D6D6D6

E3E3E3

D9D9D9

DFDFDF

DDDDDD

Shades & Tints Shades & Tints

#BBF86B

Dark

Light

#E8E8BF

Dark

Light

#B0F2C0

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bbf86b;
  --color-2: #e8e8bf;
  --color-3: #b0f2c0;
  --color-4: #dfdfdd;
  --color-5: #f6cbf6;
}

SCSS

$color-1: #bbf86b;
$color-2: #e8e8bf;
$color-3: #b0f2c0;
$color-4: #dfdfdd;
$color-5: #f6cbf6;

TAILWIND

colors: {
  'brand-1': '#bbf86b',
  'brand-2': '#e8e8bf',
  'brand-3': '#b0f2c0',
  'brand-4': '#dfdfdd',
  'brand-5': '#f6cbf6',
}

RGB Array

[187, 248, 107], [232, 232, 191], [176, 242, 192], [223, 223, 221], [246, 203, 246]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #BBF86B, #E8E8BF, #B0F2C0, #DFDFDD, #F6CBF6 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: #bbf86b; --color-2: #e8e8bf; --color-3: #b0f2c0; --color-4: #dfdfdd; --color-5: #f6cbf6. 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 nature-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