Periwinkle color

Codes

This name is not a CSS keyword. Set the hex in stylesheets.

• HEX#CCCCFF
• RGB204, 204, 255Copy RGB
• HSL240, 100%, 90%Copy HSL
• CMYK20, 20, 0, 0Copy CMYK

Shades and tints

Ten steps toward black, then ten toward white. The outlined stop is #CCCCFF.

• 14141A

• 292933

• 3D3D4D

• 525266

• 666680

• 7A7A99

• 8F8FB3

• A3A3CC

• B8B8E6

• Base

• D1D1FF

• D6D6FF

• DBDBFF

• E0E0FF

• E6E6FF

• EBEBFF

• F0F0FF

• F5F5FF

• FAFAFF

• Complementary

  • #CCCCFF
  • #FFFFCC

• Analogous

  • #CCE5FF
  • #CCCCFF
  • #E5CCFF

• Triadic

  • #CCCCFF
  • #FFCCCC
  • #CCFFCC

• Tetradic

  • #CCCCFF
  • #FFCCE6
  • #FFFFCC
  • #CCFFE6

Contrast

Ratios use #CCCCFF against white (#FFFFFF) and near-black (#161616). AA means 4.5:1 for body text.

• On white

  1.54:1

  Fails AA

• On near-black

  11.76:1

  AAA

• White text on this color

  1.54:1

  Fails AA

• Near-black text on this color

  11.76:1

  AAA

How to use periwinkle

Periwinkle on this page is #CCCCFF, the light purplish blue recorded by Maerz and Paul and listed on Wikipedia. Red and green sit at 204 and blue at 255. It is not a CSS keyword. People also call it lavender blue. It is much lighter than indigo and much less saturated than a typical purple-blue brand accent.

Because it is so light, #CCCCFF disappears on white. Use it as a tinted surface, a selected-row background, or a large wash behind dark text. Near-black text on the swatch is the readable combination. White text is not. Dark periwinkle is not this swatch. Take a shade from the ramp and label that token on its own instead of pretending one hex covers both queries. Indigo (#4B0082) is the deep relative. Cobalt is the saturated blue relative. Periwinkle next to either of those reads as a pale wash in the same family: periwinkle surfaces, indigo or cobalt for text and actions.

Nearby colors

• Indigo#4B0082
• Cobalt blue#0047AB
• Navy blue#000080