#E3F983 + #EAEBAB + #F0DDD2 + #D3DEB9 + #B5DF9F · summer - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#E3F983

Willow Green · Khaki · Apple Green

HEX

#E3F983

RGB

rgb(227, 249, 131)

HSL

hsl(71, 91%, 75%)

HSB

hsb(71, 47%, 98%)

CMYK

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

Oklch

oklch(94.2% 0.145 118.0)

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

#EAEBAB

Fresh Green · Wheat · Lemon Cream

HEX

#EAEBAB

RGB

rgb(234, 235, 171)

HSL

hsl(61, 62%, 80%)

HSB

hsb(61, 27%, 92%)

CMYK

cmyk(0%, 0%, 27%, 8%)

Oklch

oklch(92.4% 0.082 108.7)

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

#F0DDD2

Apricot · Bisque · Peach Orange

HEX

#F0DDD2

RGB

rgb(240, 221, 210)

HSL

hsl(22, 50%, 88%)

HSB

hsb(22, 13%, 94%)

CMYK

cmyk(0%, 8%, 13%, 6%)

Oklch

oklch(91.0% 0.026 52.2)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#D3DEB9

Willow Green · LightGray · Apple Green

HEX

#D3DEB9

RGB

rgb(211, 222, 185)

HSL

hsl(78, 36%, 80%)

HSB

hsb(78, 17%, 87%)

CMYK

cmyk(5%, 0%, 17%, 13%)

Oklch

oklch(88.3% 0.051 120.9)

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

#B5DF9F

Celadon · LightGreen · Apple Green

HEX

#B5DF9F

RGB

rgb(181, 223, 159)

HSL

hsl(99, 50%, 75%)

HSB

hsb(99, 29%, 87%)

CMYK

cmyk(19%, 0%, 29%, 13%)

Oklch

oklch(85.8% 0.097 135.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E3F983

9B85F9

Analogous

F9D585

E3F983

AAF985

Triadic

E3F983

85E4F9

F985E4

Split-Comp.

E3F983

85AAF9

D585F9

Tetradic

E3F983

85F9D5

9B85F9

F985AA

Contrast Matrix WCAG 2.1 Contrast

E3F983	EAEBAB	F0DDD2	D3DEB9	B5DF9F
—	1.1 Fail	1.1 Fail	1.2 Fail	1.3 Fail
1.1 Fail	—	1.1 Fail	1.1 Fail	1.2 Fail
1.1 Fail	1.1 Fail	—	1.1 Fail	1.1 Fail
1.2 Fail	1.1 Fail	1.1 Fail	—	1.1 Fail
1.3 Fail	1.2 Fail	1.1 Fail	1.1 Fail	—

White BG

1.2Fail

1.3Fail

1.4Fail

1.5Fail

Black BG

18.1AAA

17.0AAA

16.0AAA

14.9AAA

14.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EDEDA0

EAEABA

E8E8D5

D8D8C2

C7C8AE

Deuteranopia

EBEAA6

EAEABE

E9EAD5

D7D6C4

C5C2B2

Tritanopia

E4B6BB

EAC7C9

EFD7D7

D4C9CB

B7BBBD

Achromatopsia

E5E5E5

E3E3E3

E1E1E1

D6D6D6

CBCBCB

Shades & Tints Shades & Tints

#E3F983

Dark

Light

#EAEBAB

Dark

Light

#F0DDD2

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e3f983;
  --color-2: #eaebab;
  --color-3: #f0ddd2;
  --color-4: #d3deb9;
  --color-5: #b5df9f;
}

SCSS

$color-1: #e3f983;
$color-2: #eaebab;
$color-3: #f0ddd2;
$color-4: #d3deb9;
$color-5: #b5df9f;

TAILWIND

colors: {
  'brand-1': '#e3f983',
  'brand-2': '#eaebab',
  'brand-3': '#f0ddd2',
  'brand-4': '#d3deb9',
  'brand-5': '#b5df9f',
}

RGB Array

[227, 249, 131], [234, 235, 171], [240, 221, 210], [211, 222, 185], [181, 223, 159]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #E3F983, #EAEBAB, #F0DDD2, #D3DEB9, #B5DF9F 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: #e3f983; --color-2: #eaebab; --color-3: #f0ddd2; --color-4: #d3deb9; --color-5: #b5df9f. 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 summer-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