← Back to Editor

#A81533 · #8324B3 · #6A2AEB · #5269B3 · #A69B85

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#A81533

Vermilion · Brown · Wine Red

HEX
#A81533
RGB
rgb(168, 21, 51)
HSL
hsl(348, 78%, 37%)
HSB
hsb(348, 87%, 66%)
CMYK
cmyk(0%, 87%, 70%, 34%)
Oklch
oklch(47.2% 0.177 18.1)

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

#8324B3

Royal Purple · DarkOrchid · Violet

HEX
#8324B3
RGB
rgb(131, 36, 179)
HSL
hsl(280, 67%, 42%)
HSB
hsb(280, 80%, 70%)
CMYK
cmyk(27%, 80%, 0%, 30%)
Oklch
oklch(48.1% 0.212 310.8)

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

#6A2AEB

Deep Indigo · SlateBlue · Violet

HEX
#6A2AEB
RGB
rgb(106, 42, 235)
HSL
hsl(260, 83%, 54%)
HSB
hsb(260, 82%, 92%)
CMYK
cmyk(55%, 82%, 0%, 8%)
Oklch
oklch(50.7% 0.258 288.2)

Traditional「Deep Indigo」· Paint「Violet」· Creative Blush Sunrise

#5269B3

Azure · SteelBlue · Navy Blue

HEX
#5269B3
RGB
rgb(82, 105, 179)
HSL
hsl(226, 39%, 51%)
HSB
hsb(226, 54%, 70%)
CMYK
cmyk(54%, 41%, 0%, 30%)
Oklch
oklch(53.8% 0.119 269.1)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

#A69B85

Ginger · DarkGray · Sunflower

HEX
#A69B85
RGB
rgb(166, 155, 133)
HSL
hsl(40, 16%, 59%)
HSB
hsb(40, 20%, 65%)
CMYK
cmyk(0%, 7%, 20%, 35%)
Oklch
oklch(69.3% 0.034 84.6)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A81533
15A88B

Analogous

A8157C
A81533
A84115

Triadic

A81533
32A815
1532A8

Split-Comp.

A81533
15A841
157CA8

Tetradic

A81533
7CA815
15A88B
4115A8

Contrast Matrix WCAG 2.1 Contrast

A81533
8324B3
6A2AEB
5269B3
A69B85
—
1.0
Fail
1.1
Fail
1.4
Fail
2.7
Fail
1.0
Fail
—
1.1
Fail
1.4
Fail
2.7
Fail
1.1
Fail
1.1
Fail
—
1.3
Fail
2.4
Fail
1.4
Fail
1.4
Fail
1.3
Fail
—
1.9
Fail
2.7
Fail
2.7
Fail
2.4
Fail
1.9
Fail
—
White BG
7.4AAA
7.3AAA
6.7AA
5.2AA
2.7Fail
Black BG
2.8Fail
2.9Fail
3.1AA Large
4.0AA Large
7.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

68672C
5A5990
4E4EBC
5C5CA1
A1A18A

Deuteranopia

717C2A
5F6688
5257B1
5B599D
A2A38C

Tritanopia

A12625
7E756F
67978F
539390
A58F8F

Achromatopsia

444444
515151
535353
6B6B6B
9C9C9C

Shades & Tints Shades & Tints

#A81533

Dark
Light

#8324B3

Dark
Light

#6A2AEB

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a81533;
  --color-2: #8324b3;
  --color-3: #6a2aeb;
  --color-4: #5269b3;
  --color-5: #a69b85;
}

SCSS

$color-1: #a81533;
$color-2: #8324b3;
$color-3: #6a2aeb;
$color-4: #5269b3;
$color-5: #a69b85;

TAILWIND

colors: {
  'brand-1': '#a81533',
  'brand-2': '#8324b3',
  'brand-3': '#6a2aeb',
  'brand-4': '#5269b3',
  'brand-5': '#a69b85',
}

RGB Array

[168, 21, 51], [131, 36, 179], [106, 42, 235], [82, 105, 179], [166, 155, 133]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #A81533, #8324B3, #6A2AEB, #5269B3, #A69B85 is ideal for: corporate websites, product showcases, portfolios. 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: #a81533; --color-2: #8324b3; --color-3: #6a2aeb; --color-4: #5269b3; --color-5: #a69b85. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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