#E8E6D6 + #E1E4B3 + #C5D298 + #A3BB88 + #7E8F6A - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#E8E6D6

Fresh Green · Beige · Lemon Cream

HEX

#E8E6D6

RGB

rgb(232, 230, 214)

HSL

hsl(53, 28%, 87%)

HSB

hsb(53, 8%, 91%)

CMYK

cmyk(0%, 1%, 8%, 9%)

Oklch

oklch(92.2% 0.021 101.0)

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

#E1E4B3

Fresh Green · Wheat · Lemon Cream

HEX

#E1E4B3

RGB

rgb(225, 228, 179)

HSL

hsl(64, 48%, 80%)

HSB

hsb(64, 21%, 89%)

CMYK

cmyk(1%, 0%, 21%, 11%)

Oklch

oklch(90.4% 0.064 110.5)

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

#C5D298

Willow Green · Tan · Apple Green

HEX

#C5D298

RGB

rgb(197, 210, 152)

HSL

hsl(73, 39%, 71%)

HSB

hsb(73, 28%, 82%)

CMYK

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

Oklch

oklch(84.0% 0.078 118.4)

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

#A3BB88

Willow Green · DarkSeaGreen · Apple Green

HEX

#A3BB88

RGB

rgb(163, 187, 136)

HSL

hsl(88, 27%, 63%)

HSB

hsb(88, 27%, 73%)

CMYK

cmyk(13%, 0%, 27%, 27%)

Oklch

oklch(76.1% 0.075 128.5)

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

#7E8F6A

Grass Green · Gray · Olive Green

HEX

#7E8F6A

RGB

rgb(126, 143, 106)

HSL

hsl(88, 15%, 49%)

HSB

hsb(88, 26%, 56%)

CMYK

cmyk(12%, 0%, 26%, 44%)

Oklch

oklch(62.6% 0.057 128.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E8E6D6

D5D7E7

Analogous

E7DCD5

E8E6D6

E0E7D5

Triadic

E8E6D6

D5E7E5

E5D5E7

Split-Comp.

E8E6D6

D5E0E7

DCD5E7

Tetradic

E8E6D6

D5E7DC

D5D7E7

E7D5E0

Contrast Matrix WCAG 2.1 Contrast

E8E6D6	E1E4B3	C5D298	A3BB88	7E8F6A
—	1.0 Fail	1.3 Fail	1.7 Fail	2.8 Fail
1.0 Fail	—	1.2 Fail	1.6 Fail	2.6 Fail
1.3 Fail	1.2 Fail	—	1.3 Fail	2.2 Fail
1.7 Fail	1.6 Fail	1.3 Fail	—	1.7 Fail
2.8 Fail	2.6 Fail	2.2 Fail	1.7 Fail	—

White BG

1.3Fail

1.6Fail

2.1Fail

3.5AA Large

Black BG

16.7AAA

15.9AAA

13.0AAA

10.0AAA

6.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E7E7DA

E2E2BF

CBCBA6

ADAE94

858673

Deuteranopia

E7E7DB

E2E2C2

CAC9A9

ACAA97

848375

Tritanopia

E8DDDE

E1C8CA

C6B1B4

A49EA0

7F7A7C

Achromatopsia

E5E5E5

DEDEDE

C8C8C8

AEAEAE

868686

Shades & Tints Shades & Tints

#E8E6D6

Dark

Light

#E1E4B3

Dark

Light

#C5D298

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e8e6d6;
  --color-2: #e1e4b3;
  --color-3: #c5d298;
  --color-4: #a3bb88;
  --color-5: #7e8f6a;
}

SCSS

$color-1: #e8e6d6;
$color-2: #e1e4b3;
$color-3: #c5d298;
$color-4: #a3bb88;
$color-5: #7e8f6a;

TAILWIND

colors: {
  'brand-1': '#e8e6d6',
  'brand-2': '#e1e4b3',
  'brand-3': '#c5d298',
  'brand-4': '#a3bb88',
  'brand-5': '#7e8f6a',
}

RGB Array

[232, 230, 214], [225, 228, 179], [197, 210, 152], [163, 187, 136], [126, 143, 106]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E8E6D6, #E1E4B3, #C5D298, #A3BB88, #7E8F6A 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: #e8e6d6; --color-2: #e1e4b3; --color-3: #c5d298; --color-4: #a3bb88; --color-5: #7e8f6a. 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