#CCCCFF
Blue family

Periwinkle

Also known as: calming · soft · serene · playful · whimsical
Save
Hex #CCCCFF
RGB rgb(204, 204, 255)
HSL hsl(240°, 100%, 90%)
CMYK 20 · 20 · 0 · 0

Meaning

In Western cultures, periwinkle symbolizes peace and calmness, often associated with relaxation and creativity. However, in some Asian traditions, the color can represent spiritual awakening and enlightenment, showcasing its multifaceted significance.

The term 'periwinkle' is derived from the Latin word 'pervinca', which referred to the plant known for its blue-violet flowers. The color gained popularity in the early 20th century, particularly in fashion and interior design, with notable use in the 1950s by artists embracing pastel tones.

calmingsoftsereneplayfulwhimsical

Similar colors

Ranked by CIE76 ΔE — the perceptual distance from Periwinkle. Lower ΔE means a closer match (below ~2 is barely distinguishable).

All 45 Blues →

Shades & tints

Nine steps of Periwinkle by lightness — from #6A6A85 (darkest) to #E4E4FF (lightest). Click any to copy.

-40% #6A6A85
-30% #8383A3
-20% #9B9BC2
-10% #B4B4E0
BASE #CCCCFF
+15% #D2D2FF
+30% #D8D8FF
+50% #DEDEFF
+70% #E4E4FF

Complementary

Sitting opposite Periwinkle at 60° on the color wheel, these give the highest-contrast pairings.

Palettes

Curated 5-color combinations featuring Periwinkle.

#CCCCFF
#FFCC99
#FFFFFF
#B2B2B2
#FFB3E6

Spring Awakening

Fresh Bloom
#CCCCFF
#1A1A2E
#EAEAEA
#B0C4DE
#FF6F61

Dreamy Night

Mysterious Calm
#CCCCFF
#FFB3BA
#F0E68C
#C8A2C8
#FFD700

Whimsical Garden

Joyful Playfulness

Periwinkle scale

A 50–900 tonal scale with Periwinkle anchored at 500 — ready to drop into a design system. Click any step to copy.

50 #FBFBFF
100 #F6F6FF
200 #ECECFF
300 #E1E1FF
400 #D7D7FF
500 #CCCCFF
600 #A7A7D1
700 #8787A8
800 #666680
900 #454557

Accessibility

Works well as text on dark backgrounds; fails on light.

Aa Best text color: #000000 · 13.65:1
Periwinkle as text on… Ratio AA AAA
Aa White background 1.54:1 Fail Fail
Aa Black background 13.65:1 Pass Pass

Thresholds: AA needs 4.5:1 (normal text) / 3:1 (large); AAA needs 7:1 / 4.5:1. Large = 18pt+ or 14pt+ bold.

How to use #CCCCFF

Copy-ready values for CSS, screen and print, plus the extra conversions designers reach for.

CSS color: #CCCCFF;
CSS color-mix (lighten 30%) color-mix(in srgb, #CCCCFF 70%, white)
HSV / HSB 240°, 20%, 100%
CMYK (print) 20, 20, 0, 0
Decimal 13421823
Nearest web-safe #CCCCFF

Color vision

How Periwinkle appears to viewers with the three main types of color blindness (~1 in 12 men, 1 in 200 women). Simulated approximations.

Normal vision

#CCCCFF

Protanopia (no red)

#CCCCF3

Deuteranopia (no green)

#CCCCF0

Tritanopia (no blue)

#CCE9E7
Powder Blue
15 / 45 Blues Oxford Blue
Copied!