#5EAB8F + #B1E856 + #B0F0B9 + #D0F1C2 + #E0F7DE - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#5EAB8F

Mineral Blue · CadetBlue · Olive Green

HEX

#5EAB8F

RGB

rgb(94, 171, 143)

HSL

hsl(158, 31%, 52%)

HSB

hsb(158, 45%, 67%)

CMYK

cmyk(45%, 0%, 16%, 33%)

Oklch

oklch(68.3% 0.088 168.1)

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

#B1E856

Willow Green · GreenYellow · Apple Green

HEX

#B1E856

RGB

rgb(177, 232, 86)

HSL

hsl(83, 76%, 62%)

HSB

hsb(83, 63%, 91%)

CMYK

cmyk(24%, 0%, 63%, 9%)

Oklch

oklch(86.5% 0.183 127.4)

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

#B0F0B9

Emerald · Silver · Mint Green

HEX

#B0F0B9

RGB

rgb(176, 240, 185)

HSL

hsl(128, 68%, 82%)

HSB

hsb(128, 27%, 94%)

CMYK

cmyk(27%, 0%, 23%, 6%)

Oklch

oklch(89.8% 0.099 148.4)

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

#D0F1C2

Emerald · LightGray · Mint Green

HEX

#D0F1C2

RGB

rgb(208, 241, 194)

HSL

hsl(102, 63%, 85%)

HSB

hsb(102, 20%, 95%)

CMYK

cmyk(14%, 0%, 20%, 5%)

Oklch

oklch(92.2% 0.071 136.4)

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

#E0F7DE

Emerald · Beige · Mint Green

HEX

#E0F7DE

RGB

rgb(224, 247, 222)

HSL

hsl(115, 61%, 92%)

HSB

hsb(115, 10%, 97%)

CMYK

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

Oklch

oklch(95.3% 0.041 143.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5EAB8F

AB5F7A

Analogous

5FAB69

5EAB8F

5FA0AB

Triadic

5EAB8F

8F5FAB

AB8F5F

Split-Comp.

5EAB8F

AB5FA0

AB695F

Tetradic

5EAB8F

695FAB

AB5F7A

A0AB5F

Contrast Matrix WCAG 2.1 Contrast

5EAB8F	B1E856	B0F0B9	D0F1C2	E0F7DE
—	1.9 Fail	2.1 Fail	2.2 Fail	2.4 Fail
1.9 Fail	—	1.1 Fail	1.2 Fail	1.3 Fail
2.1 Fail	1.1 Fail	—	1.1 Fail	1.2 Fail
2.2 Fail	1.2 Fail	1.1 Fail	—	1.1 Fail
2.4 Fail	1.3 Fail	1.2 Fail	1.1 Fail	—

White BG

2.7Fail

1.4Fail

1.3Fail

1.2Fail

1.1Fail

Black BG

7.7AAA

14.5AAA

16.0AAA

17.0AAA

18.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7F8096

C9C979

CCCCC6

DEDFCD

EAEAE4

Deuteranopia

7B7597

C6C282

C8C3CA

DCDAD0

E9E7E5

Tritanopia

629B9C

B4959B

B3D1D3

D2D6D8

E1E9EA

Achromatopsia

919191

C7C7C7

D7D7D7

E2E2E2

EDEDED

Shades & Tints Shades & Tints

#5EAB8F

Dark

Light

#B1E856

Dark

Light

#B0F0B9

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5eab8f;
  --color-2: #b1e856;
  --color-3: #b0f0b9;
  --color-4: #d0f1c2;
  --color-5: #e0f7de;
}

SCSS

$color-1: #5eab8f;
$color-2: #b1e856;
$color-3: #b0f0b9;
$color-4: #d0f1c2;
$color-5: #e0f7de;

TAILWIND

colors: {
  'brand-1': '#5eab8f',
  'brand-2': '#b1e856',
  'brand-3': '#b0f0b9',
  'brand-4': '#d0f1c2',
  'brand-5': '#e0f7de',
}

RGB Array

[94, 171, 143], [177, 232, 86], [176, 240, 185], [208, 241, 194], [224, 247, 222]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #5EAB8F, #B1E856, #B0F0B9, #D0F1C2, #E0F7DE 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: #5eab8f; --color-2: #b1e856; --color-3: #b0f0b9; --color-4: #d0f1c2; --color-5: #e0f7de. 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