#B1BA85 + #4DB6AF + #8DCAA8 + #BDE3B1 + #E8F3A7 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B1BA85

Willow Green · Tan · Apple Green

HEX

#B1BA85

RGB

rgb(177, 186, 133)

HSL

hsl(70, 28%, 63%)

HSB

hsb(70, 28%, 73%)

CMYK

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

Oklch

oklch(76.9% 0.072 116.0)

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

#4DB6AF

Mineral Blue · CadetBlue · Lake Green

HEX

#4DB6AF

RGB

rgb(77, 182, 175)

HSL

hsl(176, 42%, 51%)

HSB

hsb(176, 58%, 71%)

CMYK

cmyk(58%, 0%, 4%, 29%)

Oklch

oklch(71.3% 0.097 189.2)

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

#8DCAA8

Celadon · DarkSeaGreen · Apple Green

HEX

#8DCAA8

RGB

rgb(141, 202, 168)

HSL

hsl(147, 37%, 67%)

HSB

hsb(147, 30%, 79%)

CMYK

cmyk(30%, 0%, 17%, 21%)

Oklch

oklch(78.8% 0.079 159.5)

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

#BDE3B1

Celadon · Silver · Apple Green

HEX

#BDE3B1

RGB

rgb(189, 227, 177)

HSL

hsl(106, 47%, 79%)

HSB

hsb(106, 22%, 89%)

CMYK

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

Oklch

oklch(87.6% 0.078 138.2)

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

#E8F3A7

Fresh Green · Wheat · Lemon Cream

HEX

#E8F3A7

RGB

rgb(232, 243, 167)

HSL

hsl(69, 76%, 80%)

HSB

hsb(69, 31%, 95%)

CMYK

cmyk(5%, 0%, 31%, 5%)

Oklch

oklch(93.8% 0.098 115.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B1BA85

8F86BB

Analogous

BBA986

B1BA85

98BB86

Triadic

B1BA85

86B2BB

BB86B2

Split-Comp.

B1BA85

8698BB

A986BB

Tetradic

B1BA85

86BBA9

8F86BB

BB8698

Contrast Matrix WCAG 2.1 Contrast

B1BA85	4DB6AF	8DCAA8	BDE3B1	E8F3A7
—	1.2 Fail	1.1 Fail	1.4 Fail	1.7 Fail
1.2 Fail	—	1.3 Fail	1.7 Fail	2.1 Fail
1.1 Fail	1.3 Fail	—	1.3 Fail	1.6 Fail
1.4 Fail	1.7 Fail	1.3 Fail	—	1.2 Fail
1.7 Fail	2.1 Fail	1.6 Fail	1.2 Fail	—

White BG

2.1Fail

2.4Fail

1.9Fail

1.4Fail

1.2Fail

Black BG

10.2AAA

8.6AAA

11.1AAA

14.8AAA

17.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B5B592

7A7BB1

A7A8B0

CDCEBD

EDEDB9

Deuteranopia

B4B495

746DB1

A49FB2

CBC8C0

ECEBBE

Tritanopia

B19C9E

52B2B2

90B7B8

BFC7C9

E9C8CB

Achromatopsia

B1B1B1

969696

B4B4B4

D2D2D2

E7E7E7

Shades & Tints Shades & Tints

#B1BA85

Dark

Light

#4DB6AF

Dark

Light

#8DCAA8

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b1ba85;
  --color-2: #4db6af;
  --color-3: #8dcaa8;
  --color-4: #bde3b1;
  --color-5: #e8f3a7;
}

SCSS

$color-1: #b1ba85;
$color-2: #4db6af;
$color-3: #8dcaa8;
$color-4: #bde3b1;
$color-5: #e8f3a7;

TAILWIND

colors: {
  'brand-1': '#b1ba85',
  'brand-2': '#4db6af',
  'brand-3': '#8dcaa8',
  'brand-4': '#bde3b1',
  'brand-5': '#e8f3a7',
}

RGB Array

[177, 186, 133], [77, 182, 175], [141, 202, 168], [189, 227, 177], [232, 243, 167]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B1BA85, #4DB6AF, #8DCAA8, #BDE3B1, #E8F3A7 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: #b1ba85; --color-2: #4db6af; --color-3: #8dcaa8; --color-4: #bde3b1; --color-5: #e8f3a7. 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