← Back to Editor

#F9F4F1 · #FB7C0B · #FC1543 · #7A2F44 · #2A2118

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

#F9F4F1

Apricot · SeaShell · Peach Orange

HEX
#F9F4F1
RGB
rgb(249, 244, 241)
HSL
hsl(23, 40%, 96%)
HSB
hsb(23, 3%, 98%)
CMYK
cmyk(0%, 2%, 3%, 2%)
Oklch
oklch(97.0% 0.007 53.4)

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

#FB7C0B

Tangerine · Orange · Warm Sun

HEX
#FB7C0B
RGB
rgb(251, 124, 11)
HSL
hsl(28, 97%, 51%)
HSB
hsb(28, 96%, 98%)
CMYK
cmyk(0%, 51%, 96%, 2%)
Oklch
oklch(72.1% 0.184 51.6)

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

#FC1543

Vermilion · Crimson · Passion Red

HEX
#FC1543
RGB
rgb(252, 21, 67)
HSL
hsl(348, 97%, 54%)
HSB
hsb(348, 92%, 99%)
CMYK
cmyk(0%, 92%, 73%, 1%)
Oklch
oklch(63.1% 0.247 20.7)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#7A2F44

Dark Violet · Brown · Camellia

HEX
#7A2F44
RGB
rgb(122, 47, 68)
HSL
hsl(343, 44%, 33%)
HSB
hsb(343, 61%, 48%)
CMYK
cmyk(0%, 61%, 44%, 52%)
Oklch
oklch(41.8% 0.106 5.5)

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

#2A2118

Ochre · Black · Cinnamon

HEX
#2A2118
RGB
rgb(42, 33, 24)
HSL
hsl(30, 27%, 13%)
HSB
hsb(30, 43%, 16%)
CMYK
cmyk(0%, 21%, 43%, 84%)
Oklch
oklch(25.5% 0.021 66.6)

Traditional「Ochre」· Paint「Cinnamon」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F9F4F1
F1F6F9

Analogous

F9F1F2
F9F4F1
F9F8F1

Triadic

F9F4F1
F1F9F4
F4F1F9

Split-Comp.

F9F4F1
F1F9F8
F1F2F9

Tetradic

F9F4F1
F2F9F1
F1F6F9
F8F1F9

Contrast Matrix WCAG 2.1 Contrast

F9F4F1
FB7C0B
FC1543
7A2F44
2A2118
—
2.4
Fail
3.6
AA Large
8.3
AAA
14.5
AAA
2.4
Fail
—
1.5
Fail
3.4
AA Large
6.0
AA
3.6
AA Large
1.5
Fail
—
2.3
Fail
4.0
AA Large
8.3
AAA
3.4
AA Large
2.3
Fail
—
1.7
Fail
14.5
AAA
6.0
AA
4.0
AA Large
1.7
Fail
—
White BG
1.1Fail
2.6Fail
3.9AA Large
9.1AAA
15.8AAA
Black BG
19.2AAA
8.0AAA
5.3AA
2.3Fail
1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

F7F7F2
C4C326
989638
5A593F
26261A

Deuteranopia

F7F8F2
CBD52D
A5B735
5E633E
27271B

Tritanopia

F9F2F2
F53C41
F02F2D
763B3A
2A1C1C

Achromatopsia

F5F5F5
959595
5F5F5F
484848
232323

Shades & Tints Shades & Tints

#F9F4F1

Dark
Light

#FB7C0B

Dark
Light

#FC1543

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f9f4f1;
  --color-2: #fb7c0b;
  --color-3: #fc1543;
  --color-4: #7a2f44;
  --color-5: #2a2118;
}

SCSS

$color-1: #f9f4f1;
$color-2: #fb7c0b;
$color-3: #fc1543;
$color-4: #7a2f44;
$color-5: #2a2118;

TAILWIND

colors: {
  'brand-1': '#f9f4f1',
  'brand-2': '#fb7c0b',
  'brand-3': '#fc1543',
  'brand-4': '#7a2f44',
  'brand-5': '#2a2118',
}

RGB Array

[249, 244, 241], [251, 124, 11], [252, 21, 67], [122, 47, 68], [42, 33, 24]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F9F4F1, #FB7C0B, #FC1543, #7A2F44, #2A2118 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: #f9f4f1; --color-2: #fb7c0b; --color-3: #fc1543; --color-4: #7a2f44; --color-5: #2a2118. 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