← Back to Editor

#AE1C40 · #B82761 · #A04A8B · #8851B6 · #45454F

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

#AE1C40

Vermilion · Brown · Wine Red

HEX
#AE1C40
RGB
rgb(174, 28, 64)
HSL
hsl(345, 72%, 40%)
HSB
hsb(345, 84%, 68%)
CMYK
cmyk(0%, 84%, 63%, 32%)
Oklch
oklch(49.0% 0.179 14.2)

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

#B82761

Dark Violet · MediumVioletRed · Camellia

HEX
#B82761
RGB
rgb(184, 39, 97)
HSL
hsl(336, 65%, 44%)
HSB
hsb(336, 79%, 72%)
CMYK
cmyk(0%, 79%, 47%, 28%)
Oklch
oklch(52.4% 0.184 2.4)

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

#A04A8B

Rose Purple · Gray · Violet

HEX
#A04A8B
RGB
rgb(160, 74, 139)
HSL
hsl(315, 37%, 46%)
HSB
hsb(315, 54%, 63%)
CMYK
cmyk(0%, 54%, 13%, 37%)
Oklch
oklch(54.0% 0.139 337.6)

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

#8851B6

Dark Plum · SlateBlue · Violet

HEX
#8851B6
RGB
rgb(136, 81, 182)
HSL
hsl(273, 41%, 52%)
HSB
hsb(273, 55%, 71%)
CMYK
cmyk(25%, 55%, 0%, 29%)
Oklch
oklch(54.3% 0.158 307.0)

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

#45454F

Dark Cyan · DarkSlateGray · Charcoal

HEX
#45454F
RGB
rgb(69, 69, 79)
HSL
hsl(240, 7%, 29%)
HSB
hsb(240, 13%, 31%)
CMYK
cmyk(13%, 13%, 0%, 69%)
Oklch
oklch(39.4% 0.017 285.6)

Traditional「Dark Cyan」· Paint「Charcoal」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AE1C40
1DAF8B

Analogous

AF1D8B
AE1C40
AF411D

Triadic

AE1C40
41AF1D
1D41AF

Split-Comp.

AE1C40
1DAF41
1D8BAF

Tetradic

AE1C40
8BAF1D
1DAF8B
411DAF

Contrast Matrix WCAG 2.1 Contrast

AE1C40
B82761
A04A8B
8851B6
45454F
—
1.2
Fail
1.3
Fail
1.3
Fail
1.4
Fail
1.2
Fail
—
1.1
Fail
1.1
Fail
1.6
Fail
1.3
Fail
1.1
Fail
—
1.0
Fail
1.7
Fail
1.3
Fail
1.1
Fail
1.0
Fail
—
1.8
Fail
1.4
Fail
1.6
Fail
1.7
Fail
1.8
Fail
—
White BG
6.9AA
6.0AA
5.5AA
5.4AA
9.5AAA
Black BG
3.0AA Large
3.5AA Large
3.8AA Large
3.9AA Large
2.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

6F6D37
797853
7B7A7B
70709E
45454D

Deuteranopia

778235
828C50
808678
737798
45454C

Tritanopia

A7302F
B14845
9C6F6C
858A86
454B4A

Achromatopsia

4C4C4C
595959
6B6B6B
6D6D6D
464646

Shades & Tints Shades & Tints

#AE1C40

Dark
Light

#B82761

Dark
Light

#A04A8B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ae1c40;
  --color-2: #b82761;
  --color-3: #a04a8b;
  --color-4: #8851b6;
  --color-5: #45454f;
}

SCSS

$color-1: #ae1c40;
$color-2: #b82761;
$color-3: #a04a8b;
$color-4: #8851b6;
$color-5: #45454f;

TAILWIND

colors: {
  'brand-1': '#ae1c40',
  'brand-2': '#b82761',
  'brand-3': '#a04a8b',
  'brand-4': '#8851b6',
  'brand-5': '#45454f',
}

RGB Array

[174, 28, 64], [184, 39, 97], [160, 74, 139], [136, 81, 182], [69, 69, 79]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #AE1C40, #B82761, #A04A8B, #8851B6, #45454F 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: #ae1c40; --color-2: #b82761; --color-3: #a04a8b; --color-4: #8851b6; --color-5: #45454f. 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