← Back to Editor

#24181C · #7A1D43 · #4E5E3F · #6A7A5D · #8E9C76

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

#24181C

Dark Violet · Black · Raspberry

HEX
#24181C
RGB
rgb(36, 24, 28)
HSL
hsl(340, 20%, 12%)
HSB
hsb(340, 33%, 14%)
CMYK
cmyk(0%, 33%, 22%, 86%)
Oklch
oklch(22.6% 0.020 357.1)

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

#7A1D43

Dark Violet · Brown · Camellia

HEX
#7A1D43
RGB
rgb(122, 29, 67)
HSL
hsl(335, 62%, 30%)
HSB
hsb(335, 76%, 48%)
CMYK
cmyk(0%, 76%, 45%, 52%)
Oklch
oklch(39.6% 0.131 0.4)

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

#4E5E3F

Celadon · DarkOliveGreen · Forest Green

HEX
#4E5E3F
RGB
rgb(78, 94, 63)
HSL
hsl(91, 20%, 31%)
HSB
hsb(91, 33%, 37%)
CMYK
cmyk(17%, 0%, 33%, 63%)
Oklch
oklch(46.0% 0.052 130.4)

Traditional「Celadon」· Paint「Forest Green」· Creative Blush Sunrise

#6A7A5D

Celadon · DimGray · Olive Green

HEX
#6A7A5D
RGB
rgb(106, 122, 93)
HSL
hsl(93, 13%, 42%)
HSB
hsb(93, 24%, 48%)
CMYK
cmyk(13%, 0%, 24%, 52%)
Oklch
oklch(55.8% 0.047 131.3)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#8E9C76

Grass Green · Gray · Olive Green

HEX
#8E9C76
RGB
rgb(142, 156, 118)
HSL
hsl(82, 16%, 54%)
HSB
hsb(82, 24%, 61%)
CMYK
cmyk(9%, 0%, 24%, 39%)
Oklch
oklch(67.1% 0.056 124.3)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

24181C
182521

Analogous

251823
24181C
251B18

Triadic

24181C
1D2518
181D25

Split-Comp.

24181C
18251B
182325

Tetradic

24181C
232518
182521
1B1825

Contrast Matrix WCAG 2.1 Contrast

24181C
7A1D43
4E5E3F
6A7A5D
8E9C76
—
1.7
Fail
2.5
Fail
3.7
AA Large
5.9
AA
1.7
Fail
—
1.4
Fail
2.2
Fail
3.4
AA Large
2.5
Fail
1.4
Fail
—
1.5
Fail
2.4
Fail
3.7
AA Large
2.2
Fail
1.5
Fail
—
1.6
Fail
5.9
AA
3.4
AA Large
2.4
Fail
1.6
Fail
—
White BG
17.2AAA
10.1AAA
7.0AAA
4.6AA
2.9Fail
Black BG
1.2Fail
2.1Fail
3.0Fail
4.6AA
7.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

1F1F1B
52513A
555547
717164
94947F

Deuteranopia

20201B
575E38
545348
706F66
939281

Tritanopia

231A1A
753331
4F4C4E
6B6A6B
8F8688

Achromatopsia

1C1C1C
3D3D3D
565656
727272
939393

Shades & Tints Shades & Tints

#24181C

Dark
Light

#7A1D43

Dark
Light

#4E5E3F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #24181c;
  --color-2: #7a1d43;
  --color-3: #4e5e3f;
  --color-4: #6a7a5d;
  --color-5: #8e9c76;
}

SCSS

$color-1: #24181c;
$color-2: #7a1d43;
$color-3: #4e5e3f;
$color-4: #6a7a5d;
$color-5: #8e9c76;

TAILWIND

colors: {
  'brand-1': '#24181c',
  'brand-2': '#7a1d43',
  'brand-3': '#4e5e3f',
  'brand-4': '#6a7a5d',
  'brand-5': '#8e9c76',
}

RGB Array

[36, 24, 28], [122, 29, 67], [78, 94, 63], [106, 122, 93], [142, 156, 118]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #24181C, #7A1D43, #4E5E3F, #6A7A5D, #8E9C76 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: #24181c; --color-2: #7a1d43; --color-3: #4e5e3f; --color-4: #6a7a5d; --color-5: #8e9c76. 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