← Back to Editor

#FFFBF0 · #F84258 · #1A1819 · #03867E · #503A47

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#FFFBF0

Goose Yellow · SeaShell · Lemon Cream

HEX
#FFFBF0
RGB
rgb(255, 251, 240)
HSL
hsl(44, 100%, 97%)
HSB
hsb(44, 6%, 100%)
CMYK
cmyk(0%, 2%, 6%, 0%)
Oklch
oklch(98.8% 0.015 90.2)

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

#F84258

Peach Pink · Tomato · Coral Red

HEX
#F84258
RGB
rgb(248, 66, 88)
HSL
hsl(353, 93%, 62%)
HSB
hsb(353, 73%, 97%)
CMYK
cmyk(0%, 73%, 65%, 3%)
Oklch
oklch(65.3% 0.217 19.3)

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

#1A1819

Ink Black · Black · Jet Black

HEX
#1A1819
RGB
rgb(26, 24, 25)
HSL
hsl(330, 4%, 10%)
HSB
hsb(330, 8%, 10%)
CMYK
cmyk(0%, 8%, 4%, 90%)
Oklch
oklch(21.2% 0.004 345.6)

Traditional「Ink Black」· Paint「Jet Black」· Creative Midnight Shadow

#03867E

Mineral Blue · Teal · Mint Ice

HEX
#03867E
RGB
rgb(3, 134, 126)
HSL
hsl(176, 96%, 27%)
HSB
hsb(176, 98%, 53%)
CMYK
cmyk(98%, 0%, 6%, 47%)
Oklch
oklch(55.9% 0.097 187.4)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#503A47

Rose Purple · DarkSlateGray · Camellia

HEX
#503A47
RGB
rgb(80, 58, 71)
HSL
hsl(325, 16%, 27%)
HSB
hsb(325, 28%, 31%)
CMYK
cmyk(0%, 28%, 11%, 69%)
Oklch
oklch(37.8% 0.037 342.8)

Traditional「Rose Purple」· Paint「Camellia」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFFBF0
F0F4FF

Analogous

FFF3F0
FFFBF0
FBFFF0

Triadic

FFFBF0
F0FFFB
FBF0FF

Split-Comp.

FFFBF0
F0FBFF
F3F0FF

Tetradic

FFFBF0
F0FFF3
F0F4FF
FFF0FB

Contrast Matrix WCAG 2.1 Contrast

FFFBF0
F84258
1A1819
03867E
503A47
—
3.4
AA Large
17.1
AAA
4.3
AA Large
10.0
AAA
3.4
AA Large
—
5.0
AA
1.3
Fail
2.9
Fail
17.1
AAA
5.0
AA
—
4.0
AA Large
1.7
Fail
4.3
AA Large
1.3
Fail
4.0
AA Large
—
2.3
Fail
10.0
AAA
2.9
Fail
1.7
Fail
2.3
Fail
—
White BG
1.0Fail
3.6AA Large
17.7AAA
4.5AA Large
10.3AAA
Black BG
20.3AAA
5.9AA
1.2Fail
4.7AA
2.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

FDFDF3
A9A853
191919
3C3D80
464644

Deuteranopia

FEFEF3
B4C151
191919
342A80
484943

Tritanopia

FFF5F5
EF4E4E
1A1919
0A8182
4F4141

Achromatopsia

FBFBFB
7B7B7B
191919
5E5E5E
424242

Shades & Tints Shades & Tints

#FFFBF0

Dark
Light

#F84258

Dark
Light

#1A1819

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fffbf0;
  --color-2: #f84258;
  --color-3: #1a1819;
  --color-4: #03867e;
  --color-5: #503a47;
}

SCSS

$color-1: #fffbf0;
$color-2: #f84258;
$color-3: #1a1819;
$color-4: #03867e;
$color-5: #503a47;

TAILWIND

colors: {
  'brand-1': '#fffbf0',
  'brand-2': '#f84258',
  'brand-3': '#1a1819',
  'brand-4': '#03867e',
  'brand-5': '#503a47',
}

RGB Array

[255, 251, 240], [248, 66, 88], [26, 24, 25], [3, 134, 126], [80, 58, 71]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFFBF0, #F84258, #1A1819, #03867E, #503A47 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: #fffbf0; --color-2: #f84258; --color-3: #1a1819; --color-4: #03867e; --color-5: #503a47. 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