Blue family
Periwinkle color
A rich blue leaning violet. The reference periwinkle is #8E82FE, as defined by the xkcd Color Survey.
| HEX | #8E82FE | |
|---|---|---|
| RGB | rgb(142, 130, 254) | |
| HSL | hsl(246, 98%, 75%) | |
| HSV | hsv(246, 49%, 100%) | |
| OKLCH | oklch(67.5% 0.178 285.0) | |
| CMYK* | 44, 49, 0, 0 |
* CMYK is a simple conversion without a print profile; ask your printer for exact values.
What color is periwinkle?
Periwinkle is a lavender-blue named after the periwinkle flower (Vinca). It sits right on the line between blue and purple. The xkcd survey and the Color Names list agree on #8E82FE; older references describe a paler shade.
Periwinkle hex codes by source
Color names are not standardized, so the same name can point to different colors. Here is every definition of periwinkle in our three sources, with how close each one is to the reference.
| Name | HEX | Source | Compared with the reference |
|---|---|---|---|
| Periwinkle | #8E82FE | xkcd Color Survey | Reference shown on this page |
| Periwinkle | #8E82FE | Color Names (meodai) | Same color |
Periwinkle vs Lavender
#8E82FE
#E6E6FA
Lavender is lighter and more purple; periwinkle is bluer and more saturated. In numbers: the two are 0% similar (OKLab distance 0.297). See Lavender for its own codes.
Colors similar to periwinkle
The closest named colors to #8E82FE across all three sources, with their similarity in OKLab.
Tints and shades of periwinkle
The same hue from light to dark, generated in OKLab so the steps look even. Click a step to copy its HEX code.
Colors that go with periwinkle
Classic color-wheel combinations built on #8E82FE, computed in OKLCH so the partners keep the same lightness and intensity. Each swatch shows the nearest common name.
Complementary
Analogous
Triadic
Split complementary
Periwinkle with white and black text
WCAG asks for a contrast of at least 4.5:1 for body text (AA) and 3:1 for large text. On a periwinkle background, black text is the better choice.
Use periwinkle in CSS
.periwinkle {
color: #8E82FE;
/* or */ color: rgb(142 130 254);
/* or */ color: hsl(246 98% 75%);
/* or */ color: oklch(67.5% 0.178 285.0);
}