← Back to Editor

#F7FF80 · #B8C404 · #FF7300 · #0C0D0C · #E60237

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

#F7FF80

Fresh Green · Khaki · Sunflower

HEX
#F7FF80
RGB
rgb(247, 255, 128)
HSL
hsl(64, 100%, 75%)
HSB
hsb(64, 50%, 100%)
CMYK
cmyk(3%, 0%, 50%, 0%)
Oklch
oklch(96.9% 0.151 112.1)

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

#B8C404

Autumn Sage · GoldenRod · Honey Gold

HEX
#B8C404
RGB
rgb(184, 196, 4)
HSL
hsl(64, 96%, 39%)
HSB
hsb(64, 98%, 77%)
CMYK
cmyk(6%, 0%, 98%, 23%)
Oklch
oklch(78.4% 0.176 114.1)

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

#FF7300

Tangerine · OrangeRed · Amber Brown

HEX
#FF7300
RGB
rgb(255, 115, 0)
HSL
hsl(27, 100%, 50%)
HSB
hsb(27, 100%, 100%)
CMYK
cmyk(0%, 55%, 100%, 0%)
Oklch
oklch(71.3% 0.195 47.9)

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

#0C0D0C

Ink Black · Black · Jet Black

HEX
#0C0D0C
RGB
rgb(12, 13, 12)
HSL
hsl(120, 4%, 5%)
HSB
hsb(120, 8%, 5%)
CMYK
cmyk(8%, 0%, 8%, 95%)
Oklch
oklch(15.7% 0.003 145.4)

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

#E60237

Vermilion · Crimson · Passion Red

HEX
#E60237
RGB
rgb(230, 2, 55)
HSL
hsl(346, 98%, 45%)
HSB
hsb(346, 99%, 90%)
CMYK
cmyk(0%, 99%, 76%, 10%)
Oklch
oklch(58.5% 0.235 21.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F7FF80
8880FF

Analogous

FFC880
F7FF80
B7FF80

Triadic

F7FF80
80F7FF
FF80F7

Split-Comp.

F7FF80
80B7FF
C880FF

Tetradic

F7FF80
80FFC8
8880FF
FF80B7

Contrast Matrix WCAG 2.1 Contrast

F7FF80
B8C404
FF7300
0C0D0C
E60237
—
1.8
Fail
2.5
Fail
18.1
AAA
4.4
AA Large
1.8
Fail
—
1.4
Fail
10.1
AAA
2.5
Fail
2.5
Fail
1.4
Fail
—
7.1
AAA
1.7
Fail
18.1
AAA
10.1
AAA
7.1
AAA
—
4.1
AA Large
4.4
AA Large
2.5
Fail
1.7
Fail
4.1
AA Large
—
White BG
1.1Fail
1.9Fail
2.7Fail
19.5AAA
4.7AA
Black BG
19.6AAA
10.9AAA
7.7AAA
1.1Fail
4.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

FAFB9F
BDBD32
C2C11C
0C0C0C
83812A

Deuteranopia

FAF9A6
BDBC3E
CBD523
0C0C0C
91A227

Tritanopia

F7B7BC
B9575F
F83237
0C0C0C
DB201E

Achromatopsia

EEEEEE
ABABAB
909090
0D0D0D
4C4C4C

Shades & Tints Shades & Tints

#F7FF80

Dark
Light

#B8C404

Dark
Light

#FF7300

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f7ff80;
  --color-2: #b8c404;
  --color-3: #ff7300;
  --color-4: #0c0d0c;
  --color-5: #e60237;
}

SCSS

$color-1: #f7ff80;
$color-2: #b8c404;
$color-3: #ff7300;
$color-4: #0c0d0c;
$color-5: #e60237;

TAILWIND

colors: {
  'brand-1': '#f7ff80',
  'brand-2': '#b8c404',
  'brand-3': '#ff7300',
  'brand-4': '#0c0d0c',
  'brand-5': '#e60237',
}

RGB Array

[247, 255, 128], [184, 196, 4], [255, 115, 0], [12, 13, 12], [230, 2, 55]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F7FF80, #B8C404, #FF7300, #0C0D0C, #E60237 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: #f7ff80; --color-2: #b8c404; --color-3: #ff7300; --color-4: #0c0d0c; --color-5: #e60237. 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