#C73557 + #9E213E + #381919 + #806B22 + #401838 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#C73557

Crimson · Crimson · Passion Red

HEX

#C73557

RGB

rgb(199, 53, 87)

HSL

hsl(346, 58%, 49%)

HSB

hsb(346, 73%, 78%)

CMYK

cmyk(0%, 73%, 56%, 22%)

Oklch

oklch(55.9% 0.182 12.0)

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

#9E213E

Vermilion · Brown · Wine Red

HEX

#9E213E

RGB

rgb(158, 33, 62)

HSL

hsl(346, 65%, 37%)

HSB

hsb(346, 79%, 62%)

CMYK

cmyk(0%, 79%, 61%, 38%)

Oklch

oklch(46.4% 0.160 13.4)

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

#381919

Crimson · Black · Deep Berry

HEX

#381919

RGB

rgb(56, 25, 25)

HSL

hsl(0, 38%, 16%)

HSB

hsb(0, 55%, 22%)

CMYK

cmyk(0%, 55%, 55%, 78%)

Oklch

oklch(25.8% 0.049 21.1)

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

#806B22

Ochre · Olive · Honey Gold

HEX

#806B22

RGB

rgb(128, 107, 34)

HSL

hsl(47, 58%, 32%)

HSB

hsb(47, 73%, 50%)

CMYK

cmyk(0%, 16%, 73%, 50%)

Oklch

oklch(53.4% 0.094 92.6)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#401838

Rose Purple · DarkSlateGray · Dark Purple

HEX

#401838

RGB

rgb(64, 24, 56)

HSL

hsl(312, 45%, 17%)

HSB

hsb(312, 63%, 25%)

CMYK

cmyk(0%, 63%, 13%, 75%)

Oklch

oklch(28.3% 0.078 335.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C73557

34C5A4

Analogous

C5349F

C73557

C55B34

Triadic

C73557

56C534

3456C5

Split-Comp.

C73557

34C55B

349FC5

Tetradic

C73557

9FC534

34C5A4

5B34C5

Contrast Matrix WCAG 2.1 Contrast

C73557	9E213E	381919	806B22	401838
—	1.5 Fail	3.1 AA Large	1.0 Fail	2.9 Fail
1.5 Fail	—	2.1 Fail	1.5 Fail	1.9 Fail
3.1 AA Large	2.1 Fail	—	3.1 AA Large	1.1 Fail
1.0 Fail	1.5 Fail	3.1 AA Large	—	2.9 Fail
2.9 Fail	1.9 Fail	1.1 Fail	2.9 Fail	—

White BG

5.2AA

7.7AAA

15.9AAA

5.2AA

14.9AAA

Black BG

4.1AA Large

2.7Fail

1.3Fail

4.0AA Large

1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

88864F

686737

2B2A19

777734

2F2E30

Deuteranopia

909B4D

6F7935

2C2F19

787A38

31342E

Tritanopia

C04847

983130

361919

7F4245

3E2A29

Achromatopsia

656565

4A4A4A

222222

696969

282828

Shades & Tints Shades & Tints

#C73557

Dark

Light

#9E213E

Dark

Light

#381919

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c73557;
  --color-2: #9e213e;
  --color-3: #381919;
  --color-4: #806b22;
  --color-5: #401838;
}

SCSS

$color-1: #c73557;
$color-2: #9e213e;
$color-3: #381919;
$color-4: #806b22;
$color-5: #401838;

TAILWIND

colors: {
  'brand-1': '#c73557',
  'brand-2': '#9e213e',
  'brand-3': '#381919',
  'brand-4': '#806b22',
  'brand-5': '#401838',
}

RGB Array

[199, 53, 87], [158, 33, 62], [56, 25, 25], [128, 107, 34], [64, 24, 56]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C73557, #9E213E, #381919, #806B22, #401838 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: #c73557; --color-2: #9e213e; --color-3: #381919; --color-4: #806b22; --color-5: #401838. 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