← Back to Editor

#2C1930 · #332D38 · #57513F · #A39850 · #BDB8B3

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

ProfoundPremiumWarm

Industry INDUSTRY

FinanceLuxury

UI Context UI CONTEXT

Dark ThemeCorporateData Visualization

Color Details Color Details

#2C1930

Dark Plum · DarkSlateGray · Dark Purple

HEX
#2C1930
RGB
rgb(44, 25, 48)
HSL
hsl(290, 32%, 14%)
HSB
hsb(290, 48%, 19%)
CMYK
cmyk(8%, 48%, 0%, 81%)
Oklch
oklch(24.9% 0.050 320.5)

Traditional「Dark Plum」· Paint「Dark Purple」· Creative Blush Sunrise

#332D38

Dark Plum · DarkSlateGray · Dark Purple

HEX
#332D38
RGB
rgb(51, 45, 56)
HSL
hsl(273, 11%, 20%)
HSB
hsb(273, 20%, 22%)
CMYK
cmyk(9%, 20%, 0%, 78%)
Oklch
oklch(30.8% 0.021 309.6)

Traditional「Dark Plum」· Paint「Dark Purple」· Creative Blush Sunrise

#57513F

Ochre · DarkOliveGreen · Honey Gold

HEX
#57513F
RGB
rgb(87, 81, 63)
HSL
hsl(45, 16%, 29%)
HSB
hsb(45, 28%, 34%)
CMYK
cmyk(0%, 7%, 28%, 66%)
Oklch
oklch(43.5% 0.029 91.8)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#A39850

Autumn Sage · Gray · Honey Gold

HEX
#A39850
RGB
rgb(163, 152, 80)
HSL
hsl(52, 34%, 48%)
HSB
hsb(52, 51%, 64%)
CMYK
cmyk(0%, 7%, 51%, 36%)
Oklch
oklch(67.3% 0.094 100.7)

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

#BDB8B3

Silver Gray · Silver · Pearl Gray

HEX
#BDB8B3
RGB
rgb(189, 184, 179)
HSL
hsl(30, 7%, 72%)
HSB
hsb(30, 5%, 74%)
CMYK
cmyk(0%, 3%, 5%, 26%)
Oklch
oklch(78.5% 0.009 67.7)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2C1930
1C2F18

Analogous

20182F
2C1930
2F1828

Triadic

2C1930
2F2B18
182F2B

Split-Comp.

2C1930
282F18
182F20

Tetradic

2C1930
2F2018
1C2F18
18282F

Contrast Matrix WCAG 2.1 Contrast

2C1930
332D38
57513F
A39850
BDB8B3
—
1.2
Fail
2.1
Fail
5.6
AA
8.3
AAA
1.2
Fail
—
1.7
Fail
4.6
AA
6.8
AA
2.1
Fail
1.7
Fail
—
2.7
Fail
4.0
AA Large
5.6
AA
4.6
AA
2.7
Fail
—
1.5
Fail
8.3
AAA
6.8
AA
4.0
AA Large
1.5
Fail
—
White BG
16.3AAA
13.3AAA
7.9AAA
2.9Fail
2.0Fail
Black BG
1.3Fail
1.6Fail
2.7Fail
7.2AAA
10.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

24242A
303035
545443
9E9E61
BBBBB4

Deuteranopia

252629
313135
555544
9FA066
BBBBB5

Tritanopia

2B2625
333333
574748
A26F72
BDB5B5

Achromatopsia

212121
303030
515151
939393
B9B9B9

Shades & Tints Shades & Tints

#2C1930

Dark
Light

#332D38

Dark
Light

#57513F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2c1930;
  --color-2: #332d38;
  --color-3: #57513f;
  --color-4: #a39850;
  --color-5: #bdb8b3;
}

SCSS

$color-1: #2c1930;
$color-2: #332d38;
$color-3: #57513f;
$color-4: #a39850;
$color-5: #bdb8b3;

TAILWIND

colors: {
  'brand-1': '#2c1930',
  'brand-2': '#332d38',
  'brand-3': '#57513f',
  'brand-4': '#a39850',
  'brand-5': '#bdb8b3',
}

RGB Array

[44, 25, 48], [51, 45, 56], [87, 81, 63], [163, 152, 80], [189, 184, 179]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2C1930, #332D38, #57513F, #A39850, #BDB8B3 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: #2c1930; --color-2: #332d38; --color-3: #57513f; --color-4: #a39850; --color-5: #bdb8b3. 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 general-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