← Back to Editor

#CCCCCC · #BFCCCC · #B3CCCC · #A6CCCC · #99CCCC

spring

A 5-color spring 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)

TraditionalSilver Gray」· PaintPearl Gray」· Creative Silver Lining

#BFCCCC

Sky Blue · Silver · Glacier Blue

HEX
#BFCCCC
RGB
rgb(191, 204, 204)
HSL
hsl(180, 11%, 77%)
HSB
hsb(180, 6%, 80%)
CMYK
cmyk(6%, 0%, 0%, 20%)
Oklch
oklch(83.5% 0.014 196.9)

TraditionalSky Blue」· PaintGlacier Blue」· Creative Arctic Pool

#B3CCCC

Sky Blue · LightSteelBlue · Lake Green

HEX
#B3CCCC
RGB
rgb(179, 204, 204)
HSL
hsl(180, 20%, 75%)
HSB
hsb(180, 12%, 80%)
CMYK
cmyk(12%, 0%, 0%, 20%)
Oklch
oklch(82.7% 0.027 196.6)

TraditionalSky Blue」· PaintLake Green」· Creative Arctic Pool

#A6CCCC

Sky Blue · LightSteelBlue · Lake Green

HEX
#A6CCCC
RGB
rgb(166, 204, 204)
HSL
hsl(180, 27%, 73%)
HSB
hsb(180, 19%, 80%)
CMYK
cmyk(19%, 0%, 0%, 20%)
Oklch
oklch(81.8% 0.040 196.4)

TraditionalSky Blue」· PaintLake Green」· Creative Arctic Pool

#99CCCC

Sky Blue · LightSteelBlue · Lake Green

HEX
#99CCCC
RGB
rgb(153, 204, 204)
HSL
hsl(180, 33%, 70%)
HSB
hsb(180, 25%, 80%)
CMYK
cmyk(25%, 0%, 0%, 20%)
Oklch
oklch(81.0% 0.053 196.2)

TraditionalSky Blue」· PaintLake Green」· Creative Arctic Pool

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
BFCCCC
B3CCCC
A6CCCC
99CCCC
1.0
Fail
1.1
Fail
1.1
Fail
1.1
Fail
1.0
Fail
1.0
Fail
1.0
Fail
1.1
Fail
1.1
Fail
1.0
Fail
1.0
Fail
1.0
Fail
1.1
Fail
1.0
Fail
1.0
Fail
1.0
Fail
1.1
Fail
1.1
Fail
1.0
Fail
1.0
Fail
White BG
1.6Fail
1.7Fail
1.7Fail
1.7Fail
1.8Fail
Black BG
13.1AAA
12.7AAA
12.4AAA
12.1AAA
11.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CCCCCC
C5C5CC
BEBECC
B6B7CC
AFB0CC

Deuteranopia

CCCCCC
C4C3CC
BCBBCC
B4B1CC
ACA8CC

Tritanopia

CCCCCC
C0CCCC
B4CCCC
A8CCCC
9CCCCC

Achromatopsia

CCCCCC
C8C8C8
C5C5C5
C1C1C1
BDBDBD

Shades & Tints Shades & Tints

#CCCCCC

Dark
Light

#BFCCCC

Dark
Light

#B3CCCC

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cccccc;
  --color-2: #bfcccc;
  --color-3: #b3cccc;
  --color-4: #a6cccc;
  --color-5: #99cccc;
}

SCSS

$color-1: #cccccc;
$color-2: #bfcccc;
$color-3: #b3cccc;
$color-4: #a6cccc;
$color-5: #99cccc;

TAILWIND

colors: {
  'brand-1': '#cccccc',
  'brand-2': '#bfcccc',
  'brand-3': '#b3cccc',
  'brand-4': '#a6cccc',
  'brand-5': '#99cccc',
}

RGB Array

[204, 204, 204], [191, 204, 204], [179, 204, 204], [166, 204, 204], [153, 204, 204]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This spring-style palette of #CCCCCC, #BFCCCC, #B3CCCC, #A6CCCC, #99CCCC 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: #bfcccc; --color-3: #b3cccc; --color-4: #a6cccc; --color-5: #99cccc. 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 spring-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