← Back to Editor

#401C26 · #574C46 · #939474 · #A7AD89 · #B6B589

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

#401C26

Dark Violet · DarkSlateGray · Raspberry

HEX
#401C26
RGB
rgb(64, 28, 38)
HSL
hsl(343, 39%, 18%)
HSB
hsb(343, 56%, 25%)
CMYK
cmyk(0%, 56%, 41%, 75%)
Oklch
oklch(28.2% 0.057 3.8)

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

#574C46

Tangerine · DarkOliveGreen · Amber Brown

HEX
#574C46
RGB
rgb(87, 76, 70)
HSL
hsl(21, 11%, 31%)
HSB
hsb(21, 20%, 34%)
CMYK
cmyk(0%, 13%, 20%, 66%)
Oklch
oklch(42.6% 0.018 50.5)

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

#939474

Autumn Sage · Gray · Sunflower

HEX
#939474
RGB
rgb(147, 148, 116)
HSL
hsl(62, 13%, 52%)
HSB
hsb(62, 22%, 58%)
CMYK
cmyk(1%, 0%, 22%, 42%)
Oklch
oklch(65.7% 0.045 109.1)

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

#A7AD89

Willow Green · DarkSeaGreen · Apple Green

HEX
#A7AD89
RGB
rgb(167, 173, 137)
HSL
hsl(70, 18%, 61%)
HSB
hsb(70, 21%, 68%)
CMYK
cmyk(3%, 0%, 21%, 32%)
Oklch
oklch(73.3% 0.050 115.3)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#B6B589

Fresh Green · Tan · Sunflower

HEX
#B6B589
RGB
rgb(182, 181, 137)
HSL
hsl(59, 24%, 63%)
HSB
hsb(59, 25%, 71%)
CMYK
cmyk(0%, 1%, 25%, 29%)
Oklch
oklch(76.3% 0.060 106.6)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

401C26
1C4036

Analogous

401C38
401C26
40241C

Triadic

401C26
26401C
1C2640

Split-Comp.

401C26
1C4024
1C3840

Tetradic

401C26
38401C
1C4036
241C40

Contrast Matrix WCAG 2.1 Contrast

401C26
574C46
939474
A7AD89
B6B589
—
1.8
Fail
4.8
AA
6.4
AA
7.1
AAA
1.8
Fail
—
2.7
Fail
3.6
AA Large
3.9
AA Large
4.8
AA
2.7
Fail
—
1.3
Fail
1.5
Fail
6.4
AA
3.6
AA Large
1.3
Fail
—
1.1
Fail
7.1
AAA
3.9
AA Large
1.5
Fail
1.1
Fail
—
White BG
14.9AAA
8.3AAA
3.1AA Large
2.3Fail
2.1Fail
Black BG
1.4Fail
2.5Fail
6.7AA
9.0AAA
10.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

303024
525247
93937C
AAAA92
B6B694

Deuteranopia

333523
535448
93937E
A9A994
B6B696

Tritanopia

3E2221
564949
938283
A7999A
B69C9E

Achromatopsia

282828
4F4F4F
909090
A7A7A7
B0B0B0

Shades & Tints Shades & Tints

#401C26

Dark
Light

#574C46

Dark
Light

#939474

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #401c26;
  --color-2: #574c46;
  --color-3: #939474;
  --color-4: #a7ad89;
  --color-5: #b6b589;
}

SCSS

$color-1: #401c26;
$color-2: #574c46;
$color-3: #939474;
$color-4: #a7ad89;
$color-5: #b6b589;

TAILWIND

colors: {
  'brand-1': '#401c26',
  'brand-2': '#574c46',
  'brand-3': '#939474',
  'brand-4': '#a7ad89',
  'brand-5': '#b6b589',
}

RGB Array

[64, 28, 38], [87, 76, 70], [147, 148, 116], [167, 173, 137], [182, 181, 137]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This dark-style palette of #401C26, #574C46, #939474, #A7AD89, #B6B589 is ideal for: brand design, premium product pages, magazine layouts, 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: #401c26; --color-2: #574c46; --color-3: #939474; --color-4: #a7ad89; --color-5: #b6b589. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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. 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