#BB85D6 + #BC56CC + #A734AD + #8F0096 + #59494E · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#BB85D6

Lilac · Orchid · Lilac Purple

HEX

#BB85D6

RGB

rgb(187, 133, 214)

HSL

hsl(280, 50%, 68%)

HSB

hsb(280, 38%, 84%)

CMYK

cmyk(13%, 38%, 0%, 16%)

Oklch

oklch(70.0% 0.128 313.9)

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

#BC56CC

Royal Purple · MediumOrchid · Violet

HEX

#BC56CC

RGB

rgb(188, 86, 204)

HSL

hsl(292, 54%, 57%)

HSB

hsb(292, 58%, 80%)

CMYK

cmyk(8%, 58%, 0%, 20%)

Oklch

oklch(62.5% 0.195 322.0)

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

#A734AD

Royal Purple · DarkOrchid · Violet

HEX

#A734AD

RGB

rgb(167, 52, 173)

HSL

hsl(297, 54%, 44%)

HSB

hsb(297, 70%, 68%)

CMYK

cmyk(3%, 70%, 0%, 32%)

Oklch

oklch(54.2% 0.204 325.8)

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

#8F0096

Royal Purple · DarkMagenta · Eggplant

HEX

#8F0096

RGB

rgb(143, 0, 150)

HSL

hsl(297, 100%, 29%)

HSB

hsb(297, 100%, 59%)

CMYK

cmyk(5%, 100%, 0%, 41%)

Oklch

oklch(46.1% 0.215 325.9)

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

#59494E

Dark Violet · DarkSlateGray · Camellia

HEX

#59494E

RGB

rgb(89, 73, 78)

HSL

hsl(341, 10%, 32%)

HSB

hsb(341, 18%, 35%)

CMYK

cmyk(0%, 18%, 12%, 65%)

Oklch

oklch(42.4% 0.023 357.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BB85D6

A0D685

Analogous

9285D6

BB85D6

D685C9

Triadic

BB85D6

D6BB85

85D6BB

Split-Comp.

BB85D6

C9D685

85D692

Tetradic

BB85D6

D69285

A0D685

85C9D6

Contrast Matrix WCAG 2.1 Contrast

BB85D6	BC56CC	A734AD	8F0096	59494E
—	1.4 Fail	2.0 Fail	2.9 Fail	3.0 Fail
1.4 Fail	—	1.4 Fail	2.0 Fail	2.1 Fail
2.0 Fail	1.4 Fail	—	1.4 Fail	1.5 Fail
2.9 Fail	2.0 Fail	1.4 Fail	—	1.0 Fail
3.0 Fail	2.1 Fail	1.5 Fail	1.0 Fail	—

White BG

2.8Fail

3.9AA Large

5.6AA

8.1AAA

8.4AAA

Black BG

7.4AAA

5.3AA

3.7AA Large

2.6Fail

2.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

A4A3C2

908FAF

757490

515072

52524D

Deuteranopia

A7ABBE

969DA9

7C8589

596469

53544D

Tritanopia

B8B3B0

B79994

A17974

88554F

584C4C

Achromatopsia

9E9E9E

828282

646464

3C3C3C

4E4E4E

Shades & Tints Shades & Tints

#BB85D6

Dark

Light

#BC56CC

Dark

Light

#A734AD

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bb85d6;
  --color-2: #bc56cc;
  --color-3: #a734ad;
  --color-4: #8f0096;
  --color-5: #59494e;
}

SCSS

$color-1: #bb85d6;
$color-2: #bc56cc;
$color-3: #a734ad;
$color-4: #8f0096;
$color-5: #59494e;

TAILWIND

colors: {
  'brand-1': '#bb85d6',
  'brand-2': '#bc56cc',
  'brand-3': '#a734ad',
  'brand-4': '#8f0096',
  'brand-5': '#59494e',
}

RGB Array

[187, 133, 214], [188, 86, 204], [167, 52, 173], [143, 0, 150], [89, 73, 78]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #BB85D6, #BC56CC, #A734AD, #8F0096, #59494E 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: #bb85d6; --color-2: #bc56cc; --color-3: #a734ad; --color-4: #8f0096; --color-5: #59494e. 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 cool-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