#F5E8B2 + #E0E399 + #C3DE93 + #A2DB9A + #8ED19E - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F5E8B2

Goose Yellow · Wheat · Lemon Cream

HEX

#F5E8B2

RGB

rgb(245, 232, 178)

HSL

hsl(48, 77%, 83%)

HSB

hsb(48, 27%, 96%)

CMYK

cmyk(0%, 5%, 27%, 4%)

Oklch

oklch(92.8% 0.071 96.2)

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

#E0E399

Fresh Green · Khaki · Sunflower

HEX

#E0E399

RGB

rgb(224, 227, 153)

HSL

hsl(62, 57%, 75%)

HSB

hsb(62, 33%, 89%)

CMYK

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

Oklch

oklch(89.6% 0.095 110.1)

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

#C3DE93

Willow Green · Tan · Apple Green

HEX

#C3DE93

RGB

rgb(195, 222, 147)

HSL

hsl(82, 53%, 72%)

HSB

hsb(82, 34%, 87%)

CMYK

cmyk(12%, 0%, 34%, 13%)

Oklch

oklch(86.3% 0.102 124.6)

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

#A2DB9A

Celadon · LightGreen · Apple Green

HEX

#A2DB9A

RGB

rgb(162, 219, 154)

HSL

hsl(113, 47%, 73%)

HSB

hsb(113, 30%, 86%)

CMYK

cmyk(26%, 0%, 30%, 14%)

Oklch

oklch(83.6% 0.106 141.5)

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

#8ED19E

Celadon · DarkSeaGreen · Apple Green

HEX

#8ED19E

RGB

rgb(142, 209, 158)

HSL

hsl(134, 42%, 69%)

HSB

hsb(134, 32%, 82%)

CMYK

cmyk(32%, 0%, 24%, 18%)

Oklch

oklch(80.2% 0.099 151.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F5E8B2

B2C0F5

Analogous

F5C6B2

F5E8B2

E1F5B2

Triadic

F5E8B2

B2F5E8

E8B2F5

Split-Comp.

F5E8B2

B2E1F5

C6B2F5

Tetradic

F5E8B2

B2F5C6

B2C0F5

F5B2E1

Contrast Matrix WCAG 2.1 Contrast

F5E8B2	E0E399	C3DE93	A2DB9A	8ED19E
—	1.1 Fail	1.2 Fail	1.3 Fail	1.5 Fail
1.1 Fail	—	1.1 Fail	1.2 Fail	1.3 Fail
1.2 Fail	1.1 Fail	—	1.1 Fail	1.2 Fail
1.3 Fail	1.2 Fail	1.1 Fail	—	1.1 Fail
1.5 Fail	1.3 Fail	1.2 Fail	1.1 Fail	—

White BG

1.2Fail

1.3Fail

1.5Fail

1.6Fail

1.8Fail

Black BG

17.1AAA

15.6AAA

14.2AAA

13.1AAA

11.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EFEFBF

E1E1AB

CFCFA5

BBBBAA

ABACAA

Deuteranopia

F0F1C2

E1E1AF

CDCBAA

B7B3AE

A7A2AD

Tritanopia

F4C9CC

E0B9BC

C4B3B7

A5B6B9

91B4B6

Achromatopsia

E6E6E6

DADADA

CDCDCD

C3C3C3

B7B7B7

Shades & Tints Shades & Tints

#F5E8B2

Dark

Light

#E0E399

Dark

Light

#C3DE93

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f5e8b2;
  --color-2: #e0e399;
  --color-3: #c3de93;
  --color-4: #a2db9a;
  --color-5: #8ed19e;
}

SCSS

$color-1: #f5e8b2;
$color-2: #e0e399;
$color-3: #c3de93;
$color-4: #a2db9a;
$color-5: #8ed19e;

TAILWIND

colors: {
  'brand-1': '#f5e8b2',
  'brand-2': '#e0e399',
  'brand-3': '#c3de93',
  'brand-4': '#a2db9a',
  'brand-5': '#8ed19e',
}

RGB Array

[245, 232, 178], [224, 227, 153], [195, 222, 147], [162, 219, 154], [142, 209, 158]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F5E8B2, #E0E399, #C3DE93, #A2DB9A, #8ED19E 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: #f5e8b2; --color-2: #e0e399; --color-3: #c3de93; --color-4: #a2db9a; --color-5: #8ed19e. 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