← Back to Editor

#F4DF82 · #E2E19D · #CFE8AC · #B2F0B4 · #81FFB2

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial App

Color Details Color Details

#F4DF82

Goose Yellow · Khaki · Sunflower

HEX
#F4DF82
RGB
rgb(244, 223, 130)
HSL
hsl(49, 84%, 73%)
HSB
hsb(49, 47%, 96%)
CMYK
cmyk(0%, 9%, 47%, 4%)
Oklch
oklch(90.1% 0.116 97.0)

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

#E2E19D

Fresh Green · Khaki · Sunflower

HEX
#E2E19D
RGB
rgb(226, 225, 157)
HSL
hsl(59, 54%, 75%)
HSB
hsb(59, 31%, 89%)
CMYK
cmyk(0%, 0%, 31%, 11%)
Oklch
oklch(89.5% 0.087 107.3)

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

#CFE8AC

Willow Green · Wheat · Apple Green

HEX
#CFE8AC
RGB
rgb(207, 232, 172)
HSL
hsl(85, 57%, 79%)
HSB
hsb(85, 26%, 91%)
CMYK
cmyk(11%, 0%, 26%, 9%)
Oklch
oklch(89.8% 0.083 126.4)

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

#B2F0B4

Emerald · LightGreen · Mint Green

HEX
#B2F0B4
RGB
rgb(178, 240, 180)
HSL
hsl(122, 67%, 82%)
HSB
hsb(122, 26%, 94%)
CMYK
cmyk(26%, 0%, 25%, 6%)
Oklch
oklch(89.8% 0.103 145.5)

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

#81FFB2

Emerald · LightGreen · Apple Green

HEX
#81FFB2
RGB
rgb(129, 255, 178)
HSL
hsl(143, 100%, 75%)
HSB
hsb(143, 49%, 100%)
CMYK
cmyk(49%, 0%, 30%, 0%)
Oklch
oklch(90.8% 0.156 154.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F4DF82
8096F4

Analogous

F4A580
F4DF82
CFF480

Triadic

F4DF82
80F4DF
DF80F4

Split-Comp.

F4DF82
80CFF4
A580F4

Tetradic

F4DF82
80F4A5
8096F4
F480CF

Contrast Matrix WCAG 2.1 Contrast

F4DF82
E2E19D
CFE8AC
B2F0B4
81FFB2
—
1.0
Fail
1.0
Fail
1.0
Fail
1.1
Fail
1.0
Fail
—
1.0
Fail
1.0
Fail
1.1
Fail
1.0
Fail
1.0
Fail
—
1.0
Fail
1.1
Fail
1.0
Fail
1.0
Fail
1.0
Fail
—
1.1
Fail
1.1
Fail
1.1
Fail
1.1
Fail
1.1
Fail
—
White BG
1.3Fail
1.4Fail
1.3Fail
1.3Fail
1.2Fail
Black BG
15.7AAA
15.5AAA
15.8AAA
16.0AAA
16.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EBEB99
E2E2AD
DADABB
CDCDC3
B8B9C5

Deuteranopia

ECEE9E
E2E2B1
D8D6BE
C9C5C6
B0A7C9

Tritanopia

F3AAAE
E2BABD
D0C6C9
B5CED1
87D3D7

Achromatopsia

DBDBDB
DADADA
DADADA
D7D7D7
D1D1D1

Shades & Tints Shades & Tints

#F4DF82

Dark
Light

#E2E19D

Dark
Light

#CFE8AC

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f4df82;
  --color-2: #e2e19d;
  --color-3: #cfe8ac;
  --color-4: #b2f0b4;
  --color-5: #81ffb2;
}

SCSS

$color-1: #f4df82;
$color-2: #e2e19d;
$color-3: #cfe8ac;
$color-4: #b2f0b4;
$color-5: #81ffb2;

TAILWIND

colors: {
  'brand-1': '#f4df82',
  'brand-2': '#e2e19d',
  'brand-3': '#cfe8ac',
  'brand-4': '#b2f0b4',
  'brand-5': '#81ffb2',
}

RGB Array

[244, 223, 130], [226, 225, 157], [207, 232, 172], [178, 240, 180], [129, 255, 178]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F4DF82, #E2E19D, #CFE8AC, #B2F0B4, #81FFB2 is ideal for: social media posters, mobile apps, e-commerce promos, health products, baby brands, fresh-style blogs. Vivid colors effectively attract user attention. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #f4df82; --color-2: #e2e19d; --color-3: #cfe8ac; --color-4: #b2f0b4; --color-5: #81ffb2. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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