← Back to Editor

#DC1C3B · #370B7D · #971221 · #55DDD0 · #3E042E

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

#DC1C3B

Vermilion · Crimson · Passion Red

HEX
#DC1C3B
RGB
rgb(220, 28, 59)
HSL
hsl(350, 77%, 49%)
HSB
hsb(350, 87%, 86%)
CMYK
cmyk(0%, 87%, 73%, 14%)
Oklch
oklch(57.4% 0.219 21.0)

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

#370B7D

Deep Indigo · MidnightBlue · Eggplant

HEX
#370B7D
RGB
rgb(55, 11, 125)
HSL
hsl(263, 84%, 27%)
HSB
hsb(263, 91%, 49%)
CMYK
cmyk(56%, 91%, 0%, 51%)
Oklch
oklch(31.5% 0.166 290.2)

Traditional「Deep Indigo」· Paint「Eggplant」· Creative Blush Sunrise

#971221

Vermilion · Brown · Wine Red

HEX
#971221
RGB
rgb(151, 18, 33)
HSL
hsl(353, 79%, 33%)
HSB
hsb(353, 88%, 59%)
CMYK
cmyk(0%, 88%, 78%, 41%)
Oklch
oklch(43.5% 0.164 23.1)

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

#55DDD0

Mineral Blue · MediumTurquoise · Lake Green

HEX
#55DDD0
RGB
rgb(85, 221, 208)
HSL
hsl(174, 67%, 60%)
HSB
hsb(174, 62%, 87%)
CMYK
cmyk(62%, 0%, 6%, 13%)
Oklch
oklch(82.0% 0.119 186.3)

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

#3E042E

Rose Purple · Black · Dark Purple

HEX
#3E042E
RGB
rgb(62, 4, 46)
HSL
hsl(317, 88%, 13%)
HSB
hsb(317, 94%, 24%)
CMYK
cmyk(0%, 94%, 26%, 76%)
Oklch
oklch(24.9% 0.099 342.3)

Traditional「Rose Purple」· Paint「Dark Purple」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DC1C3B
1DDDBD

Analogous

DD1D9D
DC1C3B
DD5D1D

Triadic

DC1C3B
3DDD1D
1D3DDD

Split-Comp.

DC1C3B
1DDD5D
1D9DDD

Tetradic

DC1C3B
9DDD1D
1DDDBD
5D1DDD

Contrast Matrix WCAG 2.1 Contrast

DC1C3B
370B7D
971221
55DDD0
3E042E
—
2.8
Fail
1.8
Fail
3.0
Fail
3.4
AA Large
2.8
Fail
—
1.6
Fail
8.4
AAA
1.2
Fail
1.8
Fail
1.6
Fail
—
5.2
AA
1.9
Fail
3.0
Fail
8.4
AAA
5.2
AA
—
10.0
AAA
3.4
AA Large
1.2
Fail
1.9
Fail
10.0
AAA
—
White BG
4.9AA
13.9AAA
8.7AAA
1.7Fail
16.6AAA
Black BG
4.3AA Large
1.5Fail
2.4Fail
12.6AAA
1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

898733
242461
5D5C1D
9091D3
252424

Deuteranopia

94A232
272A5B
656F1C
887ED4
282D21

Tritanopia

D22E2C
354C47
901B1A
5CD6D6
3B1C1A

Achromatopsia

595959
252525
3B3B3B
B3B3B3
1A1A1A

Shades & Tints Shades & Tints

#DC1C3B

Dark
Light

#370B7D

Dark
Light

#971221

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dc1c3b;
  --color-2: #370b7d;
  --color-3: #971221;
  --color-4: #55ddd0;
  --color-5: #3e042e;
}

SCSS

$color-1: #dc1c3b;
$color-2: #370b7d;
$color-3: #971221;
$color-4: #55ddd0;
$color-5: #3e042e;

TAILWIND

colors: {
  'brand-1': '#dc1c3b',
  'brand-2': '#370b7d',
  'brand-3': '#971221',
  'brand-4': '#55ddd0',
  'brand-5': '#3e042e',
}

RGB Array

[220, 28, 59], [55, 11, 125], [151, 18, 33], [85, 221, 208], [62, 4, 46]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DC1C3B, #370B7D, #971221, #55DDD0, #3E042E 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: #dc1c3b; --color-2: #370b7d; --color-3: #971221; --color-4: #55ddd0; --color-5: #3e042e. 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