#E1F2B3 + #CFDEA0 + #B3D49F + #84C4BC + #8193CC - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#E1F2B3

Willow Green · Wheat · Mint Green

HEX

#E1F2B3

RGB

rgb(225, 242, 179)

HSL

hsl(76, 71%, 83%)

HSB

hsb(76, 26%, 95%)

CMYK

cmyk(7%, 0%, 26%, 5%)

Oklch

oklch(93.3% 0.084 120.3)

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

#CFDEA0

Willow Green · Khaki · Apple Green

HEX

#CFDEA0

RGB

rgb(207, 222, 160)

HSL

hsl(75, 48%, 75%)

HSB

hsb(75, 28%, 87%)

CMYK

cmyk(7%, 0%, 28%, 13%)

Oklch

oklch(87.4% 0.083 119.2)

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

#B3D49F

Celadon · Silver · Apple Green

HEX

#B3D49F

RGB

rgb(179, 212, 159)

HSL

hsl(97, 38%, 73%)

HSB

hsb(97, 25%, 83%)

CMYK

cmyk(16%, 0%, 25%, 17%)

Oklch

oklch(83.2% 0.080 133.9)

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

#84C4BC

Jade · MediumAquaMarine · Lake Green

HEX

#84C4BC

RGB

rgb(132, 196, 188)

HSL

hsl(173, 35%, 64%)

HSB

hsb(173, 33%, 77%)

CMYK

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

Oklch

oklch(77.5% 0.066 186.1)

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

#8193CC

Azure · CornflowerBlue · Cobalt Blue

HEX

#8193CC

RGB

rgb(129, 147, 204)

HSL

hsl(226, 42%, 65%)

HSB

hsb(226, 37%, 80%)

CMYK

cmyk(37%, 28%, 0%, 20%)

Oklch

oklch(67.1% 0.087 270.5)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E1F2B3

C5B5F2

Analogous

F2E4B5

E1F2B3

C3F2B5

Triadic

E1F2B3

B5E2F2

F2B5E2

Split-Comp.

E1F2B3

B5C3F2

E4B5F2

Tetradic

E1F2B3

B5F2E4

C5B5F2

F2B5C3

Contrast Matrix WCAG 2.1 Contrast

E1F2B3	CFDEA0	B3D49F	84C4BC	8193CC
—	1.2 Fail	1.4 Fail	1.7 Fail	2.5 Fail
1.2 Fail	—	1.1 Fail	1.4 Fail	2.1 Fail
1.4 Fail	1.1 Fail	—	1.2 Fail	1.8 Fail
1.7 Fail	1.4 Fail	1.2 Fail	—	1.5 Fail
2.5 Fail	2.1 Fail	1.8 Fail	1.5 Fail	—

White BG

1.2Fail

1.4Fail

1.6Fail

2.0Fail

3.0AA Large

Black BG

17.6AAA

14.6AAA

12.8AAA

10.6AAA

7.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E8E9C2

D5D6AF

C1C2AC

A0A0BE

8989BE

Deuteranopia

E7E6C6

D5D3B3

BFBDAF

9C97BE

8886BB

Tritanopia

E2CED1

D0BBBD

B5B6B8

87BFC0

82B3B1

Achromatopsia

E6E6E6

D2D2D2

C4C4C4

B0B0B0

949494

Shades & Tints Shades & Tints

#E1F2B3

Dark

Light

#CFDEA0

Dark

Light

#B3D49F

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e1f2b3;
  --color-2: #cfdea0;
  --color-3: #b3d49f;
  --color-4: #84c4bc;
  --color-5: #8193cc;
}

SCSS

$color-1: #e1f2b3;
$color-2: #cfdea0;
$color-3: #b3d49f;
$color-4: #84c4bc;
$color-5: #8193cc;

TAILWIND

colors: {
  'brand-1': '#e1f2b3',
  'brand-2': '#cfdea0',
  'brand-3': '#b3d49f',
  'brand-4': '#84c4bc',
  'brand-5': '#8193cc',
}

RGB Array

[225, 242, 179], [207, 222, 160], [179, 212, 159], [132, 196, 188], [129, 147, 204]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E1F2B3, #CFDEA0, #B3D49F, #84C4BC, #8193CC 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: #e1f2b3; --color-2: #cfdea0; --color-3: #b3d49f; --color-4: #84c4bc; --color-5: #8193cc. 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