#E4EBA2 + #B8B2C0 + #696C88 + #2AD8DD + #D6E2D7 · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#E4EBA2

Fresh Green · Khaki · Lemon Cream

HEX

#E4EBA2

RGB

rgb(228, 235, 162)

HSL

hsl(66, 65%, 78%)

HSB

hsb(66, 31%, 92%)

CMYK

cmyk(3%, 0%, 31%, 8%)

Oklch

oklch(91.8% 0.094 112.7)

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

#B8B2C0

Wisteria · Silver · Lilac Purple

HEX

#B8B2C0

RGB

rgb(184, 178, 192)

HSL

hsl(266, 10%, 73%)

HSB

hsb(266, 7%, 75%)

CMYK

cmyk(4%, 7%, 0%, 25%)

Oklch

oklch(77.3% 0.021 305.2)

Traditional「Wisteria」· Paint「Lilac Purple」· Creative Lavender Dream

#696C88

Indigo · SlateGray · Navy Blue

HEX

#696C88

RGB

rgb(105, 108, 136)

HSL

hsl(234, 13%, 47%)

HSB

hsb(234, 23%, 53%)

CMYK

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

Oklch

oklch(53.9% 0.044 280.0)

Traditional「Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

#2AD8DD

Lake Blue · Turquoise · Lake Green

HEX

#2AD8DD

RGB

rgb(42, 216, 221)

HSL

hsl(182, 72%, 52%)

HSB

hsb(182, 81%, 87%)

CMYK

cmyk(81%, 2%, 0%, 13%)

Oklch

oklch(80.4% 0.130 198.0)

Traditional「Lake Blue」· Paint「Lake Green」· Creative Blush Sunrise

#D6E2D7

Celadon · LightGray · Mint Green

HEX

#D6E2D7

RGB

rgb(214, 226, 215)

HSL

hsl(125, 17%, 86%)

HSB

hsb(125, 5%, 89%)

CMYK

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

Oklch

oklch(90.1% 0.020 147.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E4EBA2

AAA2EB

Analogous

EBCEA2

E4EBA2

C0EBA2

Triadic

E4EBA2

A2E4EB

EBA2E4

Split-Comp.

E4EBA2

A2C0EB

CEA2EB

Tetradic

E4EBA2

A2EBCE

AAA2EB

EBA2C0

Contrast Matrix WCAG 2.1 Contrast

E4EBA2	B8B2C0	696C88	2AD8DD	D6E2D7
—	1.6 Fail	4.1 AA Large	1.4 Fail	1.1 Fail
1.6 Fail	—	2.5 Fail	1.2 Fail	1.5 Fail
4.1 AA Large	2.5 Fail	—	2.9 Fail	3.8 AA Large
1.4 Fail	1.2 Fail	2.9 Fail	—	1.3 Fail
1.1 Fail	1.5 Fail	3.8 AA Large	1.3 Fail	—

White BG

1.3Fail

2.1Fail

5.1AA

1.8Fail

1.3Fail

Black BG

16.7AAA

10.2AAA

4.1AA Large

12.0AAA

15.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E7E7B4

B5B5BD

6A6A81

7577DC

DBDBDA

Deuteranopia

E7E6B8

B6B6BC

6A6A80

6B5EDC

DBDADA

Tritanopia

E4C2C5

B8BAB9

697C7B

33DBDB

D7DCDC

Achromatopsia

E1E1E1

B5B5B5

6E6E6E

A5A5A5

DDDDDD

Shades & Tints Shades & Tints

#E4EBA2

Dark

Light

#B8B2C0

Dark

Light

#696C88

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e4eba2;
  --color-2: #b8b2c0;
  --color-3: #696c88;
  --color-4: #2ad8dd;
  --color-5: #d6e2d7;
}

SCSS

$color-1: #e4eba2;
$color-2: #b8b2c0;
$color-3: #696c88;
$color-4: #2ad8dd;
$color-5: #d6e2d7;

TAILWIND

colors: {
  'brand-1': '#e4eba2',
  'brand-2': '#b8b2c0',
  'brand-3': '#696c88',
  'brand-4': '#2ad8dd',
  'brand-5': '#d6e2d7',
}

RGB Array

[228, 235, 162], [184, 178, 192], [105, 108, 136], [42, 216, 221], [214, 226, 215]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #E4EBA2, #B8B2C0, #696C88, #2AD8DD, #D6E2D7 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: #e4eba2; --color-2: #b8b2c0; --color-3: #696c88; --color-4: #2ad8dd; --color-5: #d6e2d7. 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