← Back to Editor

#CCCCCC · #B3CED0 · #9CB6CA · #A096BD · #AB6AA7

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#CCCCCC

Silver Gray · LightGray · Pearl Gray

HEX
#CCCCCC
RGB
rgb(204, 204, 204)
HSL
hsl(0, 0%, 80%)
HSB
hsb(0, 0%, 80%)
CMYK
cmyk(0%, 0%, 0%, 20%)
Oklch
oklch(84.5% 0.000 89.9)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

#B3CED0

Sky Blue · LightSteelBlue · Glacier Blue

HEX
#B3CED0
RGB
rgb(179, 206, 208)
HSL
hsl(184, 24%, 76%)
HSB
hsb(184, 14%, 82%)
CMYK
cmyk(14%, 1%, 0%, 18%)
Oklch
oklch(83.2% 0.029 202.1)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

#9CB6CA

Sky Blue · LightSteelBlue · Cobalt Blue

HEX
#9CB6CA
RGB
rgb(156, 182, 202)
HSL
hsl(206, 30%, 70%)
HSB
hsb(206, 23%, 79%)
CMYK
cmyk(23%, 10%, 0%, 21%)
Oklch
oklch(76.3% 0.041 241.2)

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

#A096BD

Wisteria · DarkGray · Cobalt Blue

HEX
#A096BD
RGB
rgb(160, 150, 189)
HSL
hsl(255, 23%, 66%)
HSB
hsb(255, 21%, 74%)
CMYK
cmyk(15%, 21%, 0%, 26%)
Oklch
oklch(69.5% 0.057 296.6)

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

#AB6AA7

Rose Purple · MediumOrchid · Violet

HEX
#AB6AA7
RGB
rgb(171, 106, 167)
HSL
hsl(304, 28%, 54%)
HSB
hsb(304, 38%, 67%)
CMYK
cmyk(0%, 38%, 2%, 33%)
Oklch
oklch(61.6% 0.116 329.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CCCCCC
CCCCCC

Analogous

CCCCCC
CCCCCC
CCCCCC

Triadic

CCCCCC
CCCCCC
CCCCCC

Split-Comp.

CCCCCC
CCCCCC
CCCCCC

Tetradic

CCCCCC
CCCCCC
CCCCCC
CCCCCC

Contrast Matrix WCAG 2.1 Contrast

CCCCCC
B3CED0
9CB6CA
A096BD
AB6AA7
—
1.0
Fail
1.3
Fail
1.7
Fail
2.4
Fail
1.0
Fail
—
1.3
Fail
1.7
Fail
2.4
Fail
1.3
Fail
1.3
Fail
—
1.3
Fail
1.9
Fail
1.7
Fail
1.7
Fail
1.3
Fail
—
1.4
Fail
2.4
Fail
2.4
Fail
1.9
Fail
1.4
Fail
—
White BG
1.6Fail
1.7Fail
2.1Fail
2.8Fail
3.9AA Large
Black BG
13.1AAA
12.7AAA
10.0AAA
7.6AAA
5.4AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CCCCCC
BFBFD0
A7A7C5
9C9CB4
8F8E98

Deuteranopia

CCCCCC
BDBBCF
A6A4C4
9C9DB1
939895

Tritanopia

CCCCCC
B4CFCF
9DC1C1
A0ACAA
A88D8A

Achromatopsia

CCCCCC
C6C6C6
B1B1B1
9D9D9D
848484

Shades & Tints Shades & Tints

#CCCCCC

Dark
Light

#B3CED0

Dark
Light

#9CB6CA

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cccccc;
  --color-2: #b3ced0;
  --color-3: #9cb6ca;
  --color-4: #a096bd;
  --color-5: #ab6aa7;
}

SCSS

$color-1: #cccccc;
$color-2: #b3ced0;
$color-3: #9cb6ca;
$color-4: #a096bd;
$color-5: #ab6aa7;

TAILWIND

colors: {
  'brand-1': '#cccccc',
  'brand-2': '#b3ced0',
  'brand-3': '#9cb6ca',
  'brand-4': '#a096bd',
  'brand-5': '#ab6aa7',
}

RGB Array

[204, 204, 204], [179, 206, 208], [156, 182, 202], [160, 150, 189], [171, 106, 167]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CCCCCC, #B3CED0, #9CB6CA, #A096BD, #AB6AA7 is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #cccccc; --color-2: #b3ced0; --color-3: #9cb6ca; --color-4: #a096bd; --color-5: #ab6aa7. 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 general-style 5-color scheme is especially suited for beauty, lifestyle, arts industries. Restrained colors convey professionalism and trust. 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