← Back to Editor

#1F0202 · #4EDEBA · #0C98F5 · #FF0505 · #FFBABA

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#1F0202

Vermilion · Black · Deep Berry

HEX
#1F0202
RGB
rgb(31, 2, 2)
HSL
hsl(0, 88%, 6%)
HSB
hsb(0, 94%, 12%)
CMYK
cmyk(0%, 94%, 94%, 88%)
Oklch
oklch(15.7% 0.055 26.4)

Traditional「Vermilion」· Paint「Deep Berry」· Creative Blush Sunrise

#4EDEBA

Mineral Blue · MediumTurquoise · Lake Green

HEX
#4EDEBA
RGB
rgb(78, 222, 186)
HSL
hsl(165, 69%, 59%)
HSB
hsb(165, 65%, 87%)
CMYK
cmyk(65%, 0%, 16%, 13%)
Oklch
oklch(81.4% 0.133 173.0)

Traditional「Mineral Blue」· Paint「Lake Green」· Creative Blush Sunrise

#0C98F5

Lake Blue · DodgerBlue · Navy Blue

HEX
#0C98F5
RGB
rgb(12, 152, 245)
HSL
hsl(204, 92%, 50%)
HSB
hsb(204, 95%, 96%)
CMYK
cmyk(95%, 38%, 0%, 4%)
Oklch
oklch(66.1% 0.172 247.2)

Traditional「Lake Blue」· Paint「Navy Blue」· Creative Blush Sunrise

#FF0505

Vermilion · Red · Passion Red

HEX
#FF0505
RGB
rgb(255, 5, 5)
HSL
hsl(0, 100%, 51%)
HSB
hsb(0, 98%, 100%)
CMYK
cmyk(0%, 98%, 98%, 0%)
Oklch
oklch(62.9% 0.257 29.1)

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

#FFBABA

Peach Pink · LightPink · Cherry Blossom

HEX
#FFBABA
RGB
rgb(255, 186, 186)
HSL
hsl(0, 100%, 86%)
HSB
hsb(0, 27%, 100%)
CMYK
cmyk(0%, 27%, 27%, 0%)
Oklch
oklch(85.3% 0.080 18.9)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

1F0202
021D1D

Analogous

1D020F
1F0202
1D0F02

Triadic

1F0202
021D02
02021D

Split-Comp.

1F0202
021D0F
020F1D

Tetradic

1F0202
0F1D02
021D1D
0F021D

Contrast Matrix WCAG 2.1 Contrast

1F0202
4EDEBA
0C98F5
FF0505
FFBABA
—
11.7
AAA
6.4
AA
4.9
AA
12.2
AAA
11.7
AAA
—
1.8
Fail
2.4
Fail
1.0
Fail
6.4
AA
1.8
Fail
—
1.3
Fail
1.9
Fail
4.9
AA
2.4
Fail
1.3
Fail
—
2.5
Fail
12.2
AAA
1.0
Fail
1.9
Fail
2.5
Fail
—
White BG
19.7AAA
1.7Fail
3.1AA Large
4.0AA Large
1.6Fail
Black BG
1.1Fail
12.5AAA
6.8AA
5.3AA
13.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

121202
8C8EC3
494ADE
939105
E1E1BA

Deuteranopia

141602
8479C5
4136D9
A1B405
E5EABA

Tritanopia

1E0202
55CACB
13CDC9
F30505
FCBABA

Achromatopsia

0B0B0B
AFAFAF
797979
505050
CFCFCF

Shades & Tints Shades & Tints

#1F0202

Dark
Light

#4EDEBA

Dark
Light

#0C98F5

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #1f0202;
  --color-2: #4edeba;
  --color-3: #0c98f5;
  --color-4: #ff0505;
  --color-5: #ffbaba;
}

SCSS

$color-1: #1f0202;
$color-2: #4edeba;
$color-3: #0c98f5;
$color-4: #ff0505;
$color-5: #ffbaba;

TAILWIND

colors: {
  'brand-1': '#1f0202',
  'brand-2': '#4edeba',
  'brand-3': '#0c98f5',
  'brand-4': '#ff0505',
  'brand-5': '#ffbaba',
}

RGB Array

[31, 2, 2], [78, 222, 186], [12, 152, 245], [255, 5, 5], [255, 186, 186]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #1F0202, #4EDEBA, #0C98F5, #FF0505, #FFBABA 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: #1f0202; --color-2: #4edeba; --color-3: #0c98f5; --color-4: #ff0505; --color-5: #ffbaba. 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