#1F1224 + #3A1B2B + #531E28 + #7C1B26 + #CA0F24 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#1F1224

Dark Plum · Black · Dark Purple

HEX

#1F1224

RGB

rgb(31, 18, 36)

HSL

hsl(283, 33%, 11%)

HSB

hsb(283, 50%, 14%)

CMYK

cmyk(14%, 50%, 0%, 86%)

Oklch

oklch(20.9% 0.039 316.2)

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

#3A1B2B

Rose Purple · DarkSlateGray · Raspberry

HEX

#3A1B2B

RGB

rgb(58, 27, 43)

HSL

hsl(329, 36%, 17%)

HSB

hsb(329, 53%, 23%)

CMYK

cmyk(0%, 53%, 26%, 77%)

Oklch

oklch(27.2% 0.054 349.1)

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

#531E28

Crimson · Maroon · Wine Red

HEX

#531E28

RGB

rgb(83, 30, 40)

HSL

hsl(349, 47%, 22%)

HSB

hsb(349, 64%, 33%)

CMYK

cmyk(0%, 64%, 52%, 67%)

Oklch

oklch(31.8% 0.080 11.2)

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

#7C1B26

Vermilion · Brown · Wine Red

HEX

#7C1B26

RGB

rgb(124, 27, 38)

HSL

hsl(353, 64%, 30%)

HSB

hsb(353, 78%, 49%)

CMYK

cmyk(0%, 78%, 69%, 51%)

Oklch

oklch(39.0% 0.131 19.9)

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

#CA0F24

Vermilion · Crimson · Passion Red

HEX

#CA0F24

RGB

rgb(202, 15, 36)

HSL

hsl(353, 86%, 43%)

HSB

hsb(353, 93%, 79%)

CMYK

cmyk(0%, 93%, 82%, 21%)

Oklch

oklch(53.3% 0.210 24.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

1F1224

182513

Analogous

171325

1F1224

251321

Triadic

1F1224

252013

132520

Split-Comp.

1F1224

212513

132517

Tetradic

1F1224

251713

182513

132125

Contrast Matrix WCAG 2.1 Contrast

1F1224	3A1B2B	531E28	7C1B26	CA0F24
—	1.2 Fail	1.4 Fail	1.7 Fail	3.1 AA Large
1.2 Fail	—	1.2 Fail	1.5 Fail	2.6 Fail
1.4 Fail	1.2 Fail	—	1.3 Fail	2.3 Fail
1.7 Fail	1.5 Fail	1.3 Fail	—	1.8 Fail
3.1 AA Large	2.6 Fail	2.3 Fail	1.8 Fail	—

White BG

17.9AAA

15.3AAA

13.3AAA

10.3AAA

5.8AA

Black BG

1.2Fail

1.4Fail

1.6Fail

2.0Fail

3.6AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

191920

2D2C27

3C3C26

525123

79771F

Deuteranopia

1A1B1F

2E3126

3F4325

585F23

84921E

Tritanopia

1E1C1B

382423

502423

772121

C11B1A

Achromatopsia

181818

262626

2F2F2F

393939

494949

Shades & Tints Shades & Tints

#1F1224

Dark

Light

#3A1B2B

Dark

Light

#531E28

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #1f1224;
  --color-2: #3a1b2b;
  --color-3: #531e28;
  --color-4: #7c1b26;
  --color-5: #ca0f24;
}

SCSS

$color-1: #1f1224;
$color-2: #3a1b2b;
$color-3: #531e28;
$color-4: #7c1b26;
$color-5: #ca0f24;

TAILWIND

colors: {
  'brand-1': '#1f1224',
  'brand-2': '#3a1b2b',
  'brand-3': '#531e28',
  'brand-4': '#7c1b26',
  'brand-5': '#ca0f24',
}

RGB Array

[31, 18, 36], [58, 27, 43], [83, 30, 40], [124, 27, 38], [202, 15, 36]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #1F1224, #3A1B2B, #531E28, #7C1B26, #CA0F24 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: #1f1224; --color-2: #3a1b2b; --color-3: #531e28; --color-4: #7c1b26; --color-5: #ca0f24. 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