← Back to Editor

#242721 · #005057 · #FC0A3E · #EB1C53 · #F93684

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

#242721

Celadon · DarkSlateGray · Dark Stone

HEX
#242721
RGB
rgb(36, 39, 33)
HSL
hsl(90, 8%, 14%)
HSB
hsb(90, 15%, 15%)
CMYK
cmyk(8%, 0%, 15%, 85%)
Oklch
oklch(26.7% 0.012 129.0)

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

#005057

Lake Blue · DarkSlateGray · Peacock Green

HEX
#005057
RGB
rgb(0, 80, 87)
HSL
hsl(185, 100%, 17%)
HSB
hsb(185, 100%, 34%)
CMYK
cmyk(100%, 8%, 0%, 66%)
Oklch
oklch(39.4% 0.067 205.0)

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

#FC0A3E

Vermilion · Crimson · Passion Red

HEX
#FC0A3E
RGB
rgb(252, 10, 62)
HSL
hsl(347, 98%, 51%)
HSB
hsb(347, 96%, 99%)
CMYK
cmyk(0%, 96%, 75%, 1%)
Oklch
oklch(62.8% 0.250 21.4)

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

#EB1C53

Dark Violet · Crimson · Rose Pink

HEX
#EB1C53
RGB
rgb(235, 28, 83)
HSL
hsl(344, 84%, 52%)
HSB
hsb(344, 88%, 92%)
CMYK
cmyk(0%, 88%, 65%, 8%)
Oklch
oklch(60.6% 0.231 15.1)

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

#F93684

Dark Violet · DeepPink · Rose Pink

HEX
#F93684
RGB
rgb(249, 54, 132)
HSL
hsl(336, 94%, 59%)
HSB
hsb(336, 78%, 98%)
CMYK
cmyk(0%, 78%, 47%, 2%)
Oklch
oklch(65.6% 0.233 2.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

242721
242127

Analogous

272721
242721
212721

Triadic

242721
212427
272124

Split-Comp.

242721
212127
272127

Tetradic

242721
212727
242127
272121

Contrast Matrix WCAG 2.1 Contrast

242721
005057
FC0A3E
EB1C53
F93684
—
1.6
Fail
3.8
AA Large
3.5
AA Large
4.2
AA Large
1.6
Fail
—
2.3
Fail
2.1
Fail
2.6
Fail
3.8
AA Large
2.3
Fail
—
1.1
Fail
1.1
Fail
3.5
AA Large
2.1
Fail
1.1
Fail
—
1.2
Fail
4.2
AA Large
2.6
Fail
1.1
Fail
1.2
Fail
—
White BG
15.1AAA
9.2AAA
4.0AA Large
4.4AA Large
3.6AA Large
Black BG
1.4Fail
2.3Fail
5.3AA
4.8AA
5.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

252522
232355
939131
919046
A5A371

Deuteranopia

252523
1E1855
A1B32E
9DAD43
B0BE6D

Tritanopia

242424
045454
F02725
E13B39
EF625F

Achromatopsia

252525
393939
585858
606060
797979

Shades & Tints Shades & Tints

#242721

Dark
Light

#005057

Dark
Light

#FC0A3E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #242721;
  --color-2: #005057;
  --color-3: #fc0a3e;
  --color-4: #eb1c53;
  --color-5: #f93684;
}

SCSS

$color-1: #242721;
$color-2: #005057;
$color-3: #fc0a3e;
$color-4: #eb1c53;
$color-5: #f93684;

TAILWIND

colors: {
  'brand-1': '#242721',
  'brand-2': '#005057',
  'brand-3': '#fc0a3e',
  'brand-4': '#eb1c53',
  'brand-5': '#f93684',
}

RGB Array

[36, 39, 33], [0, 80, 87], [252, 10, 62], [235, 28, 83], [249, 54, 132]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #242721, #005057, #FC0A3E, #EB1C53, #F93684 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: #242721; --color-2: #005057; --color-3: #fc0a3e; --color-4: #eb1c53; --color-5: #f93684. 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