← Back to Editor

#2A1B22 · #312330 · #30554E · #A29D80 · #F2C59C

dark

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#2A1B22

Dark Violet · Black · Raspberry

HEX
#2A1B22
RGB
rgb(42, 27, 34)
HSL
hsl(332, 22%, 14%)
HSB
hsb(332, 36%, 16%)
CMYK
cmyk(0%, 36%, 19%, 84%)
Oklch
oklch(24.4% 0.027 349.7)

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

#312330

Rose Purple · DarkSlateGray · Dark Purple

HEX
#312330
RGB
rgb(49, 35, 48)
HSL
hsl(304, 17%, 16%)
HSB
hsb(304, 29%, 19%)
CMYK
cmyk(0%, 29%, 2%, 81%)
Oklch
oklch(27.8% 0.031 328.7)

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

#30554E

Mineral Blue · DarkSlateGray · Mint Ice

HEX
#30554E
RGB
rgb(48, 85, 78)
HSL
hsl(169, 28%, 26%)
HSB
hsb(169, 44%, 33%)
CMYK
cmyk(44%, 0%, 8%, 67%)
Oklch
oklch(41.9% 0.044 180.6)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#A29D80

Autumn Sage · DarkSeaGreen · Sunflower

HEX
#A29D80
RGB
rgb(162, 157, 128)
HSL
hsl(51, 15%, 57%)
HSB
hsb(51, 21%, 64%)
CMYK
cmyk(0%, 3%, 21%, 36%)
Oklch
oklch(69.2% 0.041 99.2)

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

#F2C59C

Apricot · BurlyWood · Peach Orange

HEX
#F2C59C
RGB
rgb(242, 197, 156)
HSL
hsl(29, 77%, 78%)
HSB
hsb(29, 36%, 95%)
CMYK
cmyk(0%, 19%, 36%, 5%)
Oklch
oklch(85.3% 0.075 63.9)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2A1B22
1C2C24

Analogous

2C1C2B
2A1B22
2C1C1C

Triadic

2A1B22
232C1C
1C232C

Split-Comp.

2A1B22
1C2C1C
1C2B2C

Tetradic

2A1B22
2B2C1C
1C2C24
1C1C2C

Contrast Matrix WCAG 2.1 Contrast

2A1B22
312330
30554E
A29D80
F2C59C
—
1.1
Fail
2.0
Fail
6.0
AA
10.4
AAA
1.1
Fail
—
1.8
Fail
5.4
AA
9.4
AAA
2.0
Fail
1.8
Fail
—
3.0
AA Large
5.2
AA
6.0
AA
5.4
AA
3.0
AA Large
—
1.7
Fail
10.4
AAA
9.4
AAA
5.2
AA
1.7
Fail
—
White BG
16.4AAA
14.9AAA
8.3AAA
2.7Fail
1.6Fail
Black BG
1.3Fail
1.4Fail
2.5Fail
7.7AAA
13.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

242320
2B2B2D
404050
A0A087
DFDEA6

Deuteranopia

242620
2C2D2C
3E3B50
A0A189
E1E4A8

Tritanopia

291F1F
302A2A
325151
A28D8E
F0AEAF

Achromatopsia

202020
292929
494949
9B9B9B
CECECE

Shades & Tints Shades & Tints

#2A1B22

Dark
Light

#312330

Dark
Light

#30554E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2a1b22;
  --color-2: #312330;
  --color-3: #30554e;
  --color-4: #a29d80;
  --color-5: #f2c59c;
}

SCSS

$color-1: #2a1b22;
$color-2: #312330;
$color-3: #30554e;
$color-4: #a29d80;
$color-5: #f2c59c;

TAILWIND

colors: {
  'brand-1': '#2a1b22',
  'brand-2': '#312330',
  'brand-3': '#30554e',
  'brand-4': '#a29d80',
  'brand-5': '#f2c59c',
}

RGB Array

[42, 27, 34], [49, 35, 48], [48, 85, 78], [162, 157, 128], [242, 197, 156]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This dark-style palette of #2A1B22, #312330, #30554E, #A29D80, #F2C59C 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 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #2a1b22; --color-2: #312330; --color-3: #30554e; --color-4: #a29d80; --color-5: #f2c59c. 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 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