← Back to Editor

#A56230 · #CAAD79 · #586762 · #373731 · #181912

dark

A 5-color dark palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

ProfoundPremiumWarmCool

Industry INDUSTRY

FinanceLuxury

UI Context UI CONTEXT

Dark ThemeCorporateData Visualization

Color Details Color Details

#A56230

Tangerine · Sienna · Amber Brown

HEX
#A56230
RGB
rgb(165, 98, 48)
HSL
hsl(26, 55%, 42%)
HSB
hsb(26, 71%, 65%)
CMYK
cmyk(0%, 41%, 71%, 35%)
Oklch
oklch(56.2% 0.108 55.0)

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

#CAAD79

Ginger · Tan · Warm Sun

HEX
#CAAD79
RGB
rgb(202, 173, 121)
HSL
hsl(39, 43%, 63%)
HSB
hsb(39, 40%, 79%)
CMYK
cmyk(0%, 14%, 40%, 21%)
Oklch
oklch(76.1% 0.076 81.7)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#586762

Mineral Blue · DimGray · Charcoal

HEX
#586762
RGB
rgb(88, 103, 98)
HSL
hsl(160, 8%, 37%)
HSB
hsb(160, 15%, 40%)
CMYK
cmyk(15%, 0%, 5%, 60%)
Oklch
oklch(50.0% 0.020 173.4)

Traditional「Mineral Blue」· Paint「Charcoal」· Creative Midnight Shadow

#373731

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#373731
RGB
rgb(55, 55, 49)
HSL
hsl(60, 6%, 20%)
HSB
hsb(60, 11%, 22%)
CMYK
cmyk(0%, 0%, 11%, 78%)
Oklch
oklch(33.5% 0.010 106.9)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

#181912

Autumn Sage · Black · Amber Gold

HEX
#181912
RGB
rgb(24, 25, 18)
HSL
hsl(69, 16%, 8%)
HSB
hsb(69, 28%, 10%)
CMYK
cmyk(4%, 0%, 28%, 90%)
Oklch
oklch(21.0% 0.013 114.2)

Traditional「Autumn Sage」· Paint「Amber Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A56230
3073A6

Analogous

A63038
A56230
A69E30

Triadic

A56230
30A663
6330A6

Split-Comp.

A56230
30A69E
3038A6

Tetradic

A56230
38A630
3073A6
9E30A6

Contrast Matrix WCAG 2.1 Contrast

A56230
CAAD79
586762
373731
181912
—
2.2
Fail
1.2
Fail
2.5
Fail
3.7
AA Large
2.2
Fail
—
2.8
Fail
5.6
AA
8.2
AAA
1.2
Fail
2.8
Fail
—
2.0
Fail
3.0
Fail
2.5
Fail
5.6
AA
2.0
Fail
—
1.5
Fail
3.7
AA Large
8.2
AAA
3.0
Fail
1.5
Fail
—
White BG
4.8AA
2.2Fail
5.9AA
12.0AAA
17.7AAA
Black BG
4.4AA Large
9.8AAA
3.5AA Large
1.8Fail
1.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

88873C
BDBD86
5E5F63
373732
181814

Deuteranopia

8C913F
BFC189
5E5D64
373733
181814

Tritanopia

A24648
C99092
596464
373434
181515

Achromatopsia

707070
B0B0B0
626262
363636
181818

Shades & Tints Shades & Tints

#A56230

Dark
Light

#CAAD79

Dark
Light

#586762

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a56230;
  --color-2: #caad79;
  --color-3: #586762;
  --color-4: #373731;
  --color-5: #181912;
}

SCSS

$color-1: #a56230;
$color-2: #caad79;
$color-3: #586762;
$color-4: #373731;
$color-5: #181912;

TAILWIND

colors: {
  'brand-1': '#a56230',
  'brand-2': '#caad79',
  'brand-3': '#586762',
  'brand-4': '#373731',
  'brand-5': '#181912',
}

RGB Array

[165, 98, 48], [202, 173, 121], [88, 103, 98], [55, 55, 49], [24, 25, 18]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This dark-style palette of #A56230, #CAAD79, #586762, #373731, #181912 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: #a56230; --color-2: #caad79; --color-3: #586762; --color-4: #373731; --color-5: #181912. 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 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