← Back to Editor

#D67C2E · #786048 · #B94F1F · #A51B18 · #181816

dark

A 5-color dark 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

#D67C2E

Tangerine · Chocolate · Warm Sun

HEX
#D67C2E
RGB
rgb(214, 124, 46)
HSL
hsl(28, 67%, 51%)
HSB
hsb(28, 79%, 84%)
CMYK
cmyk(0%, 42%, 79%, 16%)
Oklch
oklch(67.2% 0.142 57.0)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#786048

Ochre · DimGray · Amber Brown

HEX
#786048
RGB
rgb(120, 96, 72)
HSL
hsl(30, 25%, 38%)
HSB
hsb(30, 40%, 47%)
CMYK
cmyk(0%, 20%, 40%, 53%)
Oklch
oklch(50.7% 0.047 66.4)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

#B94F1F

Tangerine · Sienna · Amber Brown

HEX
#B94F1F
RGB
rgb(185, 79, 31)
HSL
hsl(19, 71%, 42%)
HSB
hsb(19, 83%, 73%)
CMYK
cmyk(0%, 57%, 83%, 27%)
Oklch
oklch(55.8% 0.149 42.1)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#A51B18

Vermilion · FireBrick · Wine Red

HEX
#A51B18
RGB
rgb(165, 27, 24)
HSL
hsl(1, 75%, 37%)
HSB
hsb(1, 85%, 65%)
CMYK
cmyk(0%, 84%, 85%, 35%)
Oklch
oklch(46.6% 0.173 28.0)

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

#181816

Ink Black · Black · Jet Black

HEX
#181816
RGB
rgb(24, 24, 22)
HSL
hsl(60, 4%, 9%)
HSB
hsb(60, 8%, 9%)
CMYK
cmyk(0%, 0%, 8%, 91%)
Oklch
oklch(20.8% 0.004 106.7)

Traditional「Ink Black」· Paint「Jet Black」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D67C2E
2E88D6

Analogous

D62E34
D67C2E
D6D02E

Triadic

D67C2E
2ED67C
7C2ED6

Split-Comp.

D67C2E
2ED6D0
2E34D6

Tetradic

D67C2E
34D62E
2E88D6
D02ED6

Contrast Matrix WCAG 2.1 Contrast

D67C2E
786048
B94F1F
A51B18
181816
—
1.9
Fail
1.6
Fail
2.4
Fail
5.7
AA
1.9
Fail
—
1.2
Fail
1.3
Fail
3.0
AA Large
1.6
Fail
1.2
Fail
—
1.5
Fail
3.6
AA Large
2.4
Fail
1.3
Fail
1.5
Fail
—
2.3
Fail
5.7
AA
3.0
AA Large
3.6
AA Large
2.3
Fail
—
White BG
3.1AA Large
5.9AA
5.0AA
7.6AAA
17.8AAA
Black BG
6.8AA
3.6AA Large
4.2AA Large
2.8Fail
1.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

AFAE41
6E6D4E
8B8A2B
696819
181816

Deuteranopia

B4BB45
6F714F
91992D
717C19
181817

Tritanopia

D15053
775253
B43436
9E1919
181717

Achromatopsia

8E8E8E
646464
696969
444444
181818

Shades & Tints Shades & Tints

#D67C2E

Dark
Light

#786048

Dark
Light

#B94F1F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d67c2e;
  --color-2: #786048;
  --color-3: #b94f1f;
  --color-4: #a51b18;
  --color-5: #181816;
}

SCSS

$color-1: #d67c2e;
$color-2: #786048;
$color-3: #b94f1f;
$color-4: #a51b18;
$color-5: #181816;

TAILWIND

colors: {
  'brand-1': '#d67c2e',
  'brand-2': '#786048',
  'brand-3': '#b94f1f',
  'brand-4': '#a51b18',
  'brand-5': '#181816',
}

RGB Array

[214, 124, 46], [120, 96, 72], [185, 79, 31], [165, 27, 24], [24, 24, 22]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This dark-style palette of #D67C2E, #786048, #B94F1F, #A51B18, #181816 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: #d67c2e; --color-2: #786048; --color-3: #b94f1f; --color-4: #a51b18; --color-5: #181816. 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 dark-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