#371F37 + #160817 + #2B1730 + #100412 + #351834 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#371F37

Rose Purple · DarkSlateGray · Dark Purple

HEX

#371F37

RGB

rgb(55, 31, 55)

HSL

hsl(300, 28%, 17%)

HSB

hsb(300, 44%, 22%)

CMYK

cmyk(0%, 44%, 0%, 78%)

Oklch

oklch(28.1% 0.054 326.9)

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

#160817

Dark Plum · Black · Dark Purple

HEX

#160817

RGB

rgb(22, 8, 23)

HSL

hsl(296, 48%, 6%)

HSB

hsb(296, 65%, 9%)

CMYK

cmyk(4%, 65%, 0%, 91%)

Oklch

oklch(16.4% 0.037 324.7)

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

#2B1730

Dark Plum · DarkSlateGray · Dark Purple

HEX

#2B1730

RGB

rgb(43, 23, 48)

HSL

hsl(288, 35%, 14%)

HSB

hsb(288, 52%, 19%)

CMYK

cmyk(10%, 52%, 0%, 81%)

Oklch

oklch(24.4% 0.053 319.4)

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

#100412

Royal Purple · Black · Dark Purple

HEX

#100412

RGB

rgb(16, 4, 18)

HSL

hsl(291, 64%, 4%)

HSB

hsb(291, 78%, 7%)

CMYK

cmyk(11%, 78%, 0%, 93%)

Oklch

oklch(13.9% 0.039 322.4)

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

#351834

Rose Purple · DarkSlateGray · Dark Purple

HEX

#351834

RGB

rgb(53, 24, 52)

HSL

hsl(302, 38%, 15%)

HSB

hsb(302, 55%, 21%)

CMYK

cmyk(0%, 55%, 2%, 79%)

Oklch

oklch(26.3% 0.064 328.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

371F37

1F371F

Analogous

2B1F37

371F37

371F2B

Triadic

371F37

37371F

1F3737

Split-Comp.

371F37

2B371F

1F372B

Tetradic

371F37

372B1F

1F371F

1F2B37

Contrast Matrix WCAG 2.1 Contrast

371F37	160817	2B1730	100412	351834
—	1.3 Fail	1.1 Fail	1.3 Fail	1.1 Fail
1.3 Fail	—	1.2 Fail	1.0 Fail	1.2 Fail
1.1 Fail	1.2 Fail	—	1.2 Fail	1.1 Fail
1.3 Fail	1.0 Fail	1.2 Fail	—	1.3 Fail
1.1 Fail	1.2 Fail	1.1 Fail	1.3 Fail	—

White BG

14.9AAA

19.4AAA

16.6AAA

20.0AAA

15.8AAA

Black BG

1.4Fail

1.1Fail

1.3Fail

1.0Fail

1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

2D2C31

101013

22222A

0B0B0F

28282D

Deuteranopia

2E3030

111212

242528

0C0C0E

2A2C2C

Tritanopia

362D2C

151110

2A2524

0F0C0B

342827

Achromatopsia

292929

0E0E0E

202020

090909

242424

Shades & Tints Shades & Tints

#371F37

Dark

Light

#160817

Dark

Light

#2B1730

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #371f37;
  --color-2: #160817;
  --color-3: #2b1730;
  --color-4: #100412;
  --color-5: #351834;
}

SCSS

$color-1: #371f37;
$color-2: #160817;
$color-3: #2b1730;
$color-4: #100412;
$color-5: #351834;

TAILWIND

colors: {
  'brand-1': '#371f37',
  'brand-2': '#160817',
  'brand-3': '#2b1730',
  'brand-4': '#100412',
  'brand-5': '#351834',
}

RGB Array

[55, 31, 55], [22, 8, 23], [43, 23, 48], [16, 4, 18], [53, 24, 52]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #371F37, #160817, #2B1730, #100412, #351834 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: #371f37; --color-2: #160817; --color-3: #2b1730; --color-4: #100412; --color-5: #351834. 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 general-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