#99CCFF + #A6BFF2 + #B3B3E6 + #BFA6D9 + #CC99CC · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#99CCFF

Azure · LightSkyBlue · Cobalt Blue

HEX

#99CCFF

RGB

rgb(153, 204, 255)

HSL

hsl(210, 100%, 80%)

HSB

hsb(210, 40%, 100%)

CMYK

cmyk(40%, 20%, 0%, 0%)

Oklch

oklch(82.8% 0.090 249.0)

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

#A6BFF2

Azure · LightSteelBlue · Cobalt Blue

HEX

#A6BFF2

RGB

rgb(166, 191, 242)

HSL

hsl(220, 75%, 80%)

HSB

hsb(220, 31%, 95%)

CMYK

cmyk(31%, 21%, 0%, 5%)

Oklch

oklch(80.4% 0.078 264.3)

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

#B3B3E6

Wisteria · LightSteelBlue · Cobalt Blue

HEX

#B3B3E6

RGB

rgb(179, 179, 230)

HSL

hsl(240, 50%, 80%)

HSB

hsb(240, 22%, 90%)

CMYK

cmyk(22%, 22%, 0%, 10%)

Oklch

oklch(78.4% 0.072 284.6)

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

#BFA6D9

Wisteria · LightSteelBlue · Lilac Purple

HEX

#BFA6D9

RGB

rgb(191, 166, 217)

HSL

hsl(269, 40%, 75%)

HSB

hsb(269, 24%, 85%)

CMYK

cmyk(12%, 24%, 0%, 15%)

Oklch

oklch(76.4% 0.076 306.9)

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

#CC99CC

Mauve · Silver · Lilac Purple

HEX

#CC99CC

RGB

rgb(204, 153, 204)

HSL

hsl(300, 33%, 70%)

HSB

hsb(300, 25%, 80%)

CMYK

cmyk(0%, 25%, 0%, 20%)

Oklch

oklch(74.7% 0.091 326.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

99CCFF

FFCC99

Analogous

99FFFF

99CCFF

9999FF

Triadic

99CCFF

FF99CC

CCFF99

Split-Comp.

99CCFF

FF9999

FFFF99

Tetradic

99CCFF

FF99FF

FFCC99

99FF99

Contrast Matrix WCAG 2.1 Contrast

99CCFF	A6BFF2	B3B3E6	BFA6D9	CC99CC
—	1.1 Fail	1.2 Fail	1.3 Fail	1.4 Fail
1.1 Fail	—	1.1 Fail	1.2 Fail	1.3 Fail
1.2 Fail	1.1 Fail	—	1.1 Fail	1.2 Fail
1.3 Fail	1.2 Fail	1.1 Fail	—	1.1 Fail
1.4 Fail	1.3 Fail	1.2 Fail	1.1 Fail	—

White BG

1.7Fail

1.8Fail

2.0Fail

2.2Fail

2.3Fail

Black BG

12.4AAA

11.4AAA

10.5AAA

9.7AAA

9.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

AFB0F3

B1B1E6

B3B3DA

B4B4CD

B6B5C0

Deuteranopia

ACA8F0

AFAEE3

B3B3D7

B6B8CA

B9BDBD

Tritanopia

9CE9E7

A7DCDA

B3D0CE

BEC3C1

C9B6B4

Achromatopsia

C3C3C3

BDBDBD

B9B9B9

B3B3B3

AEAEAE

Shades & Tints Shades & Tints

#99CCFF

Dark

Light

#A6BFF2

Dark

Light

#B3B3E6

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #99ccff;
  --color-2: #a6bff2;
  --color-3: #b3b3e6;
  --color-4: #bfa6d9;
  --color-5: #cc99cc;
}

SCSS

$color-1: #99ccff;
$color-2: #a6bff2;
$color-3: #b3b3e6;
$color-4: #bfa6d9;
$color-5: #cc99cc;

TAILWIND

colors: {
  'brand-1': '#99ccff',
  'brand-2': '#a6bff2',
  'brand-3': '#b3b3e6',
  'brand-4': '#bfa6d9',
  'brand-5': '#cc99cc',
}

RGB Array

[153, 204, 255], [166, 191, 242], [179, 179, 230], [191, 166, 217], [204, 153, 204]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #99CCFF, #A6BFF2, #B3B3E6, #BFA6D9, #CC99CC is ideal for: health products, baby brands, fresh-style blogs. 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: #99ccff; --color-2: #a6bff2; --color-3: #b3b3e6; --color-4: #bfa6d9; --color-5: #cc99cc. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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