← Back to Editor

#524143 · #7A3C43 · #992C39 · #BA182B · #DB0018

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#524143

Crimson · DarkSlateGray · Wine Red

HEX
#524143
RGB
rgb(82, 65, 67)
HSL
hsl(353, 12%, 29%)
HSB
hsb(353, 21%, 32%)
CMYK
cmyk(0%, 21%, 18%, 68%)
Oklch
oklch(39.4% 0.024 10.3)

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

#7A3C43

Crimson · Sienna · Wine Red

HEX
#7A3C43
RGB
rgb(122, 60, 67)
HSL
hsl(353, 34%, 36%)
HSB
hsb(353, 51%, 48%)
CMYK
cmyk(0%, 51%, 45%, 52%)
Oklch
oklch(43.8% 0.086 14.2)

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

#992C39

Crimson · Brown · Wine Red

HEX
#992C39
RGB
rgb(153, 44, 57)
HSL
hsl(353, 55%, 39%)
HSB
hsb(353, 71%, 60%)
CMYK
cmyk(0%, 71%, 63%, 40%)
Oklch
oklch(46.4% 0.144 18.2)

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

#BA182B

Vermilion · FireBrick · Passion Red

HEX
#BA182B
RGB
rgb(186, 24, 43)
HSL
hsl(353, 77%, 41%)
HSB
hsb(353, 87%, 73%)
CMYK
cmyk(0%, 87%, 77%, 27%)
Oklch
oklch(50.7% 0.192 23.0)

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

#DB0018

Vermilion · Crimson · Passion Red

HEX
#DB0018
RGB
rgb(219, 0, 24)
HSL
hsl(353, 100%, 43%)
HSB
hsb(353, 100%, 86%)
CMYK
cmyk(0%, 100%, 89%, 14%)
Oklch
oklch(56.1% 0.228 26.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

524143
415351

Analogous

53414C
524143
534841

Triadic

524143
435341
414353

Split-Comp.

524143
415348
414C53

Tetradic

524143
4C5341
415351
484153

Contrast Matrix WCAG 2.1 Contrast

524143
7A3C43
992C39
BA182B
DB0018
—
1.2
Fail
1.3
Fail
1.5
Fail
1.8
Fail
1.2
Fail
—
1.1
Fail
1.3
Fail
1.6
Fail
1.3
Fail
1.1
Fail
—
1.2
Fail
1.5
Fail
1.5
Fail
1.3
Fail
1.2
Fail
—
1.2
Fail
1.8
Fail
1.6
Fail
1.5
Fail
1.2
Fail
—
White BG
9.6AAA
8.2AAA
7.6AAA
6.5AA
5.2AA
Black BG
2.2Fail
2.6Fail
2.8Fail
3.3AA Large
4.0AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

4B4A43
5F5F41
6A6936
747226
7C7A12

Deuteranopia

4C4D42
636741
707835
7D8925
899911

Tritanopia

514242
774040
943333
B22322
D00E0D

Achromatopsia

464646
4F4F4F
4E4E4E
4B4B4B
444444

Shades & Tints Shades & Tints

#524143

Dark
Light

#7A3C43

Dark
Light

#992C39

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #524143;
  --color-2: #7a3c43;
  --color-3: #992c39;
  --color-4: #ba182b;
  --color-5: #db0018;
}

SCSS

$color-1: #524143;
$color-2: #7a3c43;
$color-3: #992c39;
$color-4: #ba182b;
$color-5: #db0018;

TAILWIND

colors: {
  'brand-1': '#524143',
  'brand-2': '#7a3c43',
  'brand-3': '#992c39',
  'brand-4': '#ba182b',
  'brand-5': '#db0018',
}

RGB Array

[82, 65, 67], [122, 60, 67], [153, 44, 57], [186, 24, 43], [219, 0, 24]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #524143, #7A3C43, #992C39, #BA182B, #DB0018 is ideal for: tech websites, dark mode UIs, game UIs. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #524143; --color-2: #7a3c43; --color-3: #992c39; --color-4: #ba182b; --color-5: #db0018. 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. 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 tech, SaaS, healthcare, eco industries. 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