#401C48 + #371B34 + #7B3438 + #D35C31 + #FF2F11 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#401C48

Dark Plum · DarkSlateGray · Dark Purple

HEX

#401C48

RGB

rgb(64, 28, 72)

HSL

hsl(289, 44%, 20%)

HSB

hsb(289, 61%, 28%)

CMYK

cmyk(11%, 61%, 0%, 72%)

Oklch

oklch(29.9% 0.087 320.1)

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

#371B34

Rose Purple · DarkSlateGray · Dark Purple

HEX

#371B34

RGB

rgb(55, 27, 52)

HSL

hsl(306, 34%, 16%)

HSB

hsb(306, 51%, 22%)

CMYK

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

Oklch

oklch(27.2% 0.059 331.1)

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

#7B3438

Crimson · Brown · Wine Red

HEX

#7B3438

RGB

rgb(123, 52, 56)

HSL

hsl(357, 41%, 34%)

HSB

hsb(357, 58%, 48%)

CMYK

cmyk(0%, 58%, 54%, 52%)

Oklch

oklch(42.3% 0.099 18.9)

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

#D35C31

Tangerine · Chocolate · Warm Sun

HEX

#D35C31

RGB

rgb(211, 92, 49)

HSL

hsl(16, 65%, 51%)

HSB

hsb(16, 77%, 83%)

CMYK

cmyk(0%, 56%, 77%, 17%)

Oklch

oklch(61.8% 0.161 39.4)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#FF2F11

Vermilion · OrangeRed · Passion Red

HEX

#FF2F11

RGB

rgb(255, 47, 17)

HSL

hsl(8, 100%, 53%)

HSB

hsb(8, 93%, 100%)

CMYK

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

Oklch

oklch(64.4% 0.242 31.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

401C48

25491D

Analogous

2B1D49

401C48

491D3B

Triadic

401C48

49411D

1D4941

Split-Comp.

401C48

3B491D

1D492B

Tetradic

401C48

492B1D

25491D

1D3B49

Contrast Matrix WCAG 2.1 Contrast

401C48	371B34	7B3438	D35C31	FF2F11
—	1.1 Fail	1.6 Fail	3.6 AA Large	3.8 AA Large
1.1 Fail	—	1.7 Fail	3.9 AA Large	4.1 AA Large
1.6 Fail	1.7 Fail	—	2.2 Fail	2.4 Fail
3.6 AA Large	3.9 AA Large	2.2 Fail	—	1.1 Fail
3.8 AA Large	4.1 AA Large	2.4 Fail	1.1 Fail	—

White BG

14.2AAA

15.3AAA

8.8AAA

3.9AA Large

3.7AA Large

Black BG

1.5Fail

1.4Fail

2.4Fail

5.3AA

5.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

30303D

2B2B2E

5C5C37

9F9E3B

A5A318

Deuteranopia

33353B

2D2F2D

606637

A6AF3E

B1C11A

Tritanopia

3E3533

362928

773636

CD4445

F51E1F

Achromatopsia

2C2C2C

262626

4A4A4A

7B7B7B

6A6A6A

Shades & Tints Shades & Tints

#401C48

Dark

Light

#371B34

Dark

Light

#7B3438

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #401c48;
  --color-2: #371b34;
  --color-3: #7b3438;
  --color-4: #d35c31;
  --color-5: #ff2f11;
}

SCSS

$color-1: #401c48;
$color-2: #371b34;
$color-3: #7b3438;
$color-4: #d35c31;
$color-5: #ff2f11;

TAILWIND

colors: {
  'brand-1': '#401c48',
  'brand-2': '#371b34',
  'brand-3': '#7b3438',
  'brand-4': '#d35c31',
  'brand-5': '#ff2f11',
}

RGB Array

[64, 28, 72], [55, 27, 52], [123, 52, 56], [211, 92, 49], [255, 47, 17]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #401C48, #371B34, #7B3438, #D35C31, #FF2F11 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: #401c48; --color-2: #371b34; --color-3: #7b3438; --color-4: #d35c31; --color-5: #ff2f11. 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