#E6F5E9 + #C0DEB8 + #96D4B5 + #6CC4C0 + #8C8181 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#E6F5E9

Celadon · Beige · Mint Green

HEX

#E6F5E9

RGB

rgb(230, 245, 233)

HSL

hsl(132, 43%, 93%)

HSB

hsb(132, 6%, 96%)

CMYK

cmyk(6%, 0%, 5%, 4%)

Oklch

oklch(95.6% 0.022 151.6)

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

#C0DEB8

Celadon · Silver · Apple Green

HEX

#C0DEB8

RGB

rgb(192, 222, 184)

HSL

hsl(107, 37%, 80%)

HSB

hsb(107, 17%, 87%)

CMYK

cmyk(14%, 0%, 17%, 13%)

Oklch

oklch(86.9% 0.061 139.1)

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

#96D4B5

Jade · DarkSeaGreen · Apple Green

HEX

#96D4B5

RGB

rgb(150, 212, 181)

HSL

hsl(150, 42%, 71%)

HSB

hsb(150, 29%, 83%)

CMYK

cmyk(29%, 0%, 15%, 17%)

Oklch

oklch(81.9% 0.077 162.4)

Traditional「Jade」· Paint「Apple Green」· Creative Arctic Pool

#6CC4C0

Mineral Blue · MediumAquaMarine · Lake Green

HEX

#6CC4C0

RGB

rgb(108, 196, 192)

HSL

hsl(177, 43%, 60%)

HSB

hsb(177, 45%, 77%)

CMYK

cmyk(45%, 0%, 2%, 23%)

Oklch

oklch(76.4% 0.085 191.7)

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

#8C8181

Ash · Gray · Warm Gray

HEX

#8C8181

RGB

rgb(140, 129, 129)

HSL

hsl(0, 5%, 53%)

HSB

hsb(0, 8%, 55%)

CMYK

cmyk(0%, 8%, 8%, 45%)

Oklch

oklch(61.3% 0.013 17.5)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E6F5E9

F5E5F2

Analogous

EAF5E5

E6F5E9

E5F5F0

Triadic

E6F5E9

E9E5F5

F5E9E5

Split-Comp.

E6F5E9

F0E5F5

F5E5EA

Tetradic

E6F5E9

E5EAF5

F5E5F2

F5F0E5

Contrast Matrix WCAG 2.1 Contrast

E6F5E9	C0DEB8	96D4B5	6CC4C0	8C8181
—	1.3 Fail	1.5 Fail	1.8 Fail	3.3 AA Large
1.3 Fail	—	1.2 Fail	1.4 Fail	2.6 Fail
1.5 Fail	1.2 Fail	—	1.2 Fail	2.2 Fail
1.8 Fail	1.4 Fail	1.2 Fail	—	1.8 Fail
3.3 AA Large	2.6 Fail	2.2 Fail	1.8 Fail	—

White BG

1.1Fail

1.5Fail

1.7Fail

2.0Fail

3.8AA Large

Black BG

18.6AAA

14.4AAA

12.4AAA

10.3AAA

5.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

ECEDEC

CDCDC1

B1B1BD

9293C1

878781

Deuteranopia

ECEBED

CBC9C3

ADA9BE

8D86C1

888981

Tritanopia

E7EEEF

C1C8CA

99C2C4

70C2C2

8B8181

Achromatopsia

EFEFEF

D1D1D1

BEBEBE

A9A9A9

848484

Shades & Tints Shades & Tints

#E6F5E9

Dark

Light

#C0DEB8

Dark

Light

#96D4B5

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e6f5e9;
  --color-2: #c0deb8;
  --color-3: #96d4b5;
  --color-4: #6cc4c0;
  --color-5: #8c8181;
}

SCSS

$color-1: #e6f5e9;
$color-2: #c0deb8;
$color-3: #96d4b5;
$color-4: #6cc4c0;
$color-5: #8c8181;

TAILWIND

colors: {
  'brand-1': '#e6f5e9',
  'brand-2': '#c0deb8',
  'brand-3': '#96d4b5',
  'brand-4': '#6cc4c0',
  'brand-5': '#8c8181',
}

RGB Array

[230, 245, 233], [192, 222, 184], [150, 212, 181], [108, 196, 192], [140, 129, 129]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E6F5E9, #C0DEB8, #96D4B5, #6CC4C0, #8C8181 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: #e6f5e9; --color-2: #c0deb8; --color-3: #96d4b5; --color-4: #6cc4c0; --color-5: #8c8181. 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