← Back to Editor

#F8E9A8 · #F9B984 · #F86254 · #AD0E3A · #300018

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

#F8E9A8

Goose Yellow · Wheat · Lemon Cream

HEX
#F8E9A8
RGB
rgb(248, 233, 168)
HSL
hsl(49, 85%, 82%)
HSB
hsb(49, 32%, 97%)
CMYK
cmyk(0%, 6%, 32%, 3%)
Oklch
oklch(93.1% 0.084 96.7)

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

#F9B984

Apricot · BurlyWood · Warm Sun

HEX
#F9B984
RGB
rgb(249, 185, 132)
HSL
hsl(27, 91%, 75%)
HSB
hsb(27, 47%, 98%)
CMYK
cmyk(0%, 26%, 47%, 2%)
Oklch
oklch(83.3% 0.101 60.4)

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

#F86254

Peach Pink · Tomato · Coral Red

HEX
#F86254
RGB
rgb(248, 98, 84)
HSL
hsl(5, 92%, 65%)
HSB
hsb(5, 66%, 97%)
CMYK
cmyk(0%, 60%, 66%, 3%)
Oklch
oklch(68.6% 0.187 28.2)

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

#AD0E3A

Dark Violet · FireBrick · Camellia

HEX
#AD0E3A
RGB
rgb(173, 14, 58)
HSL
hsl(343, 85%, 37%)
HSB
hsb(343, 92%, 68%)
CMYK
cmyk(0%, 92%, 66%, 32%)
Oklch
oklch(48.0% 0.185 15.1)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#300018

Dark Violet · Black · Raspberry

HEX
#300018
RGB
rgb(48, 0, 24)
HSL
hsl(330, 100%, 9%)
HSB
hsb(330, 100%, 19%)
CMYK
cmyk(0%, 100%, 50%, 81%)
Oklch
oklch(20.2% 0.083 355.4)

Traditional「Dark Violet」· Paint「Raspberry」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F8E9A8
AAB8F8

Analogous

F8C3AA
F8E9A8
DFF8AA

Triadic

F8E9A8
AAF8EA
EAAAF8

Split-Comp.

F8E9A8
AADFF8
C3AAF8

Tetradic

F8E9A8
AAF8C3
AAB8F8
F8AADF

Contrast Matrix WCAG 2.1 Contrast

F8E9A8
F9B984
F86254
AD0E3A
300018
—
1.4
Fail
2.5
Fail
5.9
AA
15.1
AAA
1.4
Fail
—
1.8
Fail
4.2
AA Large
10.8
AAA
2.5
Fail
1.8
Fail
—
2.4
Fail
6.0
AA
5.9
AA
4.2
AA Large
2.4
Fail
—
2.5
Fail
15.1
AAA
10.8
AAA
6.0
AA
2.5
Fail
—
White BG
1.2Fail
1.7Fail
3.1AA Large
7.2AAA
18.4AAA
Black BG
17.2AAA
12.3AAA
6.9AA
2.9Fail
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

F2F1B8
DDDD91
B7B657
68672F
1B1B12

Deuteranopia

F2F4BC
E1E694
C0CB58
717D2D
1E2211

Tritanopia

F7C4C7
F69B9D
F15A5B
A52725
2E0E0D

Achromatopsia

E6E6E6
C6C6C6
8D8D8D
434343
111111

Shades & Tints Shades & Tints

#F8E9A8

Dark
Light

#F9B984

Dark
Light

#F86254

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f8e9a8;
  --color-2: #f9b984;
  --color-3: #f86254;
  --color-4: #ad0e3a;
  --color-5: #300018;
}

SCSS

$color-1: #f8e9a8;
$color-2: #f9b984;
$color-3: #f86254;
$color-4: #ad0e3a;
$color-5: #300018;

TAILWIND

colors: {
  'brand-1': '#f8e9a8',
  'brand-2': '#f9b984',
  'brand-3': '#f86254',
  'brand-4': '#ad0e3a',
  'brand-5': '#300018',
}

RGB Array

[248, 233, 168], [249, 185, 132], [248, 98, 84], [173, 14, 58], [48, 0, 24]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F8E9A8, #F9B984, #F86254, #AD0E3A, #300018 is ideal for: social media posters, mobile apps, e-commerce promos, 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: #f8e9a8; --color-2: #f9b984; --color-3: #f86254; --color-4: #ad0e3a; --color-5: #300018. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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