#E7EEA6 + #E3D189 + #B1C5AD + #7F6786 + #80B0BB · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarmCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#E7EEA6

Fresh Green · Wheat · Lemon Cream

HEX

#E7EEA6

RGB

rgb(231, 238, 166)

HSL

hsl(66, 68%, 79%)

HSB

hsb(66, 30%, 93%)

CMYK

cmyk(3%, 0%, 30%, 7%)

Oklch

oklch(92.7% 0.092 112.7)

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

#E3D189

Goose Yellow · Khaki · Sunflower

HEX

#E3D189

RGB

rgb(227, 209, 137)

HSL

hsl(48, 62%, 71%)

HSB

hsb(48, 40%, 89%)

CMYK

cmyk(0%, 8%, 40%, 11%)

Oklch

oklch(85.9% 0.094 95.8)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

#B1C5AD

Celadon · Silver · Apple Green

HEX

#B1C5AD

RGB

rgb(177, 197, 173)

HSL

hsl(110, 17%, 73%)

HSB

hsb(110, 12%, 77%)

CMYK

cmyk(10%, 0%, 12%, 23%)

Oklch

oklch(80.2% 0.040 140.5)

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

#7F6786

Dark Plum · Gray · Violet

HEX

#7F6786

RGB

rgb(127, 103, 134)

HSL

hsl(286, 13%, 46%)

HSB

hsb(286, 23%, 53%)

CMYK

cmyk(5%, 23%, 0%, 47%)

Oklch

oklch(54.8% 0.055 318.5)

Traditional「Dark Plum」· Paint「Violet」· Creative Blush Sunrise

#80B0BB

Sky Blue · MediumAquaMarine · Lake Green

HEX

#80B0BB

RGB

rgb(128, 176, 187)

HSL

hsl(191, 30%, 62%)

HSB

hsb(191, 32%, 73%)

CMYK

cmyk(32%, 6%, 0%, 27%)

Oklch

oklch(72.7% 0.053 213.4)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E7EEA6

ACA5EE

Analogous

EED1A5

E7EEA6

C2EEA5

Triadic

E7EEA6

A5E7EE

EEA5E7

Split-Comp.

E7EEA6

A5C2EE

D1A5EE

Tetradic

E7EEA6

A5EED1

ACA5EE

EEA5C2

Contrast Matrix WCAG 2.1 Contrast

E7EEA6	E3D189	B1C5AD	7F6786	80B0BB
—	1.2 Fail	1.5 Fail	4.1 AA Large	1.9 Fail
1.2 Fail	—	1.2 Fail	3.3 AA Large	1.6 Fail
1.5 Fail	1.2 Fail	—	2.7 Fail	1.3 Fail
4.1 AA Large	3.3 AA Large	2.7 Fail	—	2.1 Fail
1.9 Fail	1.6 Fail	1.3 Fail	2.1 Fail	—

White BG

1.2Fail

1.5Fail

1.8Fail

5.0AA

2.4Fail

Black BG

17.2AAA

13.7AAA

11.5AAA

4.2AA Large

8.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EAEAB7

DBDB9A

BABAB3

75747E

9595B8

Deuteranopia

EAE9BC

DCDE9F

B9B7B4

76787D

928EB8

Tritanopia

E7C5C8

E2A8AB

B2B7B8

7E7977

82B6B6

Achromatopsia

E4E4E4

CECECE

BCBCBC

727272

A3A3A3

Shades & Tints Shades & Tints

#E7EEA6

Dark

Light

#E3D189

Dark

Light

#B1C5AD

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e7eea6;
  --color-2: #e3d189;
  --color-3: #b1c5ad;
  --color-4: #7f6786;
  --color-5: #80b0bb;
}

SCSS

$color-1: #e7eea6;
$color-2: #e3d189;
$color-3: #b1c5ad;
$color-4: #7f6786;
$color-5: #80b0bb;

TAILWIND

colors: {
  'brand-1': '#e7eea6',
  'brand-2': '#e3d189',
  'brand-3': '#b1c5ad',
  'brand-4': '#7f6786',
  'brand-5': '#80b0bb',
}

RGB Array

[231, 238, 166], [227, 209, 137], [177, 197, 173], [127, 103, 134], [128, 176, 187]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #E7EEA6, #E3D189, #B1C5AD, #7F6786, #80B0BB 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: #e7eea6; --color-2: #e3d189; --color-3: #b1c5ad; --color-4: #7f6786; --color-5: #80b0bb. 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 nature-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