← Back to Editor

#28171D · #462725 · #684444 · #93646A · #A51A31

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

#28171D

Dark Violet · Black · Raspberry

HEX
#28171D
RGB
rgb(40, 23, 29)
HSL
hsl(339, 27%, 12%)
HSB
hsb(339, 43%, 16%)
CMYK
cmyk(0%, 42%, 27%, 84%)
Oklch
oklch(23.0% 0.029 356.9)

Traditional「Dark Violet」· Paint「Raspberry」· Creative Blush Sunrise

#462725

Crimson · DarkSlateGray · Wine Red

HEX
#462725
RGB
rgb(70, 39, 37)
HSL
hsl(4, 31%, 21%)
HSB
hsb(4, 47%, 27%)
CMYK
cmyk(0%, 44%, 47%, 73%)
Oklch
oklch(31.2% 0.047 24.1)

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

#684444

Crimson · DarkOliveGreen · Wine Red

HEX
#684444
RGB
rgb(104, 68, 68)
HSL
hsl(0, 21%, 34%)
HSB
hsb(0, 35%, 41%)
CMYK
cmyk(0%, 35%, 35%, 59%)
Oklch
oklch(42.8% 0.050 19.3)

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

#93646A

Crimson · Gray · Passion Red

HEX
#93646A
RGB
rgb(147, 100, 106)
HSL
hsl(352, 19%, 48%)
HSB
hsb(352, 32%, 58%)
CMYK
cmyk(0%, 32%, 28%, 42%)
Oklch
oklch(55.5% 0.061 10.8)

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

#A51A31

Vermilion · Brown · Wine Red

HEX
#A51A31
RGB
rgb(165, 26, 49)
HSL
hsl(350, 73%, 37%)
HSB
hsb(350, 84%, 65%)
CMYK
cmyk(0%, 84%, 70%, 35%)
Oklch
oklch(46.9% 0.172 19.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

28171D
162721

Analogous

271624
28171D
271916

Triadic

28171D
1C2716
161C27

Split-Comp.

28171D
162719
162427

Tetradic

28171D
242716
162721
191627

Contrast Matrix WCAG 2.1 Contrast

28171D
462725
684444
93646A
A51A31
—
1.3
Fail
2.0
Fail
3.5
AA Large
2.3
Fail
1.3
Fail
—
1.6
Fail
2.7
Fail
1.8
Fail
2.0
Fail
1.6
Fail
—
1.7
Fail
1.1
Fail
3.5
AA Large
2.7
Fail
1.7
Fail
—
1.5
Fail
2.3
Fail
1.8
Fail
1.1
Fail
1.5
Fail
—
White BG
17.1AAA
13.3AAA
8.4AAA
4.9AA
7.5AAA
Black BG
1.2Fail
1.6Fail
2.5Fail
4.3AA Large
2.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

21201C
393825
585844
7F7E69
69682B

Deuteranopia

22231B
3A3D26
5B5D44
818568
717B2A

Tritanopia

271A1A
442626
664444
916767
9E2726

Achromatopsia

1D1D1D
303030
4F4F4F
737373
464646

Shades & Tints Shades & Tints

#28171D

Dark
Light

#462725

Dark
Light

#684444

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #28171d;
  --color-2: #462725;
  --color-3: #684444;
  --color-4: #93646a;
  --color-5: #a51a31;
}

SCSS

$color-1: #28171d;
$color-2: #462725;
$color-3: #684444;
$color-4: #93646a;
$color-5: #a51a31;

TAILWIND

colors: {
  'brand-1': '#28171d',
  'brand-2': '#462725',
  'brand-3': '#684444',
  'brand-4': '#93646a',
  'brand-5': '#a51a31',
}

RGB Array

[40, 23, 29], [70, 39, 37], [104, 68, 68], [147, 100, 106], [165, 26, 49]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #28171D, #462725, #684444, #93646A, #A51A31 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: #28171d; --color-2: #462725; --color-3: #684444; --color-4: #93646a; --color-5: #a51a31. 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