← Back to Editor

#AA2141 · #662942 · #835371 · #A3678B · #A991A8

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#AA2141

Vermilion · Brown · Wine Red

HEX
#AA2141
RGB
rgb(170, 33, 65)
HSL
hsl(346, 67%, 40%)
HSB
hsb(346, 81%, 67%)
CMYK
cmyk(0%, 81%, 62%, 33%)
Oklch
oklch(48.6% 0.171 13.9)

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

#662942

Dark Violet · Brown · Camellia

HEX
#662942
RGB
rgb(102, 41, 66)
HSL
hsl(335, 43%, 28%)
HSB
hsb(335, 60%, 40%)
CMYK
cmyk(0%, 60%, 35%, 60%)
Oklch
oklch(37.6% 0.092 356.8)

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

#835371

Rose Purple · DimGray · Camellia

HEX
#835371
RGB
rgb(131, 83, 113)
HSL
hsl(323, 22%, 42%)
HSB
hsb(323, 37%, 51%)
CMYK
cmyk(0%, 37%, 14%, 49%)
Oklch
oklch(50.6% 0.076 342.1)

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

#A3678B

Rose Purple · Gray · Rose Pink

HEX
#A3678B
RGB
rgb(163, 103, 139)
HSL
hsl(324, 25%, 52%)
HSB
hsb(324, 37%, 64%)
CMYK
cmyk(0%, 37%, 15%, 36%)
Oklch
oklch(59.0% 0.090 343.5)

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

#A991A8

Mauve · DarkGray · Lilac Purple

HEX
#A991A8
RGB
rgb(169, 145, 168)
HSL
hsl(302, 12%, 62%)
HSB
hsb(302, 14%, 66%)
CMYK
cmyk(0%, 14%, 1%, 34%)
Oklch
oklch(68.6% 0.043 327.3)

Traditional「Mauve」· Paint「Lilac Purple」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AA2141
22AA8A

Analogous

AA2286
AA2141
AA4622

Triadic

AA2141
42AA22
2242AA

Split-Comp.

AA2141
22AA46
2286AA

Tetradic

AA2141
86AA22
22AA8A
4622AA

Contrast Matrix WCAG 2.1 Contrast

AA2141
662942
835371
A3678B
A991A8
—
1.5
Fail
1.1
Fail
1.6
Fail
2.4
Fail
1.5
Fail
—
1.8
Fail
2.5
Fail
3.7
AA Large
1.1
Fail
1.8
Fail
—
1.4
Fail
2.1
Fail
1.6
Fail
2.5
Fail
1.4
Fail
—
1.5
Fail
2.4
Fail
3.7
AA Large
2.1
Fail
1.5
Fail
—
White BG
7.0AA
10.7AAA
6.1AA
4.3AA Large
2.9Fail
Black BG
3.0AA Large
2.0Fail
3.4AA Large
4.9AA
7.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6F6D39
4C4B3C
6E6E6A
898882
9F9EA2

Deuteranopia

778137
4F543A
717568
8D9180
A0A2A1

Tritanopia

A33332
633736
816463
A07B7A
A89E9D

Achromatopsia

4E4E4E
3E3E3E
656565
7D7D7D
9B9B9B

Shades & Tints Shades & Tints

#AA2141

Dark
Light

#662942

Dark
Light

#835371

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #aa2141;
  --color-2: #662942;
  --color-3: #835371;
  --color-4: #a3678b;
  --color-5: #a991a8;
}

SCSS

$color-1: #aa2141;
$color-2: #662942;
$color-3: #835371;
$color-4: #a3678b;
$color-5: #a991a8;

TAILWIND

colors: {
  'brand-1': '#aa2141',
  'brand-2': '#662942',
  'brand-3': '#835371',
  'brand-4': '#a3678b',
  'brand-5': '#a991a8',
}

RGB Array

[170, 33, 65], [102, 41, 66], [131, 83, 113], [163, 103, 139], [169, 145, 168]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #AA2141, #662942, #835371, #A3678B, #A991A8 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: #aa2141; --color-2: #662942; --color-3: #835371; --color-4: #a3678b; --color-5: #a991a8. 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