← Back to Editor

#F3F7EB · #E9FFAF · #D0D372 · #FFB17E · #FFCFAF

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

#F3F7EB

Willow Green · Linen · Mint Green

HEX
#F3F7EB
RGB
rgb(243, 247, 235)
HSL
hsl(80, 43%, 95%)
HSB
hsb(80, 5%, 97%)
CMYK
cmyk(2%, 0%, 5%, 3%)
Oklch
oklch(97.0% 0.016 121.8)

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

#E9FFAF

Willow Green · Wheat · Mint Green

HEX
#E9FFAF
RGB
rgb(233, 255, 175)
HSL
hsl(77, 100%, 84%)
HSB
hsb(77, 31%, 100%)
CMYK
cmyk(9%, 0%, 31%, 0%)
Oklch
oklch(96.5% 0.104 120.9)

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

#D0D372

Fresh Green · BurlyWood · Sunflower

HEX
#D0D372
RGB
rgb(208, 211, 114)
HSL
hsl(62, 52%, 64%)
HSB
hsb(62, 46%, 83%)
CMYK
cmyk(1%, 0%, 46%, 17%)
Oklch
oklch(84.4% 0.121 110.3)

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

#FFB17E

Apricot · LightSalmon · Warm Sun

HEX
#FFB17E
RGB
rgb(255, 177, 126)
HSL
hsl(24, 100%, 75%)
HSB
hsb(24, 51%, 100%)
CMYK
cmyk(0%, 31%, 51%, 0%)
Oklch
oklch(82.4% 0.113 53.7)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#FFCFAF

Apricot · Wheat · Peach Orange

HEX
#FFCFAF
RGB
rgb(255, 207, 175)
HSL
hsl(24, 100%, 84%)
HSB
hsb(24, 31%, 100%)
CMYK
cmyk(0%, 19%, 31%, 0%)
Oklch
oklch(88.8% 0.069 55.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F3F7EB
F0EDF8

Analogous

F8F6ED
F3F7EB
EFF8ED

Triadic

F3F7EB
EDF4F8
F8EDF4

Split-Comp.

F3F7EB
EDEFF8
F6EDF8

Tetradic

F3F7EB
EDF8F6
F0EDF8
F8EDEF

Contrast Matrix WCAG 2.1 Contrast

F3F7EB
E9FFAF
D0D372
FFB17E
FFCFAF
—
1.0
Fail
1.5
Fail
1.6
Fail
1.3
Fail
1.0
Fail
—
1.5
Fail
1.6
Fail
1.3
Fail
1.5
Fail
1.5
Fail
—
1.1
Fail
1.1
Fail
1.6
Fail
1.6
Fail
1.1
Fail
—
1.2
Fail
1.3
Fail
1.3
Fail
1.1
Fail
1.2
Fail
—
White BG
1.1Fail
1.1Fail
1.6Fail
1.8Fail
1.4Fail
Black BG
19.3AAA
19.4AAA
13.2AAA
11.8AAA
14.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F5F5EE
F3F3C2
D1D189
DDDD8A
EAEAB7

Deuteranopia

F5F4EF
F1F0C7
D1D18F
E2E88D
EDF1B9

Tritanopia

F3F0F1
EAD2D5
D09CA0
FB9496
FDBDBE

Achromatopsia

F4F4F4
EFEFEF
C7C7C7
C3C3C3
DADADA

Shades & Tints Shades & Tints

#F3F7EB

Dark
Light

#E9FFAF

Dark
Light

#D0D372

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f3f7eb;
  --color-2: #e9ffaf;
  --color-3: #d0d372;
  --color-4: #ffb17e;
  --color-5: #ffcfaf;
}

SCSS

$color-1: #f3f7eb;
$color-2: #e9ffaf;
$color-3: #d0d372;
$color-4: #ffb17e;
$color-5: #ffcfaf;

TAILWIND

colors: {
  'brand-1': '#f3f7eb',
  'brand-2': '#e9ffaf',
  'brand-3': '#d0d372',
  'brand-4': '#ffb17e',
  'brand-5': '#ffcfaf',
}

RGB Array

[243, 247, 235], [233, 255, 175], [208, 211, 114], [255, 177, 126], [255, 207, 175]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F3F7EB, #E9FFAF, #D0D372, #FFB17E, #FFCFAF 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: #f3f7eb; --color-2: #e9ffaf; --color-3: #d0d372; --color-4: #ffb17e; --color-5: #ffcfaf. 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