← Back to Editor

#54286E · #E1334A · #FB811F · #F5C20F · #F7EC79

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

#54286E

Dark Plum · DarkSlateBlue · Eggplant

HEX
#54286E
RGB
rgb(84, 40, 110)
HSL
hsl(278, 47%, 29%)
HSB
hsb(278, 64%, 43%)
CMYK
cmyk(24%, 64%, 0%, 57%)
Oklch
oklch(37.1% 0.121 310.8)

Traditional「Dark Plum」· Paint「Eggplant」· Creative Blush Sunrise

#E1334A

Vermilion · Crimson · Passion Red

HEX
#E1334A
RGB
rgb(225, 51, 74)
HSL
hsl(352, 74%, 54%)
HSB
hsb(352, 77%, 88%)
CMYK
cmyk(0%, 77%, 67%, 12%)
Oklch
oklch(59.9% 0.208 19.6)

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

#FB811F

Tangerine · Chocolate · Warm Sun

HEX
#FB811F
RGB
rgb(251, 129, 31)
HSL
hsl(27, 96%, 55%)
HSB
hsb(27, 88%, 98%)
CMYK
cmyk(0%, 49%, 88%, 2%)
Oklch
oklch(72.9% 0.178 52.2)

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

#F5C20F

Ginger · Gold · Sunflower

HEX
#F5C20F
RGB
rgb(245, 194, 15)
HSL
hsl(47, 92%, 51%)
HSB
hsb(47, 94%, 96%)
CMYK
cmyk(0%, 21%, 94%, 4%)
Oklch
oklch(83.6% 0.169 89.2)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#F7EC79

Fresh Green · Khaki · Sunflower

HEX
#F7EC79
RGB
rgb(247, 236, 121)
HSL
hsl(55, 89%, 72%)
HSB
hsb(55, 51%, 97%)
CMYK
cmyk(0%, 4%, 51%, 3%)
Oklch
oklch(92.9% 0.137 103.8)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

54286E
416D27

Analogous

30276D
54286E
6D2763

Triadic

54286E
6D5327
276D53

Split-Comp.

54286E
636D27
276D30

Tetradic

54286E
6D3027
416D27
27636D

Contrast Matrix WCAG 2.1 Contrast

54286E
E1334A
FB811F
F5C20F
F7EC79
—
2.5
Fail
4.3
AA Large
6.6
AA
9.0
AAA
2.5
Fail
—
1.7
Fail
2.6
Fail
3.6
AA Large
4.3
AA Large
1.7
Fail
—
1.5
Fail
2.1
Fail
6.6
AA
2.6
Fail
1.5
Fail
—
1.4
Fail
9.0
AAA
3.6
AA Large
2.1
Fail
1.4
Fail
—
White BG
11.0AAA
4.4AA Large
2.5Fail
1.7Fail
1.2Fail
Black BG
1.9Fail
4.8AA
8.3AAA
12.6AAA
17.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

41415D
969444
C6C537
DFDE3A
F2F295

Deuteranopia

444759
A0AD43
CDD63C
E2E645
F3F49C

Tritanopia

52504D
D8403F
F5494E
F25D64
F6ABB0

Achromatopsia

3D3D3D
6A6A6A
9A9A9A
BDBDBD
E2E2E2

Shades & Tints Shades & Tints

#54286E

Dark
Light

#E1334A

Dark
Light

#FB811F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #54286e;
  --color-2: #e1334a;
  --color-3: #fb811f;
  --color-4: #f5c20f;
  --color-5: #f7ec79;
}

SCSS

$color-1: #54286e;
$color-2: #e1334a;
$color-3: #fb811f;
$color-4: #f5c20f;
$color-5: #f7ec79;

TAILWIND

colors: {
  'brand-1': '#54286e',
  'brand-2': '#e1334a',
  'brand-3': '#fb811f',
  'brand-4': '#f5c20f',
  'brand-5': '#f7ec79',
}

RGB Array

[84, 40, 110], [225, 51, 74], [251, 129, 31], [245, 194, 15], [247, 236, 121]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #54286E, #E1334A, #FB811F, #F5C20F, #F7EC79 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: #54286e; --color-2: #e1334a; --color-3: #fb811f; --color-4: #f5c20f; --color-5: #f7ec79. 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