← Back to Editor

#E03418 · #000000 · #14954B · #5AC91E · #ABE018

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

#E03418

Vermilion · OrangeRed · Passion Red

HEX
#E03418
RGB
rgb(224, 52, 24)
HSL
hsl(8, 81%, 49%)
HSB
hsb(8, 89%, 88%)
CMYK
cmyk(0%, 77%, 89%, 12%)
Oklch
oklch(59.3% 0.211 31.8)

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

#000000

Ink Black · Black · Jet Black

HEX
#000000
RGB
rgb(0, 0, 0)
HSL
hsl(0, 0%, 0%)
HSB
hsb(0, 0%, 0%)
CMYK
cmyk(0%, 0%, 0%, 100%)
Oklch
oklch(0.0% 0.000 0.0)

Traditional「Ink Black」· Paint「Jet Black」· Creative Midnight Shadow

#14954B

Pine Green · SeaGreen · Forest Green

HEX
#14954B
RGB
rgb(20, 149, 75)
HSL
hsl(146, 76%, 33%)
HSB
hsb(146, 87%, 58%)
CMYK
cmyk(87%, 0%, 50%, 42%)
Oklch
oklch(58.8% 0.152 151.2)

Traditional「Pine Green」· Paint「Forest Green」· Creative Blush Sunrise

#5AC91E

Pine Green · LimeGreen · Olive Green

HEX
#5AC91E
RGB
rgb(90, 201, 30)
HSL
hsl(99, 74%, 45%)
HSB
hsb(99, 85%, 79%)
CMYK
cmyk(55%, 0%, 85%, 21%)
Oklch
oklch(74.1% 0.219 137.9)

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

#ABE018

Grass Green · GreenYellow · Olive Green

HEX
#ABE018
RGB
rgb(171, 224, 24)
HSL
hsl(76, 81%, 49%)
HSB
hsb(76, 89%, 88%)
CMYK
cmyk(24%, 0%, 89%, 12%)
Oklch
oklch(83.9% 0.207 125.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E03418
18C7E2

Analogous

E21862
E03418
E29818

Triadic

E03418
18E233
3318E2

Split-Comp.

E03418
18E298
1862E2

Tetradic

E03418
62E218
18C7E2
9818E2

Contrast Matrix WCAG 2.1 Contrast

E03418
000000
14954B
5AC91E
ABE018
—
4.7
AA
1.2
Fail
2.1
Fail
2.9
Fail
4.7
AA
—
5.4
AA
9.8
AAA
13.4
AAA
1.2
Fail
5.4
AA
—
1.8
Fail
2.5
Fail
2.1
Fail
9.8
AAA
1.8
Fail
—
1.4
Fail
2.9
Fail
13.4
AAA
2.5
Fail
1.4
Fail
—
White BG
4.5AA Large
21.0AAA
3.9AA Large
2.1Fail
1.6Fail
Black BG
4.7AA
1.0Fail
5.4AA
9.8AAA
13.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

96941F
000000
4C4D5D
8A8B47
C2C248

Deuteranopia

A0AC20
000000
443B61
847B51
BFBB54

Tritanopia

D72425
000000
1A6B6E
60686F
AE6F77

Achromatopsia

646464
000000
666666
949494
B9B9B9

Shades & Tints Shades & Tints

#E03418

Dark
Light

#000000

Dark
Light

#14954B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e03418;
  --color-2: #000000;
  --color-3: #14954b;
  --color-4: #5ac91e;
  --color-5: #abe018;
}

SCSS

$color-1: #e03418;
$color-2: #000000;
$color-3: #14954b;
$color-4: #5ac91e;
$color-5: #abe018;

TAILWIND

colors: {
  'brand-1': '#e03418',
  'brand-2': '#000000',
  'brand-3': '#14954b',
  'brand-4': '#5ac91e',
  'brand-5': '#abe018',
}

RGB Array

[224, 52, 24], [0, 0, 0], [20, 149, 75], [90, 201, 30], [171, 224, 24]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E03418, #000000, #14954B, #5AC91E, #ABE018 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: #e03418; --color-2: #000000; --color-3: #14954b; --color-4: #5ac91e; --color-5: #abe018. 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