#2B2323 + #2E2127 + #38202C + #401E2E + #521030 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#2B2323

Crimson · DarkSlateGray · Deep Berry

HEX

#2B2323

RGB

rgb(43, 35, 35)

HSL

hsl(0, 10%, 15%)

HSB

hsb(0, 19%, 17%)

CMYK

cmyk(0%, 19%, 19%, 83%)

Oklch

oklch(26.5% 0.012 17.9)

Traditional「Crimson」· Paint「Deep Berry」· Creative Blush Sunrise

#2E2127

Dark Violet · DarkSlateGray · Raspberry

HEX

#2E2127

RGB

rgb(46, 33, 39)

HSL

hsl(332, 16%, 15%)

HSB

hsb(332, 28%, 18%)

CMYK

cmyk(0%, 28%, 15%, 82%)

Oklch

oklch(26.6% 0.022 349.4)

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

#38202C

Dark Violet · DarkSlateGray · Raspberry

HEX

#38202C

RGB

rgb(56, 32, 44)

HSL

hsl(330, 27%, 17%)

HSB

hsb(330, 43%, 22%)

CMYK

cmyk(0%, 43%, 21%, 78%)

Oklch

oklch(27.9% 0.042 348.8)

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

#401E2E

Dark Violet · DarkSlateGray · Raspberry

HEX

#401E2E

RGB

rgb(64, 30, 46)

HSL

hsl(332, 36%, 18%)

HSB

hsb(332, 53%, 25%)

CMYK

cmyk(0%, 53%, 28%, 75%)

Oklch

oklch(28.8% 0.057 351.7)

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

#521030

Dark Violet · Maroon · Raspberry

HEX

#521030

RGB

rgb(82, 16, 48)

HSL

hsl(331, 67%, 19%)

HSB

hsb(331, 80%, 32%)

CMYK

cmyk(0%, 80%, 41%, 68%)

Oklch

oklch(30.1% 0.101 355.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2B2323

222A2A

Analogous

2A2226

2B2323

2A2622

Triadic

2B2323

222A22

22222A

Split-Comp.

2B2323

222A26

22262A

Tetradic

2B2323

262A22

222A2A

26222A

Contrast Matrix WCAG 2.1 Contrast

2B2323	2E2127	38202C	401E2E	521030
—	1.0 Fail	1.0 Fail	1.1 Fail	1.1 Fail
1.0 Fail	—	1.0 Fail	1.1 Fail	1.1 Fail
1.0 Fail	1.0 Fail	—	1.0 Fail	1.0 Fail
1.1 Fail	1.1 Fail	1.0 Fail	—	1.0 Fail
1.1 Fail	1.1 Fail	1.0 Fail	1.0 Fail	—

White BG

15.4AAA

14.9AAA

14.6AAA

14.2AAA

Black BG

1.4Fail

1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

282723

282826

2E2D29

31312A

353528

Deuteranopia

282923

292A25

2F3128

333629

393E26

Tritanopia

2B2323

2D2424

372726

3E2726

4F2221

Achromatopsia

252525

262626

292929

2A2A2A

272727

Shades & Tints Shades & Tints

#2B2323

Dark

Light

#2E2127

Dark

Light

#38202C

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2b2323;
  --color-2: #2e2127;
  --color-3: #38202c;
  --color-4: #401e2e;
  --color-5: #521030;
}

SCSS

$color-1: #2b2323;
$color-2: #2e2127;
$color-3: #38202c;
$color-4: #401e2e;
$color-5: #521030;

TAILWIND

colors: {
  'brand-1': '#2b2323',
  'brand-2': '#2e2127',
  'brand-3': '#38202c',
  'brand-4': '#401e2e',
  'brand-5': '#521030',
}

RGB Array

[43, 35, 35], [46, 33, 39], [56, 32, 44], [64, 30, 46], [82, 16, 48]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2B2323, #2E2127, #38202C, #401E2E, #521030 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: #2b2323; --color-2: #2e2127; --color-3: #38202c; --color-4: #401e2e; --color-5: #521030. 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