← Back to Editor

#BA9E66 · #80805D · #280911 · #B52628

dark

A 4-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

#BA9E66

Ginger · Tan · Sunflower

HEX
#BA9E66
RGB
rgb(186, 158, 102)
HSL
hsl(40, 38%, 56%)
HSB
hsb(40, 45%, 73%)
CMYK
cmyk(0%, 15%, 45%, 27%)
Oklch
oklch(71.1% 0.081 83.9)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#80805D

Autumn Sage · DimGray · Honey Gold

HEX
#80805D
RGB
rgb(128, 128, 93)
HSL
hsl(60, 16%, 43%)
HSB
hsb(60, 27%, 50%)
CMYK
cmyk(0%, 0%, 27%, 50%)
Oklch
oklch(59.1% 0.050 107.8)

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

#280911

Vermilion · Black · Deep Berry

HEX
#280911
RGB
rgb(40, 9, 17)
HSL
hsl(345, 63%, 10%)
HSB
hsb(345, 78%, 16%)
CMYK
cmyk(0%, 78%, 58%, 84%)
Oklch
oklch(19.7% 0.053 7.4)

Traditional「Vermilion」· Paint「Deep Berry」· Creative Blush Sunrise

#B52628

Vermilion · FireBrick · Passion Red

HEX
#B52628
RGB
rgb(181, 38, 40)
HSL
hsl(359, 65%, 43%)
HSB
hsb(359, 79%, 71%)
CMYK
cmyk(0%, 79%, 78%, 29%)
Oklch
oklch(50.6% 0.179 25.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BA9E66
6481B9

Analogous

B97264
BA9E66
ABB964

Triadic

BA9E66
64B99D
9D64B9

Split-Comp.

BA9E66
64ABB9
7264B9

Tetradic

BA9E66
64B972
6481B9
B964AB

Contrast Matrix WCAG 2.1 Contrast

BA9E66
80805D
280911
B52628
—
1.6
Fail
7.2
AAA
2.5
Fail
1.6
Fail
—
4.5
AA
1.6
Fail
7.2
AAA
4.5
AA
—
2.9
Fail
2.5
Fail
1.6
Fail
2.9
Fail
—
White BG
2.6Fail
4.1AA Large
18.5AAA
6.4AA
Black BG
8.2AAA
5.2AA
1.1Fail
3.3AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

AEAE74
808065
1B1A0F
777628

Deuteranopia

B0B277
808068
1C1F0F
7F8A27

Tritanopia

B97E81
806C6E
260E0D
AE2727

Achromatopsia

A0A0A0
7C7C7C
131313
515151

Shades & Tints Shades & Tints

#BA9E66

Dark
Light

#80805D

Dark
Light

#280911

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ba9e66;
  --color-2: #80805d;
  --color-3: #280911;
  --color-4: #b52628;
}

SCSS

$color-1: #ba9e66;
$color-2: #80805d;
$color-3: #280911;
$color-4: #b52628;

TAILWIND

colors: {
  'brand-1': '#ba9e66',
  'brand-2': '#80805d',
  'brand-3': '#280911',
  'brand-4': '#b52628',
}

RGB Array

[186, 158, 102], [128, 128, 93], [40, 9, 17], [181, 38, 40]

FAQ FAQ

What scenarios is this 4-color palette suitable for?

This dark-style palette of #BA9E66, #80805D, #280911, #B52628 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 4-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #ba9e66; --color-2: #80805d; --color-3: #280911; --color-4: #b52628. 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 4-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