← Back to Editor

#F5FFF8 · #E6F7EB · #F2E8C2 · #FFD4A3 · #FFBF96

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

#F5FFF8

Emerald · Snow · Mint Green

HEX
#F5FFF8
RGB
rgb(245, 255, 248)
HSL
hsl(138, 100%, 98%)
HSB
hsb(138, 4%, 100%)
CMYK
cmyk(4%, 0%, 3%, 0%)
Oklch
oklch(99.1% 0.014 155.6)

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

#E6F7EB

Emerald · Beige · Mint Green

HEX
#E6F7EB
RGB
rgb(230, 247, 235)
HSL
hsl(138, 52%, 94%)
HSB
hsb(138, 7%, 97%)
CMYK
cmyk(7%, 0%, 5%, 3%)
Oklch
oklch(96.0% 0.024 155.2)

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

#F2E8C2

Goose Yellow · Bisque · Lemon Cream

HEX
#F2E8C2
RGB
rgb(242, 232, 194)
HSL
hsl(48, 65%, 85%)
HSB
hsb(48, 20%, 95%)
CMYK
cmyk(0%, 4%, 20%, 5%)
Oklch
oklch(92.9% 0.051 95.0)

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

#FFD4A3

Goose Yellow · Wheat · Peach Orange

HEX
#FFD4A3
RGB
rgb(255, 212, 163)
HSL
hsl(32, 100%, 82%)
HSB
hsb(32, 36%, 100%)
CMYK
cmyk(0%, 17%, 36%, 0%)
Oklch
oklch(89.5% 0.080 70.2)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#FFBF96

Apricot · BurlyWood · Peach Orange

HEX
#FFBF96
RGB
rgb(255, 191, 150)
HSL
hsl(23, 100%, 79%)
HSB
hsb(23, 41%, 100%)
CMYK
cmyk(0%, 25%, 41%, 0%)
Oklch
oklch(85.4% 0.092 53.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F5FFF8
FFF5FC

Analogous

F7FFF5
F5FFF8
F5FFFD

Triadic

F5FFF8
F8F5FF
FFF8F5

Split-Comp.

F5FFF8
FDF5FF
FFF5F7

Tetradic

F5FFF8
F5F7FF
FFF5FC
FFFDF5

Contrast Matrix WCAG 2.1 Contrast

F5FFF8
E6F7EB
F2E8C2
FFD4A3
FFBF96
—
1.1
Fail
1.2
Fail
1.4
Fail
1.6
Fail
1.1
Fail
—
1.1
Fail
1.2
Fail
1.4
Fail
1.2
Fail
1.1
Fail
—
1.1
Fail
1.3
Fail
1.4
Fail
1.2
Fail
1.1
Fail
—
1.2
Fail
1.6
Fail
1.4
Fail
1.3
Fail
1.2
Fail
—
White BG
1.0Fail
1.1Fail
1.2Fail
1.4Fail
1.6Fail
Black BG
20.5AAA
18.9AAA
17.1AAA
15.2AAA
13.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F9F9FA
EDEEEE
EEEECB
ECECAF
E3E3A0

Deuteranopia

F9F8FA
ECEBEF
EEEFCD
EFF2B2
E7ECA2

Tritanopia

F6FBFB
E7F0F1
F1D2D4
FDB8BA
FCA8A9

Achromatopsia

FBFBFB
F1F1F1
E7E7E7
DBDBDB
CDCDCD

Shades & Tints Shades & Tints

#F5FFF8

Dark
Light

#E6F7EB

Dark
Light

#F2E8C2

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f5fff8;
  --color-2: #e6f7eb;
  --color-3: #f2e8c2;
  --color-4: #ffd4a3;
  --color-5: #ffbf96;
}

SCSS

$color-1: #f5fff8;
$color-2: #e6f7eb;
$color-3: #f2e8c2;
$color-4: #ffd4a3;
$color-5: #ffbf96;

TAILWIND

colors: {
  'brand-1': '#f5fff8',
  'brand-2': '#e6f7eb',
  'brand-3': '#f2e8c2',
  'brand-4': '#ffd4a3',
  'brand-5': '#ffbf96',
}

RGB Array

[245, 255, 248], [230, 247, 235], [242, 232, 194], [255, 212, 163], [255, 191, 150]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F5FFF8, #E6F7EB, #F2E8C2, #FFD4A3, #FFBF96 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: #f5fff8; --color-2: #e6f7eb; --color-3: #f2e8c2; --color-4: #ffd4a3; --color-5: #ffbf96. 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