← Back to Editor

#FF3161 · #33D9E7 · #F0124D · #B5BB20 · #020305

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

#FF3161

Vermilion · Tomato · Passion Red

HEX
#FF3161
RGB
rgb(255, 49, 97)
HSL
hsl(346, 100%, 60%)
HSB
hsb(346, 81%, 100%)
CMYK
cmyk(0%, 81%, 62%, 0%)
Oklch
oklch(65.4% 0.236 14.7)

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

#33D9E7

Lake Blue · Turquoise · Lake Green

HEX
#33D9E7
RGB
rgb(51, 217, 231)
HSL
hsl(185, 79%, 55%)
HSB
hsb(185, 78%, 91%)
CMYK
cmyk(78%, 6%, 0%, 9%)
Oklch
oklch(81.1% 0.129 203.7)

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

#F0124D

Dark Violet · Crimson · Rose Pink

HEX
#F0124D
RGB
rgb(240, 18, 77)
HSL
hsl(344, 88%, 51%)
HSB
hsb(344, 93%, 94%)
CMYK
cmyk(0%, 93%, 68%, 6%)
Oklch
oklch(61.0% 0.238 16.8)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#B5BB20

Autumn Sage · GoldenRod · Honey Gold

HEX
#B5BB20
RGB
rgb(181, 187, 32)
HSL
hsl(62, 71%, 43%)
HSB
hsb(62, 83%, 73%)
CMYK
cmyk(3%, 0%, 83%, 27%)
Oklch
oklch(76.2% 0.161 112.1)

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

#020305

Indigo · Black · Deep Sea Blue

HEX
#020305
RGB
rgb(2, 3, 5)
HSL
hsl(220, 43%, 1%)
HSB
hsb(220, 60%, 2%)
CMYK
cmyk(60%, 40%, 0%, 98%)
Oklch
oklch(9.6% 0.009 258.7)

Traditional「Indigo」· Paint「Deep Sea Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FF3161
33FFCF

Analogous

FF33C9
FF3161
FF6933

Triadic

FF3161
63FF33
3363FF

Split-Comp.

FF3161
33FF69
33C9FF

Tetradic

FF3161
C9FF33
33FFCF
6933FF

Contrast Matrix WCAG 2.1 Contrast

FF3161
33D9E7
F0124D
B5BB20
020305
—
2.1
Fail
1.2
Fail
1.7
Fail
5.8
AA
2.1
Fail
—
2.5
Fail
1.2
Fail
12.0
AAA
1.2
Fail
2.5
Fail
—
2.1
Fail
4.8
AA
1.7
Fail
1.2
Fail
2.1
Fail
—
9.9
AAA
5.8
AA
12.0
AAA
4.8
AA
9.9
AAA
—
White BG
3.6AA Large
1.7Fail
4.3AA Large
2.1Fail
20.6AAA
Black BG
5.9AA
12.2AAA
4.9AA
10.1AAA
1.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

A6A455
7B7CE4
908E3F
B8B846
020205

Deuteranopia

B2C153
7165E3
9DAD3B
B7B74F
020204

Tritanopia

F54C4A
3BE1E0
E53331
B5636A
020404

Achromatopsia

747474
A9A9A9
5B5B5B
A8A8A8
030303

Shades & Tints Shades & Tints

#FF3161

Dark
Light

#33D9E7

Dark
Light

#F0124D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ff3161;
  --color-2: #33d9e7;
  --color-3: #f0124d;
  --color-4: #b5bb20;
  --color-5: #020305;
}

SCSS

$color-1: #ff3161;
$color-2: #33d9e7;
$color-3: #f0124d;
$color-4: #b5bb20;
$color-5: #020305;

TAILWIND

colors: {
  'brand-1': '#ff3161',
  'brand-2': '#33d9e7',
  'brand-3': '#f0124d',
  'brand-4': '#b5bb20',
  'brand-5': '#020305',
}

RGB Array

[255, 49, 97], [51, 217, 231], [240, 18, 77], [181, 187, 32], [2, 3, 5]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FF3161, #33D9E7, #F0124D, #B5BB20, #020305 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: #ff3161; --color-2: #33d9e7; --color-3: #f0124d; --color-4: #b5bb20; --color-5: #020305. 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