#3D2145 + #4F1B48 + #661D3C + #752424 + #963200 · 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

#3D2145

Dark Plum · DarkSlateGray · Dark Purple

HEX

#3D2145

RGB

rgb(61, 33, 69)

HSL

hsl(287, 35%, 20%)

HSB

hsb(287, 52%, 27%)

CMYK

cmyk(12%, 52%, 0%, 73%)

Oklch

oklch(30.1% 0.072 318.4)

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

#4F1B48

Rose Purple · DarkSlateGray · Eggplant

HEX

#4F1B48

RGB

rgb(79, 27, 72)

HSL

hsl(308, 49%, 21%)

HSB

hsb(308, 66%, 31%)

CMYK

cmyk(0%, 66%, 9%, 69%)

Oklch

oklch(32.1% 0.099 333.2)

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

#661D3C

Dark Violet · Brown · Camellia

HEX

#661D3C

RGB

rgb(102, 29, 60)

HSL

hsl(335, 56%, 26%)

HSB

hsb(335, 72%, 40%)

CMYK

cmyk(0%, 72%, 41%, 60%)

Oklch

oklch(35.7% 0.109 358.1)

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

#752424

Crimson · Brown · Wine Red

HEX

#752424

RGB

rgb(117, 36, 36)

HSL

hsl(0, 53%, 30%)

HSB

hsb(0, 69%, 46%)

CMYK

cmyk(0%, 69%, 69%, 54%)

Oklch

oklch(38.6% 0.114 24.2)

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

#963200

Tangerine · Brown · Amber Brown

HEX

#963200

RGB

rgb(150, 50, 0)

HSL

hsl(20, 100%, 29%)

HSB

hsb(20, 100%, 59%)

CMYK

cmyk(0%, 67%, 100%, 41%)

Oklch

oklch(45.9% 0.143 40.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3D2145

294521

Analogous

2B2145

3D2145

45213B

Triadic

3D2145

453D21

21453D

Split-Comp.

3D2145

3B4521

21452B

Tetradic

3D2145

452B21

294521

213B45

Contrast Matrix WCAG 2.1 Contrast

3D2145	4F1B48	661D3C	752424	963200
—	1.1 Fail	1.2 Fail	1.4 Fail	1.8 Fail
1.1 Fail	—	1.1 Fail	1.3 Fail	1.7 Fail
1.2 Fail	1.1 Fail	—	1.1 Fail	1.5 Fail
1.4 Fail	1.3 Fail	1.1 Fail	—	1.4 Fail
1.8 Fail	1.7 Fail	1.5 Fail	1.4 Fail	—

White BG

14.0AAA

13.3AAA

11.6AAA

10.3AAA

7.6AAA

Black BG

1.5Fail

1.6Fail

1.8Fail

2.0Fail

2.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

31313C

38383D

464634

525124

6B6A0C

Deuteranopia

33353A

3C3F3B

4B5033

575D24

71780F

Tritanopia

3C3534

4C3533

622F2D

712424

911618

Achromatopsia

2D2D2D

303030

363636

3C3C3C

4A4A4A

Shades & Tints Shades & Tints

#3D2145

Dark

Light

#4F1B48

Dark

Light

#661D3C

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3d2145;
  --color-2: #4f1b48;
  --color-3: #661d3c;
  --color-4: #752424;
  --color-5: #963200;
}

SCSS

$color-1: #3d2145;
$color-2: #4f1b48;
$color-3: #661d3c;
$color-4: #752424;
$color-5: #963200;

TAILWIND

colors: {
  'brand-1': '#3d2145',
  'brand-2': '#4f1b48',
  'brand-3': '#661d3c',
  'brand-4': '#752424',
  'brand-5': '#963200',
}

RGB Array

[61, 33, 69], [79, 27, 72], [102, 29, 60], [117, 36, 36], [150, 50, 0]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This dark-style palette of #3D2145, #4F1B48, #661D3C, #752424, #963200 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: #3d2145; --color-2: #4f1b48; --color-3: #661d3c; --color-4: #752424; --color-5: #963200. 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