What colors go well with periwinkle?

Periwinkle pairs with its complementary colour #FFFFCC and its triad partners. See the auto-generated palettes on this page, or use the colour picker's harmony tool.

Periwinkle Color — Hex Code #CCCCFF, RGB, Palettes & CSS

Q: What is the hex code for periwinkle?

Periwinkle is commonly #CCCCFF, which is rgb(204, 204, 255). Like most descriptive colour names it covers a small range, but this is a widely used value.

Periwinkle colour codes

Hex

#CCCCFF

RGB

rgb(204, 204, 255)

HSL

hsl(240, 100%, 90%)

HSV

hsv(240, 20%, 100%)

OKLCH

oklch(0.86 0.07 285)

CMYK

cmyk(20%, 20%, 0%, 0%)

Complementary palette

Periwinkle with its opposite on the colour wheel.

#CCCCFF

rgb(204, 204, 255)

#FFFFCC

rgb(255, 255, 204)

Triad palette

Periwinkle with two evenly-spaced partners.

#CCCCFF

rgb(204, 204, 255)

#FFCCCC

rgb(255, 204, 204)

#CCFFCC

rgb(204, 255, 204)

Monochromatic palette

Lighter and darker versions of periwinkle at the same hue.

#666680

rgb(102, 102, 128)

#8F8FB3

rgb(143, 143, 179)

#B8B8E6

rgb(184, 184, 230)

#CCCCFF

rgb(204, 204, 255)

Lighter tints

Periwinkle toward white.

#CCCCFF

rgb(204, 204, 255)

#D3D3FF

rgb(211, 211, 255)

#DBDBFF

rgb(219, 219, 255)

#E2E2FF

rgb(226, 226, 255)

#E9E9FF

rgb(233, 233, 255)

#F0F0FF

rgb(240, 240, 255)

#F8F8FF

rgb(248, 248, 255)

#FFFFFF

rgb(255, 255, 255)

Darker shades

Periwinkle toward black.

#CCCCFF

rgb(204, 204, 255)

#AFAFDB

rgb(175, 175, 219)

#9292B6

rgb(146, 146, 182)

#757592

rgb(117, 117, 146)

#57576D

rgb(87, 87, 109)

#3A3A49

rgb(58, 58, 73)

#1D1D24

rgb(29, 29, 36)

#000000

rgb(0, 0, 0)

About periwinkle

A light blue-purple named after the flower. Gentle and dreamy, it bridges blue and violet in soft palettes. The value shown here (#CCCCFF) is a widely used representation — descriptive colour names like this cover a small range rather than one fixed code, so feel free to nudge it in the colour picker to suit your project.

Palettes that work with periwinkle

The complementary colour (#FFFFCC) sits opposite periwinkle on the wheel for high contrast, while the triad spreads three balanced hues. For subtle, layered designs the monochromatic set keeps the same hue at different lightness. All are generated automatically above — click any swatch to copy.

Using periwinkle in your design

For CSS, paste #CCCCFF or the oklch(0.86 0.07 285) value, or download the ready-made periwinkle.css file above — it includes a full 50–950 token scale. Always check contrast before using periwinkle behind text.

What is the hex code for periwinkle?

Periwinkle is commonly #CCCCFF (rgb(204, 204, 255)). It covers a small range, but this is a widely used value.

What colours go well with periwinkle?

Its complementary colour #FFFFCC and the triad/monochromatic palettes shown above. Use the picker's harmony tool to explore more.

Periwinkle colour

Periwinkle colour codes

Complementary palette

Triad palette

Monochromatic palette

Lighter tints

Darker shades

About periwinkle

Palettes that work with periwinkle

Using periwinkle in your design

Popular colours

Color tools