#E1E8E7 + #F3F7F7 + #F1F1E4 + #ADEF89 + #82BB63 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#E1E8E7

Jade · Lavender · Glacier Blue

HEX

#E1E8E7

RGB

rgb(225, 232, 231)

HSL

hsl(171, 13%, 90%)

HSB

hsb(171, 3%, 91%)

CMYK

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

Oklch

oklch(92.5% 0.008 186.9)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

#F3F7F7

Sky Blue · Snow · Glacier Blue

HEX

#F3F7F7

RGB

rgb(243, 247, 247)

HSL

hsl(180, 20%, 96%)

HSB

hsb(180, 2%, 97%)

CMYK

cmyk(2%, 0%, 0%, 3%)

Oklch

oklch(97.3% 0.004 197.1)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

#F1F1E4

Fresh Green · Linen · Lemon Cream

HEX

#F1F1E4

RGB

rgb(241, 241, 228)

HSL

hsl(60, 32%, 92%)

HSB

hsb(60, 5%, 95%)

CMYK

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

Oklch

oklch(95.5% 0.017 106.7)

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

#ADEF89

Emerald · LightGreen · Apple Green

HEX

#ADEF89

RGB

rgb(173, 239, 137)

HSL

hsl(99, 76%, 74%)

HSB

hsb(99, 43%, 94%)

CMYK

cmyk(28%, 0%, 43%, 6%)

Oklch

oklch(88.5% 0.149 135.3)

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

#82BB63

Celadon · DarkSeaGreen · Olive Green

HEX

#82BB63

RGB

rgb(130, 187, 99)

HSL

hsl(99, 39%, 56%)

HSB

hsb(99, 47%, 73%)

CMYK

cmyk(30%, 0%, 47%, 27%)

Oklch

oklch(73.2% 0.133 135.5)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E1E8E7

E9E2E3

Analogous

E2E9E5

E1E8E7

E2E6E9

Triadic

E1E8E7

E8E2E9

E9E8E2

Split-Comp.

E1E8E7

E9E2E6

E9E5E2

Tetradic

E1E8E7

E5E2E9

E9E2E3

E6E9E2

Contrast Matrix WCAG 2.1 Contrast

E1E8E7	F3F7F7	F1F1E4	ADEF89	82BB63
—	1.2 Fail	1.1 Fail	1.1 Fail	1.8 Fail
1.2 Fail	—	1.1 Fail	1.3 Fail	2.1 Fail
1.1 Fail	1.1 Fail	—	1.2 Fail	2.0 Fail
1.1 Fail	1.3 Fail	1.2 Fail	—	1.7 Fail
1.8 Fail	2.1 Fail	2.0 Fail	1.7 Fail	—

White BG

1.2Fail

1.1Fail

1.4Fail

2.3Fail

Black BG

16.9AAA

19.5AAA

18.4AAA

15.5AAA

9.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E4E4E7

F5F5F7

F1F1E7

CACAA2

9B9B78

Deuteranopia

E4E3E7

F5F4F7

F1F1E8

C6C1A8

97937D

Tritanopia

E1E7E7

F3F7F7

F1EAEA

B0B5B9

85898D

Achromatopsia

E6E6E6

F6F6F6

F0F0F0

D0D0D0

A0A0A0

Shades & Tints Shades & Tints

#E1E8E7

Dark

Light

#F3F7F7

Dark

Light

#F1F1E4

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e1e8e7;
  --color-2: #f3f7f7;
  --color-3: #f1f1e4;
  --color-4: #adef89;
  --color-5: #82bb63;
}

SCSS

$color-1: #e1e8e7;
$color-2: #f3f7f7;
$color-3: #f1f1e4;
$color-4: #adef89;
$color-5: #82bb63;

TAILWIND

colors: {
  'brand-1': '#e1e8e7',
  'brand-2': '#f3f7f7',
  'brand-3': '#f1f1e4',
  'brand-4': '#adef89',
  'brand-5': '#82bb63',
}

RGB Array

[225, 232, 231], [243, 247, 247], [241, 241, 228], [173, 239, 137], [130, 187, 99]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E1E8E7, #F3F7F7, #F1F1E4, #ADEF89, #82BB63 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: #e1e8e7; --color-2: #f3f7f7; --color-3: #f1f1e4; --color-4: #adef89; --color-5: #82bb63. 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