← Back to Editor

#181214 · #4E373D · #D32C0A · #E19F15 · #A1A872

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 LibraryData Visualization

Color Details Color Details

#181214

Dark Violet · Black · Raspberry

HEX
#181214
RGB
rgb(24, 18, 20)
HSL
hsl(340, 14%, 8%)
HSB
hsb(340, 25%, 9%)
CMYK
cmyk(0%, 25%, 17%, 91%)
Oklch
oklch(19.1% 0.011 356.1)

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

#4E373D

Dark Violet · DarkSlateGray · Camellia

HEX
#4E373D
RGB
rgb(78, 55, 61)
HSL
hsl(344, 17%, 26%)
HSB
hsb(344, 29%, 31%)
CMYK
cmyk(0%, 29%, 22%, 69%)
Oklch
oklch(36.5% 0.034 1.7)

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

#D32C0A

Vermilion · FireBrick · Passion Red

HEX
#D32C0A
RGB
rgb(211, 44, 10)
HSL
hsl(10, 91%, 43%)
HSB
hsb(10, 95%, 83%)
CMYK
cmyk(0%, 79%, 95%, 17%)
Oklch
oklch(56.3% 0.206 32.4)

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

#E19F15

Ochre · GoldenRod · Honey Gold

HEX
#E19F15
RGB
rgb(225, 159, 21)
HSL
hsl(41, 83%, 48%)
HSB
hsb(41, 91%, 88%)
CMYK
cmyk(0%, 29%, 91%, 12%)
Oklch
oklch(74.7% 0.152 78.0)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#A1A872

Autumn Sage · DarkSeaGreen · Sunflower

HEX
#A1A872
RGB
rgb(161, 168, 114)
HSL
hsl(68, 24%, 55%)
HSB
hsb(68, 32%, 66%)
CMYK
cmyk(4%, 0%, 32%, 34%)
Oklch
oklch(71.3% 0.074 114.3)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

181214
121715

Analogous

171216
181214
171212

Triadic

181214
131712
121317

Split-Comp.

181214
121712
121617

Tetradic

181214
161712
121715
121217

Contrast Matrix WCAG 2.1 Contrast

181214
4E373D
D32C0A
E19F15
A1A872
—
1.7
Fail
3.6
AA Large
8.1
AAA
7.4
AAA
1.7
Fail
—
2.1
Fail
4.7
AA
4.3
AA Large
3.6
AA Large
2.1
Fail
—
2.2
Fail
2.0
Fail
8.1
AAA
4.7
AA
2.2
Fail
—
1.1
Fail
7.4
AAA
4.3
AA Large
2.0
Fail
1.1
Fail
—
White BG
18.5AAA
10.8AAA
5.1AA
2.3Fail
2.5Fail
Black BG
1.1Fail
1.9Fail
4.1AA Large
9.2AAA
8.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

151514
44443C
8B8912
C4C436
A4A47F

Deuteranopia

161613
45473B
94A114
C8CD3E
A4A382

Tritanopia

181313
4D3A3A
CB191A
DE5157
A1898C

Achromatopsia

141414
3F3F3F
5A5A5A
A3A3A3
A0A0A0

Shades & Tints Shades & Tints

#181214

Dark
Light

#4E373D

Dark
Light

#D32C0A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #181214;
  --color-2: #4e373d;
  --color-3: #d32c0a;
  --color-4: #e19f15;
  --color-5: #a1a872;
}

SCSS

$color-1: #181214;
$color-2: #4e373d;
$color-3: #d32c0a;
$color-4: #e19f15;
$color-5: #a1a872;

TAILWIND

colors: {
  'brand-1': '#181214',
  'brand-2': '#4e373d',
  'brand-3': '#d32c0a',
  'brand-4': '#e19f15',
  'brand-5': '#a1a872',
}

RGB Array

[24, 18, 20], [78, 55, 61], [211, 44, 10], [225, 159, 21], [161, 168, 114]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #181214, #4E373D, #D32C0A, #E19F15, #A1A872 is ideal for: tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #181214; --color-2: #4e373d; --color-3: #d32c0a; --color-4: #e19f15; --color-5: #a1a872. 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 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