#88B6F7 + #9397EA + #9983D0 + #A56AB1 + #A6518D · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#88B6F7

Azure · LightSkyBlue · Cobalt Blue

HEX

#88B6F7

RGB

rgb(136, 182, 247)

HSL

hsl(215, 87%, 75%)

HSB

hsb(215, 45%, 97%)

CMYK

cmyk(45%, 26%, 0%, 3%)

Oklch

oklch(76.9% 0.106 257.1)

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

#9397EA

Azure · CornflowerBlue · Cobalt Blue

HEX

#9397EA

RGB

rgb(147, 151, 234)

HSL

hsl(237, 67%, 75%)

HSB

hsb(237, 37%, 92%)

CMYK

cmyk(37%, 35%, 0%, 8%)

Oklch

oklch(70.7% 0.121 280.7)

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

#9983D0

Wisteria · MediumSlateBlue · Cobalt Blue

HEX

#9983D0

RGB

rgb(153, 131, 208)

HSL

hsl(257, 45%, 66%)

HSB

hsb(257, 37%, 82%)

CMYK

cmyk(26%, 37%, 0%, 18%)

Oklch

oklch(66.1% 0.114 296.3)

Traditional「Wisteria」· Paint「Cobalt Blue」· Creative Lavender Dream

#A56AB1

Dark Plum · MediumOrchid · Violet

HEX

#A56AB1

RGB

rgb(165, 106, 177)

HSL

hsl(290, 31%, 55%)

HSB

hsb(290, 40%, 69%)

CMYK

cmyk(7%, 40%, 0%, 31%)

Oklch

oklch(61.3% 0.123 320.7)

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

#A6518D

Rose Purple · Gray · Violet

HEX

#A6518D

RGB

rgb(166, 81, 141)

HSL

hsl(318, 34%, 48%)

HSB

hsb(318, 51%, 65%)

CMYK

cmyk(0%, 51%, 15%, 35%)

Oklch

oklch(55.9% 0.134 339.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

88B6F7

F7C888

Analogous

88EDF7

88B6F7

9188F7

Triadic

88B6F7

F788B6

B6F788

Split-Comp.

88B6F7

F79188

EDF788

Tetradic

88B6F7

F788ED

F7C888

88F791

Contrast Matrix WCAG 2.1 Contrast

88B6F7	9397EA	9983D0	A56AB1	A6518D
—	1.3 Fail	1.5 Fail	1.9 Fail	2.4 Fail
1.3 Fail	—	1.2 Fail	1.5 Fail	1.9 Fail
1.5 Fail	1.2 Fail	—	1.2 Fail	1.6 Fail
1.9 Fail	1.5 Fail	1.2 Fail	—	1.3 Fail
2.4 Fail	1.9 Fail	1.6 Fail	1.3 Fail	—

White BG

2.1Fail

2.7Fail

3.2AA Large

4.0AA Large

5.0AA

Black BG

10.1AAA

7.9AAA

6.5AA

5.3AA

4.2AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

9C9CE7

9595D6

8F8FBD

8B8BA0

81807E

Deuteranopia

9996E3

9594D1

9192B9

8F939C

868D7B

Tritanopia

8ADBD8

93C6C3

98AFAB

A2928F

A27371

Achromatopsia

B0B0B0

9F9F9F

929292

848484

717171

Shades & Tints Shades & Tints

#88B6F7

Dark

Light

#9397EA

Dark

Light

#9983D0

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #88b6f7;
  --color-2: #9397ea;
  --color-3: #9983d0;
  --color-4: #a56ab1;
  --color-5: #a6518d;
}

SCSS

$color-1: #88b6f7;
$color-2: #9397ea;
$color-3: #9983d0;
$color-4: #a56ab1;
$color-5: #a6518d;

TAILWIND

colors: {
  'brand-1': '#88b6f7',
  'brand-2': '#9397ea',
  'brand-3': '#9983d0',
  'brand-4': '#a56ab1',
  'brand-5': '#a6518d',
}

RGB Array

[136, 182, 247], [147, 151, 234], [153, 131, 208], [165, 106, 177], [166, 81, 141]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #88B6F7, #9397EA, #9983D0, #A56AB1, #A6518D 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: #88b6f7; --color-2: #9397ea; --color-3: #9983d0; --color-4: #a56ab1; --color-5: #a6518d. 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