#B31731 + #68252F + #3F1532 + #574D53 + #A58C73 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#B31731

Vermilion · FireBrick · Wine Red

HEX

#B31731

RGB

rgb(179, 23, 49)

HSL

hsl(350, 77%, 40%)

HSB

hsb(350, 87%, 70%)

CMYK

cmyk(0%, 87%, 73%, 30%)

Oklch

oklch(49.4% 0.186 20.3)

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

#68252F

Crimson · Brown · Wine Red

HEX

#68252F

RGB

rgb(104, 37, 47)

HSL

hsl(351, 48%, 28%)

HSB

hsb(351, 64%, 41%)

CMYK

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

Oklch

oklch(36.7% 0.096 14.2)

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

#3F1532

Rose Purple · DarkSlateGray · Dark Purple

HEX

#3F1532

RGB

rgb(63, 21, 50)

HSL

hsl(319, 50%, 16%)

HSB

hsb(319, 67%, 25%)

CMYK

cmyk(0%, 67%, 21%, 75%)

Oklch

oklch(27.3% 0.077 341.4)

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

#574D53

Ink Gray · DimGray · Charcoal

HEX

#574D53

RGB

rgb(87, 77, 83)

HSL

hsl(324, 6%, 32%)

HSB

hsb(324, 11%, 34%)

CMYK

cmyk(0%, 11%, 5%, 66%)

Oklch

oklch(43.2% 0.016 341.1)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#A58C73

Ginger · Gray · Warm Sun

HEX

#A58C73

RGB

rgb(165, 140, 115)

HSL

hsl(30, 22%, 55%)

HSB

hsb(30, 30%, 65%)

CMYK

cmyk(0%, 15%, 30%, 35%)

Oklch

oklch(65.6% 0.047 66.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B31731

17B59A

Analogous

B51780

B31731

B54C17

Triadic

B31731

32B517

1732B5

Split-Comp.

B31731

17B54C

1780B5

Tetradic

B31731

80B517

17B59A

4C17B5

Contrast Matrix WCAG 2.1 Contrast

B31731	68252F	3F1532	574D53	A58C73
—	1.6 Fail	2.3 Fail	1.2 Fail	2.1 Fail
1.6 Fail	—	1.4 Fail	1.4 Fail	3.5 AA Large
2.3 Fail	1.4 Fail	—	1.9 Fail	4.8 AA
1.2 Fail	1.4 Fail	1.9 Fail	—	2.5 Fail
2.1 Fail	3.5 AA Large	4.8 AA	2.5 Fail	—

White BG

6.8AA

11.1AAA

15.4AAA

8.1AAA

3.2AA Large

Black BG

3.1AA Large

1.9Fail

1.4Fail

2.6Fail

6.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6F6E2B

4B4A2D

2D2C2B

535352

9A9A79

Deuteranopia

798429

4F542C

2F3229

535451

9C9E7B

Tritanopia

AB2625

652B2A

3D2524

565050

A47E7F

Achromatopsia

494949

3A3A3A

252525

515151

919191

Shades & Tints Shades & Tints

#B31731

Dark

Light

#68252F

Dark

Light

#3F1532

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b31731;
  --color-2: #68252f;
  --color-3: #3f1532;
  --color-4: #574d53;
  --color-5: #a58c73;
}

SCSS

$color-1: #b31731;
$color-2: #68252f;
$color-3: #3f1532;
$color-4: #574d53;
$color-5: #a58c73;

TAILWIND

colors: {
  'brand-1': '#b31731',
  'brand-2': '#68252f',
  'brand-3': '#3f1532',
  'brand-4': '#574d53',
  'brand-5': '#a58c73',
}

RGB Array

[179, 23, 49], [104, 37, 47], [63, 21, 50], [87, 77, 83], [165, 140, 115]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B31731, #68252F, #3F1532, #574D53, #A58C73 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: #b31731; --color-2: #68252f; --color-3: #3f1532; --color-4: #574d53; --color-5: #a58c73. 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