← Back to Editor

#F50100 · #E2895D · #BF0038 · #4E003C · #24033C

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

#F50100

Vermilion · Red · Passion Red

HEX
#F50100
RGB
rgb(245, 1, 0)
HSL
hsl(0, 100%, 48%)
HSB
hsb(0, 100%, 96%)
CMYK
cmyk(0%, 100%, 100%, 4%)
Oklch
oklch(60.9% 0.250 29.3)

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

#E2895D

Apricot · DarkSalmon · Warm Sun

HEX
#E2895D
RGB
rgb(226, 137, 93)
HSL
hsl(20, 70%, 63%)
HSB
hsb(20, 59%, 89%)
CMYK
cmyk(0%, 39%, 59%, 11%)
Oklch
oklch(71.5% 0.124 46.4)

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

#BF0038

Dark Violet · Crimson · Camellia

HEX
#BF0038
RGB
rgb(191, 0, 56)
HSL
hsl(342, 100%, 37%)
HSB
hsb(342, 100%, 75%)
CMYK
cmyk(0%, 100%, 71%, 25%)
Oklch
oklch(51.0% 0.204 17.4)

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

#4E003C

Rose Purple · Maroon · Dark Purple

HEX
#4E003C
RGB
rgb(78, 0, 60)
HSL
hsl(314, 100%, 15%)
HSB
hsb(314, 100%, 31%)
CMYK
cmyk(0%, 100%, 23%, 69%)
Oklch
oklch(28.6% 0.124 340.8)

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

#24033C

Royal Purple · MidnightBlue · Dark Purple

HEX
#24033C
RGB
rgb(36, 3, 60)
HSL
hsl(275, 90%, 12%)
HSB
hsb(275, 95%, 24%)
CMYK
cmyk(40%, 95%, 0%, 76%)
Oklch
oklch(21.1% 0.101 305.5)

Traditional「Royal Purple」· Paint「Dark Purple」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F50100
00F5F5

Analogous

F5007A
F50100
F57A00

Triadic

F50100
00F500
0000F5

Split-Comp.

F50100
00F57A
007AF5

Tetradic

F50100
7AF500
00F5F5
7A00F5

Contrast Matrix WCAG 2.1 Contrast

F50100
E2895D
BF0038
4E003C
24033C
—
1.6
Fail
1.5
Fail
3.5
AA Large
4.2
AA Large
1.6
Fail
—
2.4
Fail
5.7
AA
6.9
AA
1.5
Fail
2.4
Fail
—
2.4
Fail
2.8
Fail
3.5
AA Large
5.7
AA
2.4
Fail
—
1.2
Fail
4.2
AA Large
6.9
AA
2.8
Fail
1.2
Fail
—
White BG
4.3AA Large
2.6Fail
6.4AA
15.1AAA
18.2AAA
Black BG
4.9AA
8.0AAA
3.3AA Large
1.4Fail
1.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

8B8900
BBBB68
6C6B2A
2C2C2D
16152E

Deuteranopia

9AAC00
C1C76A
778627
31372A
181A2B

Tritanopia

E90000
DE7072
B5201D
4A2220
222321

Achromatopsia

4A4A4A
9F9F9F
3F3F3F
1E1E1E
131313

Shades & Tints Shades & Tints

#F50100

Dark
Light

#E2895D

Dark
Light

#BF0038

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f50100;
  --color-2: #e2895d;
  --color-3: #bf0038;
  --color-4: #4e003c;
  --color-5: #24033c;
}

SCSS

$color-1: #f50100;
$color-2: #e2895d;
$color-3: #bf0038;
$color-4: #4e003c;
$color-5: #24033c;

TAILWIND

colors: {
  'brand-1': '#f50100',
  'brand-2': '#e2895d',
  'brand-3': '#bf0038',
  'brand-4': '#4e003c',
  'brand-5': '#24033c',
}

RGB Array

[245, 1, 0], [226, 137, 93], [191, 0, 56], [78, 0, 60], [36, 3, 60]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F50100, #E2895D, #BF0038, #4E003C, #24033C is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs, 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: #f50100; --color-2: #e2895d; --color-3: #bf0038; --color-4: #4e003c; --color-5: #24033c. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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