← Back to Editor

#F4BB46 · #E2821D · #A50E65 · #7E095C · #5F016D

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 App

Color Details Color Details

#F4BB46

Ginger · SandyBrown · Sunflower

HEX
#F4BB46
RGB
rgb(244, 187, 70)
HSL
hsl(40, 89%, 62%)
HSB
hsb(40, 71%, 96%)
CMYK
cmyk(0%, 23%, 71%, 4%)
Oklch
oklch(82.4% 0.145 81.9)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#E2821D

Ochre · Chocolate · Amber Brown

HEX
#E2821D
RGB
rgb(226, 130, 29)
HSL
hsl(31, 77%, 50%)
HSB
hsb(31, 87%, 89%)
CMYK
cmyk(0%, 42%, 87%, 11%)
Oklch
oklch(69.7% 0.156 59.6)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

#A50E65

Rose Purple · MediumVioletRed · Camellia

HEX
#A50E65
RGB
rgb(165, 14, 101)
HSL
hsl(325, 84%, 35%)
HSB
hsb(325, 92%, 65%)
CMYK
cmyk(0%, 92%, 39%, 35%)
Oklch
oklch(47.8% 0.190 353.5)

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

#7E095C

Rose Purple · Purple · Eggplant

HEX
#7E095C
RGB
rgb(126, 9, 92)
HSL
hsl(317, 87%, 26%)
HSB
hsb(317, 93%, 49%)
CMYK
cmyk(0%, 93%, 27%, 51%)
Oklch
oklch(40.0% 0.164 344.5)

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

#5F016D

Royal Purple · Purple · Eggplant

HEX
#5F016D
RGB
rgb(95, 1, 109)
HSL
hsl(292, 98%, 22%)
HSB
hsb(292, 99%, 43%)
CMYK
cmyk(13%, 99%, 0%, 57%)
Oklch
oklch(35.2% 0.166 321.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F4BB46
4881F4

Analogous

F46548
F4BB46
D8F448

Triadic

F4BB46
48F4BB
BB48F4

Split-Comp.

F4BB46
48D8F4
6548F4

Tetradic

F4BB46
48F465
4881F4
F448D8

Contrast Matrix WCAG 2.1 Contrast

F4BB46
E2821D
A50E65
7E095C
5F016D
—
1.6
Fail
4.2
AA Large
5.8
AA
7.0
AAA
1.6
Fail
—
2.6
Fail
3.6
AA Large
4.3
AA Large
4.2
AA Large
2.6
Fail
—
1.4
Fail
1.7
Fail
5.8
AA
3.6
AA Large
1.4
Fail
—
1.2
Fail
7.0
AAA
4.3
AA Large
1.7
Fail
1.2
Fail
—
White BG
1.7Fail
2.8Fail
7.4AAA
10.1AAA
12.3AAA
Black BG
12.0AAA
7.4AAA
2.9Fail
2.1Fail
1.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

DBDB62
B8B835
646250
4B4A48
363553

Deuteranopia

DFE369
BEC53B
6C784B
525B43
3C434D

Tritanopia

F1797E
DD494D
9D3F3C
783835
5A3E3A

Achromatopsia

BFBFBF
939393
454545
353535
292929

Shades & Tints Shades & Tints

#F4BB46

Dark
Light

#E2821D

Dark
Light

#A50E65

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f4bb46;
  --color-2: #e2821d;
  --color-3: #a50e65;
  --color-4: #7e095c;
  --color-5: #5f016d;
}

SCSS

$color-1: #f4bb46;
$color-2: #e2821d;
$color-3: #a50e65;
$color-4: #7e095c;
$color-5: #5f016d;

TAILWIND

colors: {
  'brand-1': '#f4bb46',
  'brand-2': '#e2821d',
  'brand-3': '#a50e65',
  'brand-4': '#7e095c',
  'brand-5': '#5f016d',
}

RGB Array

[244, 187, 70], [226, 130, 29], [165, 14, 101], [126, 9, 92], [95, 1, 109]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F4BB46, #E2821D, #A50E65, #7E095C, #5F016D is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs. Vivid colors effectively attract user attention. 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: #f4bb46; --color-2: #e2821d; --color-3: #a50e65; --color-4: #7e095c; --color-5: #5f016d. 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. 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