← Back to Editor

#8C1C32 · #53171F · #1D1C1A · #51524A · #98998B

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

ProfoundPremiumWarm

Industry INDUSTRY

FinanceLuxury

UI Context UI CONTEXT

Dark ThemeCorporateData Visualization

Color Details Color Details

#8C1C32

Vermilion · Brown · Wine Red

HEX
#8C1C32
RGB
rgb(140, 28, 50)
HSL
hsl(348, 67%, 33%)
HSB
hsb(348, 80%, 55%)
CMYK
cmyk(0%, 80%, 64%, 45%)
Oklch
oklch(42.3% 0.146 15.7)

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

#53171F

Crimson · Maroon · Wine Red

HEX
#53171F
RGB
rgb(83, 23, 31)
HSL
hsl(352, 57%, 21%)
HSB
hsb(352, 72%, 33%)
CMYK
cmyk(0%, 72%, 63%, 67%)
Oklch
oklch(30.5% 0.089 16.4)

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

#1D1C1A

Ink Black · Black · Dark Stone

HEX
#1D1C1A
RGB
rgb(29, 28, 26)
HSL
hsl(40, 5%, 11%)
HSB
hsb(40, 10%, 11%)
CMYK
cmyk(0%, 3%, 10%, 89%)
Oklch
oklch(22.7% 0.004 84.6)

Traditional「Ink Black」· Paint「Dark Stone」· Creative Midnight Shadow

#51524A

Ink Gray · DarkSlateGray · Charcoal

HEX
#51524A
RGB
rgb(81, 82, 74)
HSL
hsl(68, 5%, 31%)
HSB
hsb(68, 10%, 32%)
CMYK
cmyk(1%, 0%, 10%, 68%)
Oklch
oklch(43.5% 0.013 112.7)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#98998B

Ash · Gray · Silver Sand

HEX
#98998B
RGB
rgb(152, 153, 139)
HSL
hsl(64, 6%, 57%)
HSB
hsb(64, 9%, 60%)
CMYK
cmyk(1%, 0%, 9%, 40%)
Oklch
oklch(67.8% 0.020 110.2)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8C1C32
1C8D76

Analogous

8D1C6B
8C1C32
8D3E1C

Triadic

8C1C32
328D1C
1C328D

Split-Comp.

8C1C32
1C8D3E
1C6B8D

Tetradic

8C1C32
6B8D1C
1C8D76
3E1C8D

Contrast Matrix WCAG 2.1 Contrast

8C1C32
53171F
1D1C1A
51524A
98998B
—
1.5
Fail
1.9
Fail
1.1
Fail
3.1
AA Large
1.5
Fail
—
1.2
Fail
1.8
Fail
4.8
AA
1.9
Fail
1.2
Fail
—
2.2
Fail
5.9
AA
1.1
Fail
1.8
Fail
2.2
Fail
—
2.7
Fail
3.1
AA Large
4.8
AA
5.9
AA
2.7
Fail
—
White BG
9.0AAA
13.9AAA
17.0AAA
7.9AAA
2.9Fail
Black BG
2.3Fail
1.5Fail
1.2Fail
2.7Fail
7.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5C5A2D
39381D
1D1D1A
51514C
98988E

Deuteranopia

626A2B
3D411D
1D1D1B
51514C
98988F

Tritanopia

862828
501C1B
1D1B1B
514D4E
989192

Achromatopsia

404040
2A2A2A
1C1C1C
515151
979797

Shades & Tints Shades & Tints

#8C1C32

Dark
Light

#53171F

Dark
Light

#1D1C1A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8c1c32;
  --color-2: #53171f;
  --color-3: #1d1c1a;
  --color-4: #51524a;
  --color-5: #98998b;
}

SCSS

$color-1: #8c1c32;
$color-2: #53171f;
$color-3: #1d1c1a;
$color-4: #51524a;
$color-5: #98998b;

TAILWIND

colors: {
  'brand-1': '#8c1c32',
  'brand-2': '#53171f',
  'brand-3': '#1d1c1a',
  'brand-4': '#51524a',
  'brand-5': '#98998b',
}

RGB Array

[140, 28, 50], [83, 23, 31], [29, 28, 26], [81, 82, 74], [152, 153, 139]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8C1C32, #53171F, #1D1C1A, #51524A, #98998B is ideal for: brand design, premium product pages, magazine layouts, tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #8c1c32; --color-2: #53171f; --color-3: #1d1c1a; --color-4: #51524a; --color-5: #98998b. 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 finance, legal, luxury industries. Restrained colors convey professionalism and trust. 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