#A86CC6 + #9B4EB6 + #634386 + #579ACE + #2CD1E4 · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#A86CC6

Dark Plum · MediumOrchid · Violet

HEX

#A86CC6

RGB

rgb(168, 108, 198)

HSL

hsl(280, 44%, 60%)

HSB

hsb(280, 45%, 78%)

CMYK

cmyk(15%, 45%, 0%, 22%)

Oklch

oklch(63.0% 0.144 313.6)

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

#9B4EB6

Dark Plum · DarkOrchid · Violet

HEX

#9B4EB6

RGB

rgb(155, 78, 182)

HSL

hsl(284, 42%, 51%)

HSB

hsb(284, 57%, 71%)

CMYK

cmyk(15%, 57%, 0%, 29%)

Oklch

oklch(56.1% 0.170 316.5)

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

#634386

Deep Indigo · DarkSlateBlue · Eggplant

HEX

#634386

RGB

rgb(99, 67, 134)

HSL

hsl(269, 33%, 39%)

HSB

hsb(269, 50%, 53%)

CMYK

cmyk(26%, 50%, 0%, 47%)

Oklch

oklch(44.9% 0.110 304.4)

Traditional「Deep Indigo」· Paint「Eggplant」· Creative Blush Sunrise

#579ACE

Lake Blue · CornflowerBlue · Navy Blue

HEX

#579ACE

RGB

rgb(87, 154, 206)

HSL

hsl(206, 55%, 57%)

HSB

hsb(206, 58%, 81%)

CMYK

cmyk(58%, 25%, 0%, 19%)

Oklch

oklch(66.3% 0.104 243.7)

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

#2CD1E4

Lake Blue · Turquoise · Lake Green

HEX

#2CD1E4

RGB

rgb(44, 209, 228)

HSL

hsl(186, 77%, 53%)

HSB

hsb(186, 81%, 89%)

CMYK

cmyk(81%, 8%, 0%, 11%)

Oklch

oklch(79.0% 0.128 207.1)

Traditional「Lake Blue」· Paint「Lake Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A86CC6

8AC66C

Analogous

7B6CC6

A86CC6

C66CB7

Triadic

A86CC6

C6A86C

6CC6A8

Split-Comp.

A86CC6

B7C66C

6CC67B

Tetradic

A86CC6

C67B6C

8AC66C

6CB7C6

Contrast Matrix WCAG 2.1 Contrast

A86CC6	9B4EB6	634386	579ACE	2CD1E4
—	1.4 Fail	2.1 Fail	1.2 Fail	2.0 Fail
1.4 Fail	—	1.6 Fail	1.7 Fail	2.7 Fail
2.1 Fail	1.6 Fail	—	2.6 Fail	4.2 AA Large
1.2 Fail	1.7 Fail	2.6 Fail	—	1.6 Fail
2.0 Fail	2.7 Fail	4.2 AA Large	1.6 Fail	—

White BG

3.7AA Large

5.0AA

7.8AAA

3.0AA Large

1.9Fail

Black BG

5.6AA

4.2AA Large

2.7Fail

6.9AA

11.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8E8DB0

7A799D

555576

7475C1

7375DF

Deuteranopia

9296AB

7E8497

575972

706BBE

6A5EDE

Tritanopia

A59F9B

978985

616966

5AB7B5

34DCDB

Achromatopsia

888888

717171

545454

8C8C8C

A2A2A2

Shades & Tints Shades & Tints

#A86CC6

Dark

Light

#9B4EB6

Dark

Light

#634386

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a86cc6;
  --color-2: #9b4eb6;
  --color-3: #634386;
  --color-4: #579ace;
  --color-5: #2cd1e4;
}

SCSS

$color-1: #a86cc6;
$color-2: #9b4eb6;
$color-3: #634386;
$color-4: #579ace;
$color-5: #2cd1e4;

TAILWIND

colors: {
  'brand-1': '#a86cc6',
  'brand-2': '#9b4eb6',
  'brand-3': '#634386',
  'brand-4': '#579ace',
  'brand-5': '#2cd1e4',
}

RGB Array

[168, 108, 198], [155, 78, 182], [99, 67, 134], [87, 154, 206], [44, 209, 228]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #A86CC6, #9B4EB6, #634386, #579ACE, #2CD1E4 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: #a86cc6; --color-2: #9b4eb6; --color-3: #634386; --color-4: #579ace; --color-5: #2cd1e4. 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