#5C7782 + #1F1015 + #701A35 + #992731 + #B53124 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#5C7782

Slate Blue · SlateGray · Mint Ice

HEX

#5C7782

RGB

rgb(92, 119, 130)

HSL

hsl(197, 17%, 44%)

HSB

hsb(197, 29%, 51%)

CMYK

cmyk(29%, 8%, 0%, 49%)

Oklch

oklch(55.2% 0.036 224.8)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#1F1015

Dark Violet · Black · Raspberry

HEX

#1F1015

RGB

rgb(31, 16, 21)

HSL

hsl(340, 32%, 9%)

HSB

hsb(340, 48%, 12%)

CMYK

cmyk(0%, 48%, 32%, 88%)

Oklch

oklch(19.6% 0.027 358.3)

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

#701A35

Dark Violet · Brown · Camellia

HEX

#701A35

RGB

rgb(112, 26, 53)

HSL

hsl(341, 62%, 27%)

HSB

hsb(341, 77%, 44%)

CMYK

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

Oklch

oklch(37.0% 0.120 6.7)

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

#992731

Crimson · Brown · Wine Red

HEX

#992731

RGB

rgb(153, 39, 49)

HSL

hsl(355, 59%, 38%)

HSB

hsb(355, 75%, 60%)

CMYK

cmyk(0%, 75%, 68%, 40%)

Oklch

oklch(45.7% 0.149 20.8)

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

#B53124

Vermilion · FireBrick · Passion Red

HEX

#B53124

RGB

rgb(181, 49, 36)

HSL

hsl(5, 67%, 43%)

HSB

hsb(5, 80%, 71%)

CMYK

cmyk(0%, 73%, 80%, 29%)

Oklch

oklch(51.5% 0.171 29.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5C7782

83685D

Analogous

5D837B

5C7782

5D6583

Triadic

5C7782

835D78

78835D

Split-Comp.

5C7782

835D65

837B5D

Tetradic

5C7782

7B5D83

83685D

65835D

Contrast Matrix WCAG 2.1 Contrast

5C7782	1F1015	701A35	992731	B53124
—	3.9 AA Large	2.3 Fail	1.6 Fail	1.3 Fail
3.9 AA Large	—	1.7 Fail	2.4 Fail	3.0 Fail
2.3 Fail	1.7 Fail	—	1.4 Fail	1.8 Fail
1.6 Fail	2.4 Fail	1.4 Fail	—	1.3 Fail
1.3 Fail	3.0 Fail	1.8 Fail	1.3 Fail	—

White BG

4.8AA

18.4AAA

11.1AAA

7.8AAA

6.1AA

Black BG

4.4AA Large

1.1Fail

1.9Fail

2.7Fail

3.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

68687F

191814

4B4A2E

68672F

7C7B27

Deuteranopia

66647F

191B14

50562D

6E772E

848D28

Tritanopia

5D7D7D

1E1313

6C2928

932D2C

AE2A2A

Achromatopsia

707070

151515

373737

4A4A4A

575757

Shades & Tints Shades & Tints

#5C7782

Dark

Light

#1F1015

Dark

Light

#701A35

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5c7782;
  --color-2: #1f1015;
  --color-3: #701a35;
  --color-4: #992731;
  --color-5: #b53124;
}

SCSS

$color-1: #5c7782;
$color-2: #1f1015;
$color-3: #701a35;
$color-4: #992731;
$color-5: #b53124;

TAILWIND

colors: {
  'brand-1': '#5c7782',
  'brand-2': '#1f1015',
  'brand-3': '#701a35',
  'brand-4': '#992731',
  'brand-5': '#b53124',
}

RGB Array

[92, 119, 130], [31, 16, 21], [112, 26, 53], [153, 39, 49], [181, 49, 36]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #5C7782, #1F1015, #701A35, #992731, #B53124 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: #5c7782; --color-2: #1f1015; --color-3: #701a35; --color-4: #992731; --color-5: #b53124. 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