#2C1A28 + #5B2939 + #9A3142 + #B5452F + #AB7F2C · dark - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#2C1A28

Rose Purple · Black · Dark Purple

HEX

#2C1A28

RGB

rgb(44, 26, 40)

HSL

hsl(313, 26%, 14%)

HSB

hsb(313, 41%, 17%)

CMYK

cmyk(0%, 41%, 9%, 83%)

Oklch

oklch(24.7% 0.037 335.0)

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

#5B2939

Dark Violet · DarkSlateGray · Camellia

HEX

#5B2939

RGB

rgb(91, 41, 57)

HSL

hsl(341, 38%, 26%)

HSB

hsb(341, 55%, 36%)

CMYK

cmyk(0%, 55%, 37%, 64%)

Oklch

oklch(35.5% 0.076 1.4)

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

#9A3142

Crimson · Brown · Wine Red

HEX

#9A3142

RGB

rgb(154, 49, 66)

HSL

hsl(350, 52%, 40%)

HSB

hsb(350, 68%, 60%)

CMYK

cmyk(0%, 68%, 57%, 40%)

Oklch

oklch(47.3% 0.139 14.8)

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

#B5452F

Crimson · Sienna · Passion Red

HEX

#B5452F

RGB

rgb(181, 69, 47)

HSL

hsl(10, 59%, 45%)

HSB

hsb(10, 74%, 71%)

CMYK

cmyk(0%, 62%, 74%, 29%)

Oklch

oklch(54.0% 0.150 33.0)

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

#AB7F2C

Ochre · DarkGoldenRod · Amber Brown

HEX

#AB7F2C

RGB

rgb(171, 127, 44)

HSL

hsl(39, 59%, 42%)

HSB

hsb(39, 74%, 67%)

CMYK

cmyk(0%, 26%, 74%, 33%)

Oklch

oklch(62.5% 0.111 79.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2C1A28

1A2D1E

Analogous

281A2D

2C1A28

2D1A20

Triadic

2C1A28

292D1A

1A292D

Split-Comp.

2C1A28

202D1A

1A2D28

Tetradic

2C1A28

2D281A

1A2D1E

1A202D

Contrast Matrix WCAG 2.1 Contrast

2C1A28	5B2939	9A3142	B5452F	AB7F2C
—	1.4 Fail	2.2 Fail	3.0 AA Large	4.5 AA
1.4 Fail	—	1.6 Fail	2.1 Fail	3.2 AA Large
2.2 Fail	1.6 Fail	—	1.3 Fail	2.0 Fail
3.0 AA Large	2.1 Fail	1.3 Fail	—	1.5 Fail
4.5 AA	3.2 AA Large	2.0 Fail	1.5 Fail	—

White BG

16.3AAA

11.5AAA

7.3AAA

5.4AA

3.6AA Large

Black BG

1.3Fail

1.8Fail

2.9Fail

3.9AA Large

5.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

242425

454535

6D6C3E

858334

989840

Deuteranopia

252724

484C34

737B3D

8B9336

9B9E45

Tritanopia

2B2221

593231

953B3A

AF3939

A95053

Achromatopsia

212121

3A3A3A

525252

646464

838383

Shades & Tints Shades & Tints

#2C1A28

Dark

Light

#5B2939

Dark

Light

#9A3142

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2c1a28;
  --color-2: #5b2939;
  --color-3: #9a3142;
  --color-4: #b5452f;
  --color-5: #ab7f2c;
}

SCSS

$color-1: #2c1a28;
$color-2: #5b2939;
$color-3: #9a3142;
$color-4: #b5452f;
$color-5: #ab7f2c;

TAILWIND

colors: {
  'brand-1': '#2c1a28',
  'brand-2': '#5b2939',
  'brand-3': '#9a3142',
  'brand-4': '#b5452f',
  'brand-5': '#ab7f2c',
}

RGB Array

[44, 26, 40], [91, 41, 57], [154, 49, 66], [181, 69, 47], [171, 127, 44]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This dark-style palette of #2C1A28, #5B2939, #9A3142, #B5452F, #AB7F2C 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: #2c1a28; --color-2: #5b2939; --color-3: #9a3142; --color-4: #b5452f; --color-5: #ab7f2c. 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