← Back to Editor

#F7F2A3 · #F0E661 · #E3B076 · #E88997 · #9E8C7A

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

#F7F2A3

Fresh Green · Wheat · Lemon Cream

HEX
#F7F2A3
RGB
rgb(247, 242, 163)
HSL
hsl(56, 84%, 80%)
HSB
hsb(56, 34%, 97%)
CMYK
cmyk(0%, 2%, 34%, 3%)
Oklch
oklch(94.7% 0.099 105.0)

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

#F0E661

Fresh Green · Khaki · Sunflower

HEX
#F0E661
RGB
rgb(240, 230, 97)
HSL
hsl(56, 83%, 66%)
HSB
hsb(56, 60%, 94%)
CMYK
cmyk(0%, 4%, 60%, 6%)
Oklch
oklch(90.8% 0.153 105.0)

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

#E3B076

Ginger · BurlyWood · Warm Sun

HEX
#E3B076
RGB
rgb(227, 176, 118)
HSL
hsl(32, 66%, 68%)
HSB
hsb(32, 48%, 89%)
CMYK
cmyk(0%, 22%, 48%, 11%)
Oklch
oklch(79.1% 0.096 69.3)

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

#E88997

Peach Pink · LightCoral · Coral Red

HEX
#E88997
RGB
rgb(232, 137, 151)
HSL
hsl(351, 67%, 72%)
HSB
hsb(351, 41%, 91%)
CMYK
cmyk(0%, 41%, 35%, 9%)
Oklch
oklch(73.4% 0.117 10.9)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#9E8C7A

Ginger · Gray · Warm Sun

HEX
#9E8C7A
RGB
rgb(158, 140, 122)
HSL
hsl(30, 16%, 55%)
HSB
hsb(30, 23%, 62%)
CMYK
cmyk(0%, 11%, 23%, 38%)
Oklch
oklch(65.1% 0.034 67.2)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F7F2A3
A1A7F7

Analogous

F7C6A1
F7F2A3
D2F7A1

Triadic

F7F2A3
A1F7F1
F1A1F7

Split-Comp.

F7F2A3
A1D2F7
C6A1F7

Tetradic

F7F2A3
A1F7C6
A1A7F7
F7A1D2

Contrast Matrix WCAG 2.1 Contrast

F7F2A3
F0E661
E3B076
E88997
9E8C7A
—
1.1
Fail
1.7
Fail
2.2
Fail
2.8
Fail
1.1
Fail
—
1.5
Fail
1.9
Fail
2.5
Fail
1.7
Fail
1.5
Fail
—
1.3
Fail
1.7
Fail
2.2
Fail
1.9
Fail
1.3
Fail
—
1.3
Fail
2.8
Fail
2.5
Fail
1.7
Fail
1.3
Fail
—
White BG
1.2Fail
1.3Fail
2.0Fail
2.5Fail
3.2AA Large
Black BG
18.2AAA
16.2AAA
10.7AAA
8.5AAA
6.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F5F5B6
ECEC81
CDCC84
BFBE94
96967E

Deuteranopia

F5F5BB
ECED89
D0D487
C4CB93
97997F

Tritanopia

F7C5C9
F09BA0
E08F92
E39190
9D8283

Achromatopsia

EAEAEA
DADADA
B9B9B9
A7A7A7
8F8F8F

Shades & Tints Shades & Tints

#F7F2A3

Dark
Light

#F0E661

Dark
Light

#E3B076

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f7f2a3;
  --color-2: #f0e661;
  --color-3: #e3b076;
  --color-4: #e88997;
  --color-5: #9e8c7a;
}

SCSS

$color-1: #f7f2a3;
$color-2: #f0e661;
$color-3: #e3b076;
$color-4: #e88997;
$color-5: #9e8c7a;

TAILWIND

colors: {
  'brand-1': '#f7f2a3',
  'brand-2': '#f0e661',
  'brand-3': '#e3b076',
  'brand-4': '#e88997',
  'brand-5': '#9e8c7a',
}

RGB Array

[247, 242, 163], [240, 230, 97], [227, 176, 118], [232, 137, 151], [158, 140, 122]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F7F2A3, #F0E661, #E3B076, #E88997, #9E8C7A 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: #f7f2a3; --color-2: #f0e661; --color-3: #e3b076; --color-4: #e88997; --color-5: #9e8c7a. 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