← Back to Editor

#4D0C15 · #700C1F · #E62246 · #010505 · #0C4D46

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

#4D0C15

Vermilion · Maroon · Deep Berry

HEX
#4D0C15
RGB
rgb(77, 12, 21)
HSL
hsl(352, 73%, 17%)
HSB
hsb(352, 84%, 30%)
CMYK
cmyk(0%, 84%, 73%, 70%)
Oklch
oklch(27.8% 0.095 18.8)

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

#700C1F

Vermilion · Maroon · Wine Red

HEX
#700C1F
RGB
rgb(112, 12, 31)
HSL
hsl(349, 81%, 24%)
HSB
hsb(349, 89%, 44%)
CMYK
cmyk(0%, 89%, 72%, 56%)
Oklch
oklch(35.3% 0.131 18.4)

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

#E62246

Vermilion · Crimson · Passion Red

HEX
#E62246
RGB
rgb(230, 34, 70)
HSL
hsl(349, 80%, 52%)
HSB
hsb(349, 85%, 90%)
CMYK
cmyk(0%, 85%, 70%, 10%)
Oklch
oklch(59.7% 0.224 19.1)

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

#010505

Lake Blue · Black · Peacock Green

HEX
#010505
RGB
rgb(1, 5, 5)
HSL
hsl(180, 67%, 1%)
HSB
hsb(180, 80%, 2%)
CMYK
cmyk(80%, 0%, 0%, 98%)
Oklch
oklch(10.6% 0.013 195.3)

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

#0C4D46

Mineral Blue · DarkSlateGray · Peacock Green

HEX
#0C4D46
RGB
rgb(12, 77, 70)
HSL
hsl(174, 73%, 17%)
HSB
hsb(174, 84%, 30%)
CMYK
cmyk(84%, 0%, 9%, 70%)
Oklch
oklch(38.0% 0.063 183.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4D0C15
0C4B43

Analogous

4B0C34
4D0C15
4B230C

Triadic

4D0C15
144B0C
0C144B

Split-Comp.

4D0C15
0C4B23
0C344B

Tetradic

4D0C15
344B0C
0C4B43
230C4B

Contrast Matrix WCAG 2.1 Contrast

4D0C15
700C1F
E62246
010505
0C4D46
—
1.3
Fail
3.4
AA Large
1.3
Fail
1.6
Fail
1.3
Fail
—
2.7
Fail
1.7
Fail
1.2
Fail
3.4
AA Large
2.7
Fail
—
4.6
AA
2.2
Fail
1.3
Fail
1.7
Fail
4.6
AA
—
2.1
Fail
1.6
Fail
1.2
Fail
2.2
Fail
2.1
Fail
—
White BG
15.2AAA
11.9AAA
4.5AA Large
20.5AAA
9.7AAA
Black BG
1.4Fail
1.8Fail
4.7AA
1.0Fail
2.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

313013
45441A
918F3D
030305
282948

Deuteranopia

353A12
4B5219
9DAB3B
030205
241F48

Tritanopia

4A1111
6B1716
DC3635
010505
0F4949

Achromatopsia

202020
2C2C2C
616161
040404
393939

Shades & Tints Shades & Tints

#4D0C15

Dark
Light

#700C1F

Dark
Light

#E62246

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4d0c15;
  --color-2: #700c1f;
  --color-3: #e62246;
  --color-4: #010505;
  --color-5: #0c4d46;
}

SCSS

$color-1: #4d0c15;
$color-2: #700c1f;
$color-3: #e62246;
$color-4: #010505;
$color-5: #0c4d46;

TAILWIND

colors: {
  'brand-1': '#4d0c15',
  'brand-2': '#700c1f',
  'brand-3': '#e62246',
  'brand-4': '#010505',
  'brand-5': '#0c4d46',
}

RGB Array

[77, 12, 21], [112, 12, 31], [230, 34, 70], [1, 5, 5], [12, 77, 70]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #4D0C15, #700C1F, #E62246, #010505, #0C4D46 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: #4d0c15; --color-2: #700c1f; --color-3: #e62246; --color-4: #010505; --color-5: #0c4d46. 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