Periwinkle is a pale blue with violet in it, named after the flower. At 234° hue it sits between blue and lavender rather than in either, which is why neither name quite fits it. Grab the HEX codes from a scheme below, or build a custom periwinkle palette around any base colour with the generator.
Soft Periwinkle is a single-hue ramp, 234°–235°, from #F0F1FB down to #8A93E0. Periwinkle & Lavender pulls the light end toward violet with #E6E6FA, the CSS lavender keyword. Muted Periwinkle has the widest range and the darkest step of the three, #5A64B8.
#F0F1FB#D9DCF6#C0C4EF#A7AEEC#8A93E0#E6E6FA#C8C8F0#A7AEEC#8E9AD1#6C77B8#EDEEF9#CACDEE#A7AEEC#7D86D6#5A64B8Anchored to a periwinkle base — press Space or Generate to roll more schemes. Click a swatch to copy its HEX, lock one to keep it while the rest re-roll, then export as CSS, JSON or HEX.
Drag in the colour area or the hue bar, or type a HEX / RGB value, then build a scheme anchored to it.
Periwinkle is soft and cool, so warm neutrals do the most for it — cream, sand or a pale peach — while a deep navy gives the contrast it needs for text. It sits next to lavender on one side and blue on the other. Spring campaigns, stationery, wellness and gentle app themes use it.
:root block with each colour as a custom property (--color-1, --color-2 and so on), or copy a single HEX straight from any swatch above. Because the picker is seeded with #A7AEEC, an export taken without changing the base stays inside the periwinkle range. The JSON and HEX buttons hand back the same five values as an array and as a comma-separated line, which suit design tokens and quick pasting respectively. Lock a swatch to pin it, then re-roll the other four and export again without losing it.More palettes: Lavender palette · Blue palette · Gray palette · all colours