#BBF6A6 + #C4E3B9 + #F2F6F0 + #DBE1D8 + #B7C6B1 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryClean

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#BBF6A6

Emerald · LightGreen · Mint Green

HEX

#BBF6A6

RGB

rgb(187, 246, 166)

HSL

hsl(104, 82%, 81%)

HSB

hsb(104, 33%, 96%)

CMYK

cmyk(24%, 0%, 33%, 4%)

Oklch

oklch(91.4% 0.121 137.7)

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

#C4E3B9

Celadon · LightGray · Mint Green

HEX

#C4E3B9

RGB

rgb(196, 227, 185)

HSL

hsl(104, 43%, 81%)

HSB

hsb(104, 19%, 89%)

CMYK

cmyk(14%, 0%, 19%, 11%)

Oklch

oklch(88.2% 0.065 137.5)

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

#F2F6F0

Celadon · SeaShell · Mint Green

HEX

#F2F6F0

RGB

rgb(242, 246, 240)

HSL

hsl(100, 25%, 95%)

HSB

hsb(100, 2%, 96%)

CMYK

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

Oklch

oklch(96.8% 0.009 134.9)

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

#DBE1D8

Celadon · LightGray · Mint Green

HEX

#DBE1D8

RGB

rgb(219, 225, 216)

HSL

hsl(100, 13%, 86%)

HSB

hsb(100, 4%, 88%)

CMYK

cmyk(3%, 0%, 4%, 12%)

Oklch

oklch(90.3% 0.014 134.9)

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

#B7C6B1

Celadon · Silver · Apple Green

HEX

#B7C6B1

RGB

rgb(183, 198, 177)

HSL

hsl(103, 16%, 74%)

HSB

hsb(103, 11%, 78%)

CMYK

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

Oklch

oklch(80.9% 0.033 136.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BBF6A6

E1A7F6

Analogous

E4F6A7

BBF6A6

A7F6B9

Triadic

BBF6A6

A7BCF6

F6A7BC

Split-Comp.

BBF6A6

B9A7F6

F6A7E4

Tetradic

BBF6A6

A7E4F6

E1A7F6

F6B9A7

Contrast Matrix WCAG 2.1 Contrast

BBF6A6	C4E3B9	F2F6F0	DBE1D8	B7C6B1
—	1.1 Fail	1.1 Fail	1.1 Fail	1.4 Fail
1.1 Fail	—	1.3 Fail	1.0 Fail	1.3 Fail
1.1 Fail	1.3 Fail	—	1.2 Fail	1.6 Fail
1.1 Fail	1.0 Fail	1.2 Fail	—	1.3 Fail
1.4 Fail	1.3 Fail	1.6 Fail	1.3 Fail	—

White BG

1.2Fail

1.4Fail

1.1Fail

1.3Fail

1.8Fail

Black BG

16.8AAA

15.0AAA

19.2AAA

15.8AAA

11.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D5D5B9

D1D2C3

F4F4F1

DEDEDA

BDBEB6

Deuteranopia

D1CDBE

D0CDC6

F4F3F2

DDDDDB

BDBCB7

Tritanopia

BEC9CC

C6CBCD

F2F3F3

DBDCDC

B8BABB

Achromatopsia

DBDBDB

D5D5D5

F4F4F4

DEDEDE

BFBFBF

Shades & Tints Shades & Tints

#BBF6A6

Dark

Light

#C4E3B9

Dark

Light

#F2F6F0

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bbf6a6;
  --color-2: #c4e3b9;
  --color-3: #f2f6f0;
  --color-4: #dbe1d8;
  --color-5: #b7c6b1;
}

SCSS

$color-1: #bbf6a6;
$color-2: #c4e3b9;
$color-3: #f2f6f0;
$color-4: #dbe1d8;
$color-5: #b7c6b1;

TAILWIND

colors: {
  'brand-1': '#bbf6a6',
  'brand-2': '#c4e3b9',
  'brand-3': '#f2f6f0',
  'brand-4': '#dbe1d8',
  'brand-5': '#b7c6b1',
}

RGB Array

[187, 246, 166], [196, 227, 185], [242, 246, 240], [219, 225, 216], [183, 198, 177]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BBF6A6, #C4E3B9, #F2F6F0, #DBE1D8, #B7C6B1 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: #bbf6a6; --color-2: #c4e3b9; --color-3: #f2f6f0; --color-4: #dbe1d8; --color-5: #b7c6b1. 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