Periwinkle hex code
The hex code for periwinkle is #CCCCFF. In RGB that is rgb(204, 204, 255) and in HSL it is hsl(240, 100%, 90%).
The hex code for periwinkle is #CCCCFF. In RGB that is rgb(204, 204, 255) and in HSL it is hsl(240, 100%, 90%).
Periwinkle · #CCCCFF
Colour codes
- HEX
- #CCCCFF
- RGB
- rgb(204, 204, 255)
- HSL
- hsl(240, 100%, 90%)
- CMYK
- 20, 20, 0, 0
- Contrast on white
- 1.54:1
- Contrast on black
- 13.65:1
Tints and shades
20% lighter · #d6d6ff
40% lighter · #e0e0ff
60% lighter · #ebebff
80% lighter · #f5f5ff
20% darker · #a3a3cc
40% darker · #7a7a99
60% darker · #525266
80% darker · #292933
Complementary colour
Periwinkle · #CCCCFF
Opposite on the colour wheel · #ffffcc
Frequently asked questions
What is the hex code for periwinkle?
The hex code for periwinkle is #CCCCFF. In RGB that is rgb(204, 204, 255) and in HSL it is hsl(240, 100%, 90%).
Can I use periwinkle for text?
It has a contrast ratio of 1.54:1 on white and 13.65:1 on black. Body text needs 4.5:1 under WCAG AA, so it works as text on a dark background, not on white.
What colour goes with periwinkle?
Its complementary colour, opposite on the colour wheel, is #FFFFCC. Pairing a colour with its complement gives the strongest contrast; for something calmer, use a tint or shade of periwinkle instead.
Is periwinkle a CSS colour name?
No. Periwinkle is a common name rather than a CSS keyword, and different sources use slightly different values. #CCCCFF is the most widely used one - use the hex value in CSS.