← Back to Editor

#3A1E49 · #8F2265 · #7B5182 · #5C77A0 · #B9A8D4

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 LibraryData Visualization

Color Details Color Details

#3A1E49

Dark Plum · DarkSlateGray · Dark Purple

HEX
#3A1E49
RGB
rgb(58, 30, 73)
HSL
hsl(279, 42%, 20%)
HSB
hsb(279, 59%, 29%)
CMYK
cmyk(21%, 59%, 0%, 71%)
Oklch
oklch(29.4% 0.081 312.5)

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

#8F2265

Rose Purple · Purple · Camellia

HEX
#8F2265
RGB
rgb(143, 34, 101)
HSL
hsl(323, 62%, 35%)
HSB
hsb(323, 76%, 56%)
CMYK
cmyk(0%, 76%, 29%, 44%)
Oklch
oklch(45.1% 0.158 347.7)

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

#7B5182

Dark Plum · DimGray · Violet

HEX
#7B5182
RGB
rgb(123, 81, 130)
HSL
hsl(291, 23%, 41%)
HSB
hsb(291, 38%, 51%)
CMYK
cmyk(5%, 38%, 0%, 49%)
Oklch
oklch(50.0% 0.091 321.7)

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

#5C77A0

Indigo · SlateGray · Navy Blue

HEX
#5C77A0
RGB
rgb(92, 119, 160)
HSL
hsl(216, 27%, 49%)
HSB
hsb(216, 43%, 63%)
CMYK
cmyk(42%, 26%, 0%, 37%)
Oklch
oklch(56.5% 0.071 258.6)

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

#B9A8D4

Wisteria · LightSteelBlue · Lilac Purple

HEX
#B9A8D4
RGB
rgb(185, 168, 212)
HSL
hsl(263, 34%, 75%)
HSB
hsb(263, 21%, 83%)
CMYK
cmyk(13%, 21%, 0%, 17%)
Oklch
oklch(76.1% 0.065 302.5)

Traditional「Wisteria」· Paint「Lilac Purple」· Creative Lavender Dream

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3A1E49
2D481E

Analogous

241E48
3A1E49
481E42

Triadic

3A1E49
48391E
1E4839

Split-Comp.

3A1E49
42481E
1E4824

Tetradic

3A1E49
48241E
2D481E
1E4248

Contrast Matrix WCAG 2.1 Contrast

3A1E49
8F2265
7B5182
5C77A0
B9A8D4
—
1.8
Fail
2.3
Fail
3.1
AA Large
6.6
AA
1.8
Fail
—
1.3
Fail
1.8
Fail
3.7
AA Large
2.3
Fail
1.3
Fail
—
1.4
Fail
2.9
Fail
3.1
AA Large
1.8
Fail
1.4
Fail
—
2.1
Fail
6.6
AA
3.7
AA Large
2.9
Fail
2.1
Fail
—
White BG
14.4AAA
8.1AAA
6.3AA
4.6AA
2.2Fail
Black BG
1.5Fail
2.6Fail
3.3AA Large
4.6AA
9.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2E2E3F
605F55
696876
686896
B2B1C9

Deuteranopia

30323C
666E51
6B6E73
666494
B3B4C7

Tritanopia

393635
8A4845
796D6B
5D8E8D
B8C1BF

Achromatopsia

2B2B2B
4A4A4A
636363
747474
B2B2B2

Shades & Tints Shades & Tints

#3A1E49

Dark
Light

#8F2265

Dark
Light

#7B5182

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3a1e49;
  --color-2: #8f2265;
  --color-3: #7b5182;
  --color-4: #5c77a0;
  --color-5: #b9a8d4;
}

SCSS

$color-1: #3a1e49;
$color-2: #8f2265;
$color-3: #7b5182;
$color-4: #5c77a0;
$color-5: #b9a8d4;

TAILWIND

colors: {
  'brand-1': '#3a1e49',
  'brand-2': '#8f2265',
  'brand-3': '#7b5182',
  'brand-4': '#5c77a0',
  'brand-5': '#b9a8d4',
}

RGB Array

[58, 30, 73], [143, 34, 101], [123, 81, 130], [92, 119, 160], [185, 168, 212]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3A1E49, #8F2265, #7B5182, #5C77A0, #B9A8D4 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #3a1e49; --color-2: #8f2265; --color-3: #7b5182; --color-4: #5c77a0; --color-5: #b9a8d4. 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. 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 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