← Back to Editor

#B582A1 · #5E6380 · #4D5066 · #020308 · #42A5B3

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

#B582A1

Mauve · DarkGray · Rose Pink

HEX
#B582A1
RGB
rgb(181, 130, 161)
HSL
hsl(324, 26%, 61%)
HSB
hsb(324, 28%, 71%)
CMYK
cmyk(0%, 28%, 11%, 29%)
Oklch
oklch(66.7% 0.075 342.2)

Traditional「Mauve」· Paint「Rose Pink」· Creative Rose Petal

#5E6380

Indigo · DimGray · Navy Blue

HEX
#5E6380
RGB
rgb(94, 99, 128)
HSL
hsl(231, 15%, 44%)
HSB
hsb(231, 27%, 50%)
CMYK
cmyk(27%, 23%, 0%, 50%)
Oklch
oklch(50.7% 0.046 277.0)

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

#4D5066

Indigo · DimGray · Prussian Blue

HEX
#4D5066
RGB
rgb(77, 80, 102)
HSL
hsl(233, 14%, 35%)
HSB
hsb(233, 25%, 40%)
CMYK
cmyk(25%, 22%, 0%, 60%)
Oklch
oklch(43.7% 0.036 278.7)

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

#020308

Indigo · Black · Deep Sea Blue

HEX
#020308
RGB
rgb(2, 3, 8)
HSL
hsl(230, 60%, 2%)
HSB
hsb(230, 75%, 3%)
CMYK
cmyk(75%, 63%, 0%, 97%)
Oklch
oklch(9.9% 0.018 269.9)

Traditional「Indigo」· Paint「Deep Sea Blue」· Creative Blush Sunrise

#42A5B3

Slate Blue · SteelBlue · Mint Ice

HEX
#42A5B3
RGB
rgb(66, 165, 179)
HSL
hsl(187, 46%, 48%)
HSB
hsb(187, 63%, 70%)
CMYK
cmyk(63%, 8%, 0%, 30%)
Oklch
oklch(67.0% 0.093 208.1)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B582A1
82B596

Analogous

B082B5
B582A1
B58287

Triadic

B582A1
A1B582
82A1B5

Split-Comp.

B582A1
87B582
82B5B0

Tetradic

B582A1
B5B082
82B596
8287B5

Contrast Matrix WCAG 2.1 Contrast

B582A1
5E6380
4D5066
020308
42A5B3
—
1.9
Fail
2.5
Fail
6.5
AA
1.1
Fail
1.9
Fail
—
1.3
Fail
3.5
AA Large
2.0
Fail
2.5
Fail
1.3
Fail
—
2.6
Fail
2.7
Fail
6.5
AA
3.5
AA Large
2.6
Fail
—
7.1
AAA
1.1
Fail
2.0
Fail
2.7
Fail
7.1
AAA
—
White BG
3.1AA Large
5.9AA
7.9AAA
20.6AAA
2.9Fail
Black BG
6.7AA
3.6AA Large
2.7Fail
1.0Fail
7.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9F9E99
606079
4E4E61
020207
6D6EB0

Deuteranopia

A2A698
606077
4E4E5F
020207
6760AF

Tritanopia

B29492
5E7372
4D5C5C
020606
47ADAC

Achromatopsia

959595
656565
525252
030303
898989

Shades & Tints Shades & Tints

#B582A1

Dark
Light

#5E6380

Dark
Light

#4D5066

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b582a1;
  --color-2: #5e6380;
  --color-3: #4d5066;
  --color-4: #020308;
  --color-5: #42a5b3;
}

SCSS

$color-1: #b582a1;
$color-2: #5e6380;
$color-3: #4d5066;
$color-4: #020308;
$color-5: #42a5b3;

TAILWIND

colors: {
  'brand-1': '#b582a1',
  'brand-2': '#5e6380',
  'brand-3': '#4d5066',
  'brand-4': '#020308',
  'brand-5': '#42a5b3',
}

RGB Array

[181, 130, 161], [94, 99, 128], [77, 80, 102], [2, 3, 8], [66, 165, 179]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B582A1, #5E6380, #4D5066, #020308, #42A5B3 is ideal for: tech websites, dark mode UIs, game UIs, 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: #b582a1; --color-2: #5e6380; --color-3: #4d5066; --color-4: #020308; --color-5: #42a5b3. 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 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