#D18B29 + #A15A2D + #8F2F2E + #70163F + #151820 · dark - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#D18B29

Ochre · GoldenRod · Amber Brown

HEX

#D18B29

RGB

rgb(209, 139, 41)

HSL

hsl(35, 67%, 49%)

HSB

hsb(35, 80%, 82%)

CMYK

cmyk(0%, 33%, 80%, 18%)

Oklch

oklch(69.2% 0.136 70.0)

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

#A15A2D

Tangerine · Sienna · Amber Brown

HEX

#A15A2D

RGB

rgb(161, 90, 45)

HSL

hsl(23, 56%, 40%)

HSB

hsb(23, 72%, 63%)

CMYK

cmyk(0%, 44%, 72%, 37%)

Oklch

oklch(54.2% 0.110 50.8)

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

#8F2F2E

Crimson · Brown · Wine Red

HEX

#8F2F2E

RGB

rgb(143, 47, 46)

HSL

hsl(1, 51%, 37%)

HSB

hsb(1, 68%, 56%)

CMYK

cmyk(0%, 67%, 68%, 44%)

Oklch

oklch(44.8% 0.130 24.6)

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

#70163F

Dark Violet · Brown · Camellia

HEX

#70163F

RGB

rgb(112, 22, 63)

HSL

hsl(333, 67%, 26%)

HSB

hsb(333, 80%, 44%)

CMYK

cmyk(0%, 80%, 44%, 56%)

Oklch

oklch(36.9% 0.128 358.2)

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

#151820

Indigo · Black · Deep Sea Blue

HEX

#151820

RGB

rgb(21, 24, 32)

HSL

hsl(224, 21%, 10%)

HSB

hsb(224, 34%, 13%)

CMYK

cmyk(34%, 25%, 0%, 87%)

Oklch

oklch(21.0% 0.017 268.9)

Traditional「Indigo」· Paint「Deep Sea Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D18B29

296FD1

Analogous

D13729

D18B29

C3D129

Triadic

D18B29

29D18B

8B29D1

Split-Comp.

D18B29

29C3D1

3729D1

Tetradic

D18B29

29D137

296FD1

D129C3

Contrast Matrix WCAG 2.1 Contrast

D18B29	A15A2D	8F2F2E	70163F	151820
—	1.9 Fail	2.8 Fail	4.0 AA Large	6.3 AA
1.9 Fail	—	1.5 Fail	2.1 Fail	3.4 AA Large
2.8 Fail	1.5 Fail	—	1.4 Fail	2.2 Fail
4.0 AA Large	2.1 Fail	1.4 Fail	—	1.6 Fail
6.3 AA	3.4 AA Large	2.2 Fail	1.6 Fail	—

White BG

2.8Fail

5.2AA

8.0AAA

11.2AAA

17.7AAA

Black BG

7.4AAA

4.0AA Large

2.6Fail

1.9Fail

1.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

B3B241

828238

65652E

494835

16161E

Deuteranopia

B7BC46

868C3B

6B722E

4E5533

16161E

Tritanopia

CD5358

9D4042

8A2E2E

6B2D2C

151D1C

Achromatopsia

959595

6A6A6A

4C4C4C

363636

181818

Shades & Tints Shades & Tints

#D18B29

Dark

Light

#A15A2D

Dark

Light

#8F2F2E

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d18b29;
  --color-2: #a15a2d;
  --color-3: #8f2f2e;
  --color-4: #70163f;
  --color-5: #151820;
}

SCSS

$color-1: #d18b29;
$color-2: #a15a2d;
$color-3: #8f2f2e;
$color-4: #70163f;
$color-5: #151820;

TAILWIND

colors: {
  'brand-1': '#d18b29',
  'brand-2': '#a15a2d',
  'brand-3': '#8f2f2e',
  'brand-4': '#70163f',
  'brand-5': '#151820',
}

RGB Array

[209, 139, 41], [161, 90, 45], [143, 47, 46], [112, 22, 63], [21, 24, 32]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This dark-style palette of #D18B29, #A15A2D, #8F2F2E, #70163F, #151820 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: #d18b29; --color-2: #a15a2d; --color-3: #8f2f2e; --color-4: #70163f; --color-5: #151820. 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 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