← Back to Editor

#FF0051 · #B10050 · #010221 · #FF7F51 · #57013F

warm

A 5-color warm 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

#FF0051

Dark Violet · Crimson · Camellia

HEX
#FF0051
RGB
rgb(255, 0, 81)
HSL
hsl(341, 100%, 50%)
HSB
hsb(341, 100%, 100%)
CMYK
cmyk(0%, 100%, 68%, 0%)
Oklch
oklch(63.5% 0.254 16.6)

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

#B10050

Dark Violet · Crimson · Camellia

HEX
#B10050
RGB
rgb(177, 0, 80)
HSL
hsl(333, 100%, 35%)
HSB
hsb(333, 100%, 69%)
CMYK
cmyk(0%, 100%, 55%, 31%)
Oklch
oklch(48.9% 0.196 5.5)

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

#010221

Indigo · Black · Deep Sea Blue

HEX
#010221
RGB
rgb(1, 2, 33)
HSL
hsl(238, 94%, 7%)
HSB
hsb(238, 97%, 13%)
CMYK
cmyk(97%, 94%, 0%, 87%)
Oklch
oklch(12.4% 0.070 267.5)

Traditional「Indigo」· Paint「Deep Sea Blue」· Creative Blush Sunrise

#FF7F51

Apricot · Coral · Warm Sun

HEX
#FF7F51
RGB
rgb(255, 127, 81)
HSL
hsl(16, 100%, 66%)
HSB
hsb(16, 68%, 100%)
CMYK
cmyk(0%, 50%, 68%, 0%)
Oklch
oklch(73.5% 0.168 39.9)

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

#57013F

Rose Purple · Maroon · Dark Purple

HEX
#57013F
RGB
rgb(87, 1, 63)
HSL
hsl(317, 98%, 17%)
HSB
hsb(317, 99%, 34%)
CMYK
cmyk(0%, 99%, 28%, 66%)
Oklch
oklch(30.6% 0.129 343.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FF0051
00FFAE

Analogous

FF00D0
FF0051
FF2F00

Triadic

FF0051
51FF00
0051FF

Split-Comp.

FF0051
00FF2F
00D0FF

Tetradic

FF0051
D0FF00
00FFAE
2F00FF

Contrast Matrix WCAG 2.1 Contrast

FF0051
B10050
010221
FF7F51
57013F
—
1.8
Fail
5.2
AA
1.6
Fail
3.6
AA Large
1.8
Fail
—
2.9
Fail
2.8
Fail
2.0
Fail
5.2
AA
2.9
Fail
—
8.1
AAA
1.4
Fail
1.6
Fail
2.8
Fail
8.1
AAA
—
5.7
AA
3.6
AA Large
2.0
Fail
1.4
Fail
5.7
AA
—
White BG
3.9AA Large
7.0AAA
20.4AAA
2.5Fail
14.2AAA
Black BG
5.4AA
3.0Fail
1.0Fail
8.4AAA
1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

918E3D
64633D
010119
C8C65C
323130

Deuteranopia

9FB339
6F7C38
010118
CFD95F
373D2C

Tritanopia

F22E2B
A82D2A
011412
F96567
532422

Achromatopsia

555555
3E3E3E
050505
A0A0A0
222222

Shades & Tints Shades & Tints

#FF0051

Dark
Light

#B10050

Dark
Light

#010221

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ff0051;
  --color-2: #b10050;
  --color-3: #010221;
  --color-4: #ff7f51;
  --color-5: #57013f;
}

SCSS

$color-1: #ff0051;
$color-2: #b10050;
$color-3: #010221;
$color-4: #ff7f51;
$color-5: #57013f;

TAILWIND

colors: {
  'brand-1': '#ff0051',
  'brand-2': '#b10050',
  'brand-3': '#010221',
  'brand-4': '#ff7f51',
  'brand-5': '#57013f',
}

RGB Array

[255, 0, 81], [177, 0, 80], [1, 2, 33], [255, 127, 81], [87, 1, 63]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #FF0051, #B10050, #010221, #FF7F51, #57013F 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: #ff0051; --color-2: #b10050; --color-3: #010221; --color-4: #ff7f51; --color-5: #57013f. 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 warm-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