#B486AB + #5B1F55 + #7071A7 + #6D8FB4 + #7CA2C9 · space - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#B486AB

Mauve · DarkGray · Lilac Purple

HEX

#B486AB

RGB

rgb(180, 134, 171)

HSL

hsl(312, 23%, 62%)

HSB

hsb(312, 26%, 71%)

CMYK

cmyk(0%, 26%, 5%, 29%)

Oklch

oklch(67.6% 0.075 333.4)

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

#5B1F55

Rose Purple · DarkSlateBlue · Eggplant

HEX

#5B1F55

RGB

rgb(91, 31, 85)

HSL

hsl(306, 49%, 24%)

HSB

hsb(306, 66%, 36%)

CMYK

cmyk(0%, 66%, 7%, 64%)

Oklch

oklch(35.3% 0.113 331.8)

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

#7071A7

Azure · SlateGray · Navy Blue

HEX

#7071A7

RGB

rgb(112, 113, 167)

HSL

hsl(239, 24%, 55%)

HSB

hsb(239, 33%, 65%)

CMYK

cmyk(33%, 32%, 0%, 35%)

Oklch

oklch(57.0% 0.083 282.6)

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

#6D8FB4

Azure · CadetBlue · Navy Blue

HEX

#6D8FB4

RGB

rgb(109, 143, 180)

HSL

hsl(211, 32%, 57%)

HSB

hsb(211, 39%, 71%)

CMYK

cmyk(39%, 21%, 0%, 29%)

Oklch

oklch(63.9% 0.068 251.0)

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

#7CA2C9

Azure · CornflowerBlue · Cobalt Blue

HEX

#7CA2C9

RGB

rgb(124, 162, 201)

HSL

hsl(210, 42%, 64%)

HSB

hsb(210, 38%, 79%)

CMYK

cmyk(38%, 19%, 0%, 21%)

Oklch

oklch(69.9% 0.071 249.5)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B486AB

88B491

Analogous

A788B4

B486AB

B48895

Triadic

B486AB

ABB488

88ABB4

Split-Comp.

B486AB

95B488

88B4A7

Tetradic

B486AB

B4A788

88B491

8895B4

Contrast Matrix WCAG 2.1 Contrast

B486AB	5B1F55	7071A7	6D8FB4	7CA2C9
—	3.9 AA Large	1.5 Fail	1.1 Fail	1.1 Fail
3.9 AA Large	—	2.6 Fail	3.5 AA Large	4.4 AA Large
1.5 Fail	2.6 Fail	—	1.4 Fail	1.7 Fail
1.1 Fail	3.5 AA Large	1.4 Fail	—	1.3 Fail
1.1 Fail	4.4 AA Large	1.7 Fail	1.3 Fail	—

White BG

3.0AA Large

11.9AAA

4.6AA

3.4AA Large

2.7Fail

Black BG

6.9AA

1.8Fail

4.6AA

6.2AA

7.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A0A0A2

414048

70709A

7C7CAB

8C8DC0

Deuteranopia

A3A6A0

454945

707097

7A77A9

8A87BD

Tritanopia

B29B99

583E3B

70908D

6FA4A2

7EB8B6

Achromatopsia

989898

373737

777777

898989

9B9B9B

Shades & Tints Shades & Tints

#B486AB

Dark

Light

#5B1F55

Dark

Light

#7071A7

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b486ab;
  --color-2: #5b1f55;
  --color-3: #7071a7;
  --color-4: #6d8fb4;
  --color-5: #7ca2c9;
}

SCSS

$color-1: #b486ab;
$color-2: #5b1f55;
$color-3: #7071a7;
$color-4: #6d8fb4;
$color-5: #7ca2c9;

TAILWIND

colors: {
  'brand-1': '#b486ab',
  'brand-2': '#5b1f55',
  'brand-3': '#7071a7',
  'brand-4': '#6d8fb4',
  'brand-5': '#7ca2c9',
}

RGB Array

[180, 134, 171], [91, 31, 85], [112, 113, 167], [109, 143, 180], [124, 162, 201]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This space-style palette of #B486AB, #5B1F55, #7071A7, #6D8FB4, #7CA2C9 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: #b486ab; --color-2: #5b1f55; --color-3: #7071a7; --color-4: #6d8fb4; --color-5: #7ca2c9. 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 space-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