#1F0D26 + #330F32 + #471534 + #5C1629 + #731B18 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#1F0D26

Dark Plum · Black · Dark Purple

HEX

#1F0D26

RGB

rgb(31, 13, 38)

HSL

hsl(283, 49%, 10%)

HSB

hsb(283, 66%, 15%)

CMYK

cmyk(18%, 66%, 0%, 85%)

Oklch

oklch(19.9% 0.054 315.8)

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

#330F32

Rose Purple · MidnightBlue · Dark Purple

HEX

#330F32

RGB

rgb(51, 15, 50)

HSL

hsl(302, 55%, 13%)

HSB

hsb(302, 71%, 20%)

CMYK

cmyk(0%, 71%, 2%, 80%)

Oklch

oklch(24.4% 0.078 328.7)

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

#471534

Rose Purple · DarkSlateGray · Raspberry

HEX

#471534

RGB

rgb(71, 21, 52)

HSL

hsl(323, 54%, 18%)

HSB

hsb(323, 70%, 28%)

CMYK

cmyk(0%, 70%, 27%, 72%)

Oklch

oklch(28.8% 0.086 345.7)

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

#5C1629

Dark Violet · Maroon · Raspberry

HEX

#5C1629

RGB

rgb(92, 22, 41)

HSL

hsl(344, 61%, 22%)

HSB

hsb(344, 76%, 36%)

CMYK

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

Oklch

oklch(32.4% 0.102 8.8)

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

#731B18

Vermilion · Maroon · Wine Red

HEX

#731B18

RGB

rgb(115, 27, 24)

HSL

hsl(2, 65%, 27%)

HSB

hsb(2, 79%, 45%)

CMYK

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

Oklch

oklch(37.0% 0.123 27.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

1F0D26

14260D

Analogous

120D26

1F0D26

260D21

Triadic

1F0D26

261F0D

0D261F

Split-Comp.

1F0D26

21260D

0D2612

Tetradic

1F0D26

26120D

14260D

0D2126

Contrast Matrix WCAG 2.1 Contrast

1F0D26	330F32	471534	5C1629	731B18
—	1.1 Fail	1.2 Fail	1.4 Fail	1.7 Fail
1.1 Fail	—	1.1 Fail	1.3 Fail	1.5 Fail
1.2 Fail	1.1 Fail	—	1.1 Fail	1.3 Fail
1.4 Fail	1.3 Fail	1.1 Fail	—	1.2 Fail
1.7 Fail	1.5 Fail	1.3 Fail	1.2 Fail	—

White BG

18.4AAA

16.7AAA

14.7AAA

13.1AAA

11.1AAA

Black BG

1.1Fail

1.3Fail

1.4Fail

1.6Fail

1.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

171720

23232A

31312C

3E3D24

4D4C19

Deuteranopia

181A1E

262828

34382B

424723

525919

Tritanopia

1E1B1A

312321

452725

582120

6F1919

Achromatopsia

151515

1E1E1E

272727

2D2D2D

353535

Shades & Tints Shades & Tints

#1F0D26

Dark

Light

#330F32

Dark

Light

#471534

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #1f0d26;
  --color-2: #330f32;
  --color-3: #471534;
  --color-4: #5c1629;
  --color-5: #731b18;
}

SCSS

$color-1: #1f0d26;
$color-2: #330f32;
$color-3: #471534;
$color-4: #5c1629;
$color-5: #731b18;

TAILWIND

colors: {
  'brand-1': '#1f0d26',
  'brand-2': '#330f32',
  'brand-3': '#471534',
  'brand-4': '#5c1629',
  'brand-5': '#731b18',
}

RGB Array

[31, 13, 38], [51, 15, 50], [71, 21, 52], [92, 22, 41], [115, 27, 24]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #1F0D26, #330F32, #471534, #5C1629, #731B18 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: #1f0d26; --color-2: #330f32; --color-3: #471534; --color-4: #5c1629; --color-5: #731b18. 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