Periwinkle color

A soft blue with a gentle lavender tint. It is named after the periwinkle flower and is a favorite for spring weddings, nurseries and calm bedroom walls.

Also known as: Periwinkle blue.

Periwinkle · #CCCCFF

About periwinkle

Periwinkle (#CCCCFF) is a cool, light, highly saturated color. It belongs to the blues family. It mixes 204 red, 204 green and 255 blue (out of 255). It is mostly used in weddings, nursery, home decor.

Periwinkle shades and tints

From lightest to darkest. Tap a shade to copy its code.

Periwinkle color harmonies

Combinations based on the color wheel. More in the color harmony tool.

ComplementaryClose to: Cream

AnalogousClose to: Lavender mist, Pastel lilac

TriadicClose to: Rose quartz, Celadon

Split complementaryClose to: Champagne, Cream

TetradicClose to: Cotton candy pink, Cream, Duck egg blue

Periwinkle color palettes

Copy the codes or open a palette in the editor to tweak it.

Monochromatic palette · Periwinkle

Analogous palette · Periwinkle

Complementary palette · Periwinkle

Triadic palette · Periwinkle

With neutrals palette · Periwinkle

With an accent palette · Periwinkle

Periwinkle contrast with text

White textContrast 1.5:1 · Not recommended

Black textContrast 13.6:1 · AAA

Based on WCAG 2.1 guidelines. Test other pairs in the contrast checker.

CSS code

:root {
  --periwinkle: #CCCCFF;
  --periwinkle-rgb: 204, 204, 255;
}
.bg { background-color: var(--periwinkle); }
.text { color: var(--periwinkle); }

Colors similar to periwinkle

Pastel lilac Light purple Thistle Chambray blue Lavender mist Lilac Wisteria Lavender gray Pastel purple Heather

Themed palettes with this color

Frequently asked questions

What is the hex code for periwinkle?

The hex code for periwinkle is #CCCCFF. In RGB it is rgb(204, 204, 255), in HSL hsl(240, 100%, 90%) and in CMYK 20, 20, 0, 0.

What is the complementary color of periwinkle?

Its complement on the color wheel is #FFFFCC, close to cream. Used in small doses, it works as an accent and adds strong contrast.

Can you use white text on periwinkle?

Use black text instead: the contrast with white is only 1.5:1, while with black it is 13.6:1.