Periwinkle color guide
Balanced exactly between blue and purple, pale enough to tint large areas without dominating.
- Best for
- Illustration fills and soft gradients.
Accessibility
Ratios follow WCAG 2.1. AA needs 4.5:1 for body text, AAA needs 7:1; large text passes AA at 3:1.
Colors that go with periwinkle
Combinations that hold up in a real layout rather than only on the colour wheel.
Periwinkle color harmonies
Periwinkle shades and tints
The same hue and saturation across ten lightness steps — the basis of a usable colour ramp in a design system.
Periwinkle FAQ
What is the hex code for periwinkle?
Periwinkle is #CCCCFF. In other formats that is rgb(204, 204, 255), hsl(240, 100%, 90%), and approximately cmyk(20%, 20%, 0%, 0%) for print.
What colors go with periwinkle?
Indigo, Charcoal, Coral all pair well with periwinkle. Illustration fills and soft gradients.
Is periwinkle accessible for text?
Not on white: periwinkle reaches only 1.54:1 there, below the 4.5:1 WCAG AA threshold. Use it as a background with black text on top, or reserve it for large display type.
Should text on periwinkle be black or white?
Use black text. It gives the higher contrast ratio of the two against #CCCCFF.