#86E3CF + #C4EDBB + #E1F5B3 + #E4D844 + #9A8C8B - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#86E3CF

Jade · SkyBlue · Lake Green

HEX

#86E3CF

RGB

rgb(134, 227, 207)

HSL

hsl(167, 62%, 71%)

HSB

hsb(167, 41%, 89%)

CMYK

cmyk(41%, 0%, 9%, 11%)

Oklch

oklch(85.2% 0.094 178.5)

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

#C4EDBB

Emerald · LightGray · Mint Green

HEX

#C4EDBB

RGB

rgb(196, 237, 187)

HSL

hsl(109, 58%, 83%)

HSB

hsb(109, 21%, 93%)

CMYK

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

Oklch

oklch(90.4% 0.079 140.0)

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

#E1F5B3

Willow Green · Wheat · Mint Green

HEX

#E1F5B3

RGB

rgb(225, 245, 179)

HSL

hsl(78, 77%, 83%)

HSB

hsb(78, 27%, 96%)

CMYK

cmyk(8%, 0%, 27%, 4%)

Oklch

oklch(93.9% 0.088 121.8)

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

#E4D844

Autumn Sage · SandyBrown · Sunflower

HEX

#E4D844

RGB

rgb(228, 216, 68)

HSL

hsl(55, 75%, 58%)

HSB

hsb(55, 70%, 89%)

CMYK

cmyk(0%, 5%, 70%, 11%)

Oklch

oklch(86.7% 0.162 104.6)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#9A8C8B

Ash · Gray · Silver Sand

HEX

#9A8C8B

RGB

rgb(154, 140, 139)

HSL

hsl(4, 7%, 57%)

HSB

hsb(4, 10%, 60%)

CMYK

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

Oklch

oklch(65.2% 0.017 22.5)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

86E3CF

E3879B

Analogous

87E3A1

86E3CF

87C9E3

Triadic

86E3CF

CF87E3

E3CF87

Split-Comp.

86E3CF

E387C9

E3A187

Tetradic

86E3CF

A187E3

E3879B

C9E387

Contrast Matrix WCAG 2.1 Contrast

86E3CF	C4EDBB	E1F5B3	E4D844	9A8C8B
—	1.2 Fail	1.3 Fail	1.0 Fail	2.1 Fail
1.2 Fail	—	1.1 Fail	1.1 Fail	2.5 Fail
1.3 Fail	1.1 Fail	—	1.3 Fail	2.8 Fail
1.0 Fail	1.1 Fail	1.3 Fail	—	2.2 Fail
2.1 Fail	2.5 Fail	2.8 Fail	2.2 Fail	—

White BG

1.5Fail

1.3Fail

1.2Fail

1.5Fail

3.2AA Large

Black BG

13.9AAA

16.2AAA

17.9AAA

14.2AAA

6.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

AEAFD4

D6D6C7

EAEAC3

DFDF68

94948B

Deuteranopia

A9A2D5

D3D0CA

E9E7C7

E0E070

95968B

Tritanopia

8BD8D9

C6D1D3

E2D0D2

E3848A

998B8B

Achromatopsia

C5C5C5

DBDBDB

E7E7E7

CBCBCB

909090

Shades & Tints Shades & Tints

#86E3CF

Dark

Light

#C4EDBB

Dark

Light

#E1F5B3

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #86e3cf;
  --color-2: #c4edbb;
  --color-3: #e1f5b3;
  --color-4: #e4d844;
  --color-5: #9a8c8b;
}

SCSS

$color-1: #86e3cf;
$color-2: #c4edbb;
$color-3: #e1f5b3;
$color-4: #e4d844;
$color-5: #9a8c8b;

TAILWIND

colors: {
  'brand-1': '#86e3cf',
  'brand-2': '#c4edbb',
  'brand-3': '#e1f5b3',
  'brand-4': '#e4d844',
  'brand-5': '#9a8c8b',
}

RGB Array

[134, 227, 207], [196, 237, 187], [225, 245, 179], [228, 216, 68], [154, 140, 139]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #86E3CF, #C4EDBB, #E1F5B3, #E4D844, #9A8C8B 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: #86e3cf; --color-2: #c4edbb; --color-3: #e1f5b3; --color-4: #e4d844; --color-5: #9a8c8b. 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