← Back to Editor

#717A6D · #A8015D · #820287 · #220C1B · #F01B20

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#717A6D

Ink Gray · DimGray · Warm Gray

HEX
#717A6D
RGB
rgb(113, 122, 109)
HSL
hsl(102, 6%, 45%)
HSB
hsb(102, 11%, 48%)
CMYK
cmyk(7%, 0%, 11%, 52%)
Oklch
oklch(56.8% 0.022 135.9)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

#A8015D

Rose Purple · Purple · Camellia

HEX
#A8015D
RGB
rgb(168, 1, 93)
HSL
hsl(327, 99%, 33%)
HSB
hsb(327, 99%, 66%)
CMYK
cmyk(0%, 99%, 45%, 34%)
Oklch
oklch(47.6% 0.194 357.5)

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

#820287

Royal Purple · Purple · Eggplant

HEX
#820287
RGB
rgb(130, 2, 135)
HSL
hsl(298, 97%, 27%)
HSB
hsb(298, 99%, 53%)
CMYK
cmyk(4%, 99%, 0%, 47%)
Oklch
oklch(43.0% 0.198 326.4)

Traditional「Royal Purple」· Paint「Eggplant」· Creative Blush Sunrise

#220C1B

Rose Purple · Black · Dark Purple

HEX
#220C1B
RGB
rgb(34, 12, 27)
HSL
hsl(319, 48%, 9%)
HSB
hsb(319, 65%, 13%)
CMYK
cmyk(0%, 65%, 21%, 87%)
Oklch
oklch(19.5% 0.045 340.8)

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

#F01B20

Vermilion · Crimson · Passion Red

HEX
#F01B20
RGB
rgb(240, 27, 32)
HSL
hsl(359, 88%, 52%)
HSB
hsb(359, 89%, 94%)
CMYK
cmyk(0%, 89%, 87%, 6%)
Oklch
oklch(60.8% 0.238 27.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

717A6D
766C7A

Analogous

777A6C
717A6D
6C7A6F

Triadic

717A6D
6C707A
7A6C70

Split-Comp.

717A6D
6F6C7A
7A6C77

Tetradic

717A6D
6C777A
766C7A
7A6F6C

Contrast Matrix WCAG 2.1 Contrast

717A6D
A8015D
820287
220C1B
F01B20
—
1.7
Fail
2.0
Fail
4.1
AA Large
1.0
Fail
1.7
Fail
—
1.2
Fail
2.5
Fail
1.7
Fail
2.0
Fail
1.2
Fail
—
2.0
Fail
2.1
Fail
4.1
AA Large
2.5
Fail
2.0
Fail
—
4.3
AA Large
1.0
Fail
1.7
Fail
2.1
Fail
4.3
AA Large
—
White BG
4.5AA Large
7.4AAA
9.1AAA
18.5AAA
4.3AA Large
Black BG
4.7AA
2.8Fail
2.3Fail
1.1Fail
4.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

757570
605E47
4B4967
181817
94921F

Deuteranopia

747471
697641
525C5F
1A1B17
A0B01F

Tritanopia

717373
A03531
7C4D48
211514
E51E1E

Achromatopsia

767676
3D3D3D
373737
141414
5B5B5B

Shades & Tints Shades & Tints

#717A6D

Dark
Light

#A8015D

Dark
Light

#820287

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #717a6d;
  --color-2: #a8015d;
  --color-3: #820287;
  --color-4: #220c1b;
  --color-5: #f01b20;
}

SCSS

$color-1: #717a6d;
$color-2: #a8015d;
$color-3: #820287;
$color-4: #220c1b;
$color-5: #f01b20;

TAILWIND

colors: {
  'brand-1': '#717a6d',
  'brand-2': '#a8015d',
  'brand-3': '#820287',
  'brand-4': '#220c1b',
  'brand-5': '#f01b20',
}

RGB Array

[113, 122, 109], [168, 1, 93], [130, 2, 135], [34, 12, 27], [240, 27, 32]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #717A6D, #A8015D, #820287, #220C1B, #F01B20 is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #717a6d; --color-2: #a8015d; --color-3: #820287; --color-4: #220c1b; --color-5: #f01b20. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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