← Back to Editor

#F4DF00 · #FDC700 · #E77B00 · #54005C · #8D0087

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

#F4DF00

Autumn Sage · Gold · Honey Gold

HEX
#F4DF00
RGB
rgb(244, 223, 0)
HSL
hsl(55, 100%, 48%)
HSB
hsb(55, 100%, 96%)
CMYK
cmyk(0%, 9%, 100%, 4%)
Oklch
oklch(89.3% 0.187 102.6)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#FDC700

Ochre · Gold · Honey Gold

HEX
#FDC700
RGB
rgb(253, 199, 0)
HSL
hsl(47, 100%, 50%)
HSB
hsb(47, 100%, 99%)
CMYK
cmyk(0%, 21%, 100%, 1%)
Oklch
oklch(85.4% 0.174 88.8)

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

#E77B00

Ochre · Chocolate · Amber Brown

HEX
#E77B00
RGB
rgb(231, 123, 0)
HSL
hsl(32, 100%, 45%)
HSB
hsb(32, 100%, 91%)
CMYK
cmyk(0%, 47%, 100%, 9%)
Oklch
oklch(69.1% 0.168 56.6)

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

#54005C

Royal Purple · Purple · Dark Purple

HEX
#54005C
RGB
rgb(84, 0, 92)
HSL
hsl(295, 100%, 18%)
HSB
hsb(295, 100%, 36%)
CMYK
cmyk(9%, 100%, 0%, 64%)
Oklch
oklch(31.9% 0.150 323.9)

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

#8D0087

Rose Purple · DarkMagenta · Eggplant

HEX
#8D0087
RGB
rgb(141, 0, 135)
HSL
hsl(303, 100%, 28%)
HSB
hsb(303, 100%, 55%)
CMYK
cmyk(0%, 100%, 4%, 45%)
Oklch
oklch(44.8% 0.203 330.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F4DF00
0014F5

Analogous

F56600
F4DF00
8FF500

Triadic

F4DF00
00F5E0
E000F5

Split-Comp.

F4DF00
008FF5
6600F5

Tetradic

F4DF00
00F566
0014F5
F5008F

Contrast Matrix WCAG 2.1 Contrast

F4DF00
FDC700
E77B00
54005C
8D0087
—
1.2
Fail
2.1
Fail
10.1
AAA
6.2
AA
1.2
Fail
—
1.8
Fail
8.7
AAA
5.4
AA
2.1
Fail
1.8
Fail
—
4.7
AA
2.9
Fail
10.1
AAA
8.7
AAA
4.7
AA
—
1.6
Fail
6.2
AA
5.4
AA
2.9
Fail
1.6
Fail
—
White BG
1.4Fail
1.6Fail
2.9Fail
13.7AAA
8.5AAA
Black BG
15.4AAA
13.3AAA
7.2AAA
1.5Fail
2.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

EBEB36
E6E530
B8B71E
302F46
504F66

Deuteranopia

ECEE43
E9ED3C
BFC725
353B40
58635F

Tritanopia

F3616A
FA565F
E2353A
503430
864D47

Achromatopsia

CCCCCC
C0C0C0
8D8D8D
242424
3A3A3A

Shades & Tints Shades & Tints

#F4DF00

Dark
Light

#FDC700

Dark
Light

#E77B00

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f4df00;
  --color-2: #fdc700;
  --color-3: #e77b00;
  --color-4: #54005c;
  --color-5: #8d0087;
}

SCSS

$color-1: #f4df00;
$color-2: #fdc700;
$color-3: #e77b00;
$color-4: #54005c;
$color-5: #8d0087;

TAILWIND

colors: {
  'brand-1': '#f4df00',
  'brand-2': '#fdc700',
  'brand-3': '#e77b00',
  'brand-4': '#54005c',
  'brand-5': '#8d0087',
}

RGB Array

[244, 223, 0], [253, 199, 0], [231, 123, 0], [84, 0, 92], [141, 0, 135]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F4DF00, #FDC700, #E77B00, #54005C, #8D0087 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: #f4df00; --color-2: #fdc700; --color-3: #e77b00; --color-4: #54005c; --color-5: #8d0087. 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