← Back to Editor

#E21B46 · #363939 · #58C5EC · #D6F2FD · #F3FCFF

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

#E21B46

Vermilion · Crimson · Passion Red

HEX
#E21B46
RGB
rgb(226, 27, 70)
HSL
hsl(347, 79%, 50%)
HSB
hsb(347, 88%, 89%)
CMYK
cmyk(0%, 88%, 69%, 11%)
Oklch
oklch(58.6% 0.224 18.1)

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

#363939

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#363939
RGB
rgb(54, 57, 57)
HSL
hsl(180, 3%, 22%)
HSB
hsb(180, 5%, 22%)
CMYK
cmyk(5%, 0%, 0%, 78%)
Oklch
oklch(34.2% 0.004 197.0)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

#58C5EC

Sky Blue · MediumTurquoise · Lake Green

HEX
#58C5EC
RGB
rgb(88, 197, 236)
HSL
hsl(196, 80%, 64%)
HSB
hsb(196, 63%, 93%)
CMYK
cmyk(63%, 17%, 0%, 7%)
Oklch
oklch(77.5% 0.113 224.8)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#D6F2FD

Sky Blue · Lavender · Glacier Blue

HEX
#D6F2FD
RGB
rgb(214, 242, 253)
HSL
hsl(197, 91%, 92%)
HSB
hsb(197, 15%, 99%)
CMYK
cmyk(15%, 4%, 0%, 1%)
Oklch
oklch(94.4% 0.033 223.4)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

#F3FCFF

Sky Blue · White · Glacier Blue

HEX
#F3FCFF
RGB
rgb(243, 252, 255)
HSL
hsl(195, 100%, 98%)
HSB
hsb(195, 5%, 100%)
CMYK
cmyk(5%, 1%, 0%, 0%)
Oklch
oklch(98.5% 0.010 219.6)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E21B46
1BE4B9

Analogous

E41BAB
E21B46
E4541B

Triadic

E21B46
46E41B
1B46E4

Split-Comp.

E21B46
1BE454
1BABE4

Tetradic

E21B46
ABE41B
1BE4B9
541BE4

Contrast Matrix WCAG 2.1 Contrast

E21B46
363939
58C5EC
D6F2FD
F3FCFF
—
2.5
Fail
2.4
Fail
4.0
AA Large
4.5
AA
2.5
Fail
—
5.9
AA
10.0
AAA
11.2
AAA
2.4
Fail
5.9
AA
—
1.7
Fail
1.9
Fail
4.0
AA Large
10.0
AAA
1.7
Fail
—
1.1
Fail
4.5
AA
11.2
AAA
1.9
Fail
1.1
Fail
—
White BG
4.7AA
11.7AAA
2.0Fail
1.2Fail
1.0Fail
Black BG
4.5AA Large
1.8Fail
10.6AAA
18.0AAA
20.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8C8A3C
373739
8788E3
E2E2FA
F7F7FE

Deuteranopia

97A639
373739
8179E0
E1DEFA
F6F6FE

Tritanopia

D83332
363939
5DDBD9
D7F8F8
F3FEFE

Achromatopsia

5B5B5B
383838
A9A9A9
EBEBEB
FAFAFA

Shades & Tints Shades & Tints

#E21B46

Dark
Light

#363939

Dark
Light

#58C5EC

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e21b46;
  --color-2: #363939;
  --color-3: #58c5ec;
  --color-4: #d6f2fd;
  --color-5: #f3fcff;
}

SCSS

$color-1: #e21b46;
$color-2: #363939;
$color-3: #58c5ec;
$color-4: #d6f2fd;
$color-5: #f3fcff;

TAILWIND

colors: {
  'brand-1': '#e21b46',
  'brand-2': '#363939',
  'brand-3': '#58c5ec',
  'brand-4': '#d6f2fd',
  'brand-5': '#f3fcff',
}

RGB Array

[226, 27, 70], [54, 57, 57], [88, 197, 236], [214, 242, 253], [243, 252, 255]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E21B46, #363939, #58C5EC, #D6F2FD, #F3FCFF is ideal for: social media posters, mobile apps, e-commerce promos, health products, baby brands, fresh-style blogs, 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: #e21b46; --color-2: #363939; --color-3: #58c5ec; --color-4: #d6f2fd; --color-5: #f3fcff. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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