← Back to Editor

#F9E4A3 · #FBBB7E · #F2A77F · #D38A77 · #624C4E

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 AppData Visualization

Color Details Color Details

#F9E4A3

Goose Yellow · Wheat · Lemon Cream

HEX
#F9E4A3
RGB
rgb(249, 228, 163)
HSL
hsl(45, 88%, 81%)
HSB
hsb(45, 35%, 98%)
CMYK
cmyk(0%, 8%, 35%, 2%)
Oklch
oklch(92.1% 0.086 92.3)

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

#FBBB7E

Apricot · LightSalmon · Warm Sun

HEX
#FBBB7E
RGB
rgb(251, 187, 126)
HSL
hsl(29, 94%, 74%)
HSB
hsb(29, 50%, 98%)
CMYK
cmyk(0%, 25%, 50%, 2%)
Oklch
oklch(83.8% 0.107 64.1)

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

#F2A77F

Apricot · LightSalmon · Warm Sun

HEX
#F2A77F
RGB
rgb(242, 167, 127)
HSL
hsl(21, 82%, 72%)
HSB
hsb(21, 48%, 95%)
CMYK
cmyk(0%, 31%, 48%, 5%)
Oklch
oklch(79.2% 0.104 48.8)

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

#D38A77

Peach Pink · DarkSalmon · Coral Red

HEX
#D38A77
RGB
rgb(211, 138, 119)
HSL
hsl(12, 51%, 65%)
HSB
hsb(12, 44%, 83%)
CMYK
cmyk(0%, 35%, 44%, 17%)
Oklch
oklch(70.3% 0.094 35.3)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#624C4E

Crimson · DimGray · Wine Red

HEX
#624C4E
RGB
rgb(98, 76, 78)
HSL
hsl(355, 13%, 34%)
HSB
hsb(355, 22%, 38%)
CMYK
cmyk(0%, 22%, 20%, 62%)
Oklch
oklch(44.0% 0.030 12.2)

Traditional「Crimson」· Paint「Wine Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F9E4A3
A4B9F9

Analogous

F9B9A4
F9E4A3
E4F9A4

Triadic

F9E4A3
A4F9E4
E4A4F9

Split-Comp.

F9E4A3
A4E4F9
B9A4F9

Tetradic

F9E4A3
A4F9B9
A4B9F9
F9A4E4

Contrast Matrix WCAG 2.1 Contrast

F9E4A3
FBBB7E
F2A77F
D38A77
624C4E
—
1.3
Fail
1.6
Fail
2.2
Fail
6.3
AA
1.3
Fail
—
1.2
Fail
1.6
Fail
4.7
AA
1.6
Fail
1.2
Fail
—
1.4
Fail
4.0
AA Large
2.2
Fail
1.6
Fail
1.4
Fail
—
2.9
Fail
6.3
AA
4.7
AA
4.0
AA Large
2.9
Fail
—
White BG
1.3Fail
1.7Fail
2.0Fail
2.7Fail
7.9AAA
Black BG
16.7AAA
12.5AAA
10.6AAA
7.7AAA
2.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

F0F0B3
DFDF8D
D2D189
B3B37C
58584E

Deuteranopia

F1F3B7
E3E890
D6DB8B
B8BD7D
5A5B4D

Tritanopia

F8BFC2
F8989B
EE9092
CF7F80
614D4D

Achromatopsia

E3E3E3
C7C7C7
B9B9B9
9E9E9E
535353

Shades & Tints Shades & Tints

#F9E4A3

Dark
Light

#FBBB7E

Dark
Light

#F2A77F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f9e4a3;
  --color-2: #fbbb7e;
  --color-3: #f2a77f;
  --color-4: #d38a77;
  --color-5: #624c4e;
}

SCSS

$color-1: #f9e4a3;
$color-2: #fbbb7e;
$color-3: #f2a77f;
$color-4: #d38a77;
$color-5: #624c4e;

TAILWIND

colors: {
  'brand-1': '#f9e4a3',
  'brand-2': '#fbbb7e',
  'brand-3': '#f2a77f',
  'brand-4': '#d38a77',
  'brand-5': '#624c4e',
}

RGB Array

[249, 228, 163], [251, 187, 126], [242, 167, 127], [211, 138, 119], [98, 76, 78]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F9E4A3, #FBBB7E, #F2A77F, #D38A77, #624C4E is ideal for: social media posters, mobile apps, e-commerce promos, health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. 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: #f9e4a3; --color-2: #fbbb7e; --color-3: #f2a77f; --color-4: #d38a77; --color-5: #624c4e. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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