#E7E2BC + #9FBCB7 + #789382 + #A2A270 + #E3DB94 · earth - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#E7E2BC

Fresh Green · Wheat · Lemon Cream

HEX

#E7E2BC

RGB

rgb(231, 226, 188)

HSL

hsl(53, 47%, 82%)

HSB

hsb(53, 19%, 91%)

CMYK

cmyk(0%, 2%, 19%, 9%)

Oklch

oklch(90.7% 0.050 101.1)

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

#9FBCB7

Jade · DarkGray · Lake Green

HEX

#9FBCB7

RGB

rgb(159, 188, 183)

HSL

hsl(170, 18%, 68%)

HSB

hsb(170, 15%, 74%)

CMYK

cmyk(15%, 0%, 3%, 26%)

Oklch

oklch(77.2% 0.032 183.9)

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

#789382

Celadon · Gray · Olive Green

HEX

#789382

RGB

rgb(120, 147, 130)

HSL

hsl(142, 11%, 52%)

HSB

hsb(142, 18%, 58%)

CMYK

cmyk(18%, 0%, 12%, 42%)

Oklch

oklch(63.7% 0.040 157.4)

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

#A2A270

Autumn Sage · DarkSeaGreen · Sunflower

HEX

#A2A270

RGB

rgb(162, 162, 112)

HSL

hsl(60, 21%, 54%)

HSB

hsb(60, 31%, 64%)

CMYK

cmyk(0%, 0%, 31%, 36%)

Oklch

oklch(70.0% 0.068 108.0)

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

#E3DB94

Fresh Green · Khaki · Sunflower

HEX

#E3DB94

RGB

rgb(227, 219, 148)

HSL

hsl(54, 59%, 74%)

HSB

hsb(54, 35%, 89%)

CMYK

cmyk(0%, 4%, 35%, 11%)

Oklch

oklch(88.2% 0.091 102.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E7E2BC

BCC1E7

Analogous

E7CCBC

E7E2BC

D6E7BC

Triadic

E7E2BC

BCE7E2

E2BCE7

Split-Comp.

E7E2BC

BCD6E7

CCBCE7

Tetradic

E7E2BC

BCE7CC

BCC1E7

E7BCD6

Contrast Matrix WCAG 2.1 Contrast

E7E2BC	9FBCB7	789382	A2A270	E3DB94
—	1.5 Fail	2.5 Fail	2.0 Fail	1.1 Fail
1.5 Fail	—	1.6 Fail	1.3 Fail	1.4 Fail
2.5 Fail	1.6 Fail	—	1.3 Fail	2.4 Fail
2.0 Fail	1.3 Fail	1.3 Fail	—	1.9 Fail
1.1 Fail	1.4 Fail	2.4 Fail	1.9 Fail	—

White BG

1.3Fail

2.0Fail

3.3AA Large

2.6Fail

1.4Fail

Black BG

16.0AAA

10.4AAA

6.3AA

7.9AAA

14.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E5E5C5

ACACB8

848486

A2A27C

E0DFA5

Deuteranopia

E5E6C7

AAA8B9

828087

A2A27F

E0E1A9

Tritanopia

E7CCCE

A0B9B9

79898A

A28688

E3B3B6

Achromatopsia

DFDFDF

B3B3B3

898989

9C9C9C

D5D5D5

Shades & Tints Shades & Tints

#E7E2BC

Dark

Light

#9FBCB7

Dark

Light

#789382

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e7e2bc;
  --color-2: #9fbcb7;
  --color-3: #789382;
  --color-4: #a2a270;
  --color-5: #e3db94;
}

SCSS

$color-1: #e7e2bc;
$color-2: #9fbcb7;
$color-3: #789382;
$color-4: #a2a270;
$color-5: #e3db94;

TAILWIND

colors: {
  'brand-1': '#e7e2bc',
  'brand-2': '#9fbcb7',
  'brand-3': '#789382',
  'brand-4': '#a2a270',
  'brand-5': '#e3db94',
}

RGB Array

[231, 226, 188], [159, 188, 183], [120, 147, 130], [162, 162, 112], [227, 219, 148]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #E7E2BC, #9FBCB7, #789382, #A2A270, #E3DB94 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: #e7e2bc; --color-2: #9fbcb7; --color-3: #789382; --color-4: #a2a270; --color-5: #e3db94. 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 earth-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