Periwinkle is a very light, vivid shade in the blue color family, with a cool feel. Its HEX code is #CCCCFF, which equals rgb(204, 204, 255) in RGB and hsl(240, 100%, 90%) in HSL. In print terms it converts to roughly C20 M20 Y0 K0, although exact CMYK results depend on the paper and color profile.
- HEX
#CCCCFF - RGB
204, 204, 255 - HSL
240°, 100%, 90% - CMYK
20, 20, 0, 0 - Family
Blue - Tone
Very light, vivid
About Periwinkle
Blue shades feel trustworthy, calm and professional. This family includes cyans, teals, skies and navies, and it is the most common choice for technology, finance and healthcare brands. Try it as a primary brand color, a section background, or a highlight against neutral layouts. Text in black is the most readable choice on this color, with a contrast ratio of 13.65:1. Its complementary color is #FFFFCC.
Download Periwinkle as an image
Choose a size and format, then download a solid-color image — or tick colors in the library to batch-download a ZIP.
Loading colors…
Loading gradients…
Periwinkle color codes
| HEX | #CCCCFF |
|---|---|
| RGB | rgb(204, 204, 255) |
| HSL | hsl(240, 100%, 90%) |
| HSV | 240°, 20%, 100% |
| CMYK | 20%, 20%, 0%, 0% |
| Decimal | 13421823 |
Shades and tints of Periwinkle
Lighter tints are mixed with white and darker shades are mixed with black.
- 50
#F7F7FF - 100
#EEEEFF - 200
#E6E6FF - 300
#DDDDFF - 400
#D5D5FF - 500
#CCCCFF - 600
#AAAAD5 - 700
#8888AA - 800
#666680 - 900
#444455 - 950
#22222B
Color harmonies for Periwinkle
- Complementary
#FFFFCC≈ Cream - Analogous −30°
#CCE6FF≈ Palest Cerulean - Analogous +30°
#E6CCFF≈ Palest Violet - Triadic +120°
#FFCCCC≈ Palest Cardinal - Triadic +240°
#CCFFCC≈ Palest Kelly - Split 150°
#FFE6CC≈ Palest Tangerine - Split 210°
#E6FFCC≈ Palest Spring Bud
Contrast and accessibility of Periwinkle
| Text color | Sample | Contrast ratio | WCAG |
|---|---|---|---|
| White text on Periwinkle | Aa | 1.54:1 | Fails |
| Black text on Periwinkle | Aa | 13.65:1 | AAA (excellent) |
CSS code for Periwinkle
background-color: #CCCCFF;color: #CCCCFF;background-color: rgb(204, 204, 255);background-color: hsl(240, 100%, 90%);:root { --color-periwinkle: #CCCCFF; }class="bg-[#CCCCFF]"Colors similar to Periwinkle
- Palest Ultramarine
#D1CCFF - Palest Royal
#CCD1FF - Palest Bright Blue
#D1D1FA - Palest Indigo
#D6CCFF - Palest Bright Ultramarine
#D5D1FA - Palest Cobalt
#CCD6FF - Palest Bright Royal
#D1D5FA - Palest Bright Indigo
#D9D1FA - Palest Iris
#DBCCFF - Palest Bright Cobalt
#D1D9FA - Palest Soft Blue
#D6D6F5 - Palest Sapphire
#CCDBFF
More blue shades
- Powder Blue
#B0E0E6 - Slate Blue
#6A5ACD - Steel Blue
#4682B4 - Turquoise
#40E0D0 - Cerulean
#007BA7 - Sapphire
#0F52BA - Cobalt Blue
#0047AB - Ultramarine
#3F00FF - Iris
#5A4FCF - Denim
#1560BD - Azure Blue
#007FFF
Frequently asked questions
What is the HEX code for Periwinkle?
The HEX code for Periwinkle is #CCCCFF.
What is the RGB value of Periwinkle?
Periwinkle has an RGB value of 204, 204, 255 (rgb(204, 204, 255)). In HSL it is 240°, 100%, 90%.
What text color should I use on Periwinkle?
Use black text on Periwinkle. White text has a contrast ratio of 1.54:1 and black text has 13.65:1; WCAG AA requires at least 4.5:1 for normal text.
What color goes well with Periwinkle?
The complementary color of Periwinkle is #FFFFCC. Analogous colors #CCE6FF and #E6CCFF also pair well.