← Back to Editor

#5E2D48 · #F7BC05 · #FB6A0A · #F1212D · #210228

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

#5E2D48

Rose Purple · DarkSlateGray · Camellia

HEX
#5E2D48
RGB
rgb(94, 45, 72)
HSL
hsl(327, 35%, 27%)
HSB
hsb(327, 52%, 37%)
CMYK
cmyk(0%, 52%, 23%, 63%)
Oklch
oklch(37.2% 0.080 347.5)

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

#F7BC05

Ochre · Orange · Honey Gold

HEX
#F7BC05
RGB
rgb(247, 188, 5)
HSL
hsl(45, 96%, 49%)
HSB
hsb(45, 98%, 97%)
CMYK
cmyk(0%, 24%, 98%, 3%)
Oklch
oklch(82.6% 0.169 85.6)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#FB6A0A

Tangerine · OrangeRed · Warm Sun

HEX
#FB6A0A
RGB
rgb(251, 106, 10)
HSL
hsl(24, 97%, 51%)
HSB
hsb(24, 96%, 98%)
CMYK
cmyk(0%, 58%, 96%, 2%)
Oklch
oklch(69.5% 0.197 44.8)

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

#F1212D

Vermilion · Crimson · Passion Red

HEX
#F1212D
RGB
rgb(241, 33, 45)
HSL
hsl(357, 88%, 54%)
HSB
hsb(357, 86%, 95%)
CMYK
cmyk(0%, 86%, 81%, 5%)
Oklch
oklch(61.3% 0.235 25.9)

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

#210228

Royal Purple · Black · Dark Purple

HEX
#210228
RGB
rgb(33, 2, 40)
HSL
hsl(289, 90%, 8%)
HSB
hsb(289, 95%, 16%)
CMYK
cmyk(18%, 95%, 0%, 84%)
Oklch
oklch(18.4% 0.081 319.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5E2D48
2D5D42

Analogous

5B2D5D
5E2D48
5D2D2F

Triadic

5E2D48
475D2D
2D475D

Split-Comp.

5E2D48
2F5D2D
2D5D5B

Tetradic

5E2D48
5D5B2D
2D5D42
2D2F5D

Contrast Matrix WCAG 2.1 Contrast

5E2D48
F7BC05
FB6A0A
F1212D
210228
—
6.2
AA
3.7
AA Large
2.6
Fail
1.8
Fail
6.2
AA
—
1.7
Fail
2.4
Fail
11.0
AAA
3.7
AA Large
1.7
Fail
—
1.4
Fail
6.5
AA
2.6
Fail
2.4
Fail
1.4
Fail
—
4.5
AA
1.8
Fail
11.0
AAA
6.5
AA
4.5
AA
—
White BG
10.8AAA
1.7Fail
2.9Fail
4.2AA Large
19.0AAA
Black BG
1.9Fail
12.2AAA
7.2AAA
5.0AA
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

494841
DDDD31
BCBB21
97952A
14131F

Deuteranopia

4C4F40
E1E53C
C5D027
A3B329
15181D

Tritanopia

5C3C3B
F4545C
F43438
E72827
1F1816

Achromatopsia

3F3F3F
B9B9B9
8A8A8A
616161
101010

Shades & Tints Shades & Tints

#5E2D48

Dark
Light

#F7BC05

Dark
Light

#FB6A0A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5e2d48;
  --color-2: #f7bc05;
  --color-3: #fb6a0a;
  --color-4: #f1212d;
  --color-5: #210228;
}

SCSS

$color-1: #5e2d48;
$color-2: #f7bc05;
$color-3: #fb6a0a;
$color-4: #f1212d;
$color-5: #210228;

TAILWIND

colors: {
  'brand-1': '#5e2d48',
  'brand-2': '#f7bc05',
  'brand-3': '#fb6a0a',
  'brand-4': '#f1212d',
  'brand-5': '#210228',
}

RGB Array

[94, 45, 72], [247, 188, 5], [251, 106, 10], [241, 33, 45], [33, 2, 40]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #5E2D48, #F7BC05, #FB6A0A, #F1212D, #210228 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: #5e2d48; --color-2: #f7bc05; --color-3: #fb6a0a; --color-4: #f1212d; --color-5: #210228. 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