← Back to Editor

#FFA10A · #F70080 · #FFFFFF · #ED4F00 · #9FF500

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

#FFA10A

Ginger · Orange · Warm Sun

HEX
#FFA10A
RGB
rgb(255, 161, 10)
HSL
hsl(37, 100%, 52%)
HSB
hsb(37, 96%, 100%)
CMYK
cmyk(0%, 37%, 96%, 0%)
Oklch
oklch(78.6% 0.171 68.3)

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

#F70080

Rose Purple · DeepPink · Camellia

HEX
#F70080
RGB
rgb(247, 0, 128)
HSL
hsl(329, 100%, 48%)
HSB
hsb(329, 100%, 97%)
CMYK
cmyk(0%, 100%, 48%, 3%)
Oklch
oklch(63.1% 0.255 1.1)

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

#FFFFFF

Moonlight White · White · Cloud White

HEX
#FFFFFF
RGB
rgb(255, 255, 255)
HSL
hsl(0, 0%, 100%)
HSB
hsb(0, 0%, 100%)
CMYK
cmyk(0%, 0%, 0%, 0%)
Oklch
oklch(100.0% 0.000 89.9)

Traditional「Moonlight White」· Paint「Cloud White」· Creative Morning Mist

#ED4F00

Tangerine · OrangeRed · Amber Brown

HEX
#ED4F00
RGB
rgb(237, 79, 0)
HSL
hsl(20, 100%, 46%)
HSB
hsb(20, 100%, 93%)
CMYK
cmyk(0%, 67%, 100%, 7%)
Oklch
oklch(64.0% 0.205 39.0)

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

#9FF500

Grass Green · Chartreuse · Olive Green

HEX
#9FF500
RGB
rgb(159, 245, 0)
HSL
hsl(81, 100%, 48%)
HSB
hsb(81, 100%, 96%)
CMYK
cmyk(35%, 0%, 100%, 4%)
Oklch
oklch(88.1% 0.239 130.6)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFA10A
0A68FF

Analogous

FF270A
FFA10A
E2FF0A

Triadic

FFA10A
0AFFA1
A10AFF

Split-Comp.

FFA10A
0AE2FF
270AFF

Tetradic

FFA10A
0AFF27
0A68FF
FF0AE2

Contrast Matrix WCAG 2.1 Contrast

FFA10A
F70080
FFFFFF
ED4F00
9FF500
—
2.0
Fail
2.0
Fail
1.8
Fail
1.5
Fail
2.0
Fail
—
4.0
AA Large
1.1
Fail
2.9
Fail
2.0
Fail
4.0
AA Large
—
3.7
AA Large
1.4
Fail
1.8
Fail
1.1
Fail
3.7
AA Large
—
2.7
Fail
1.5
Fail
2.9
Fail
1.4
Fail
2.7
Fail
—
White BG
2.0Fail
4.0AA Large
1.0Fail
3.7AA Large
1.4Fail
Black BG
10.4AAA
5.3AA
21.0AAA
5.7AA
15.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D6D52F
8C8A61
FFFFFF
A9A713
C4C53B

Deuteranopia

DCE337
9AAD5A
FFFFFF
B2BE18
BFB94A

Tritanopia

FA4B52
EB4943
FFFFFF
E52226
A36A74

Achromatopsia

ACACAC
585858
FFFFFF
757575
BFBFBF

Shades & Tints Shades & Tints

#FFA10A

Dark
Light

#F70080

Dark
Light

#FFFFFF

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffa10a;
  --color-2: #f70080;
  --color-3: #ffffff;
  --color-4: #ed4f00;
  --color-5: #9ff500;
}

SCSS

$color-1: #ffa10a;
$color-2: #f70080;
$color-3: #ffffff;
$color-4: #ed4f00;
$color-5: #9ff500;

TAILWIND

colors: {
  'brand-1': '#ffa10a',
  'brand-2': '#f70080',
  'brand-3': '#ffffff',
  'brand-4': '#ed4f00',
  'brand-5': '#9ff500',
}

RGB Array

[255, 161, 10], [247, 0, 128], [255, 255, 255], [237, 79, 0], [159, 245, 0]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFA10A, #F70080, #FFFFFF, #ED4F00, #9FF500 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: #ffa10a; --color-2: #f70080; --color-3: #ffffff; --color-4: #ed4f00; --color-5: #9ff500. 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