What Color is Periwinkle
Periwinkle is a luminous, pastel tint that sits precisely on the border between cool blue and warm violet. Named after the creeping Vinca flower, this shade embodies a sense of whimsy and gentle calm. Its lightness makes it airy and approachable, essentially functioning as a lavender-blue that feels both nostalgic and digitally modern.
Additional Information
- Color Family: Blue-Violet
- Temperature: Cool
- Associated Season: Summer
- Complementary Color: #FFFFCC
- Brightness: 210/255
- Saturation: 20%
Colors That Pair Well With Periwinkle
Complementary
Pair with Cream for a harmonious, balanced look. Great for backgrounds and accents.
High Contrast
Use Waiouru for maximum readability. Ideal for text or critical UI elements.
Harmonious Depth
Use lighter and darker shades for a sophisticated, cohesive design. Great for backgrounds, text, and subtle accents.
Color Variations
Tints (add white)
Tones (add grey)
Periwinkle History
The name periwinkle is derived from the Old English peruince, rooted in the Latin pervinca, referring to the flower used in garlands. While the pigment has existed in nature for millennia, periwinkle was not recorded as a specific color name in English until 1922. Historically, artists struggled to capture this exact hue using natural mineral pigments like azurite; it often required a complex mixture of Cobalt Blue, white lead, and a touch of Madder lake to achieve the specific violet undertone.
In the mid-20th century, improvements in chemical synthesis allowed for more stable violet-blue dyes, making the color a staple in Modernism and 1970s pastel fashion. Recently, the color family gained renewed interest when a variant was selected as the Pantone Color of the Year in 2022, highlighting its transition from a floral classic to a symbol of the digital age and the metaverse.
Meaning & Psychology
Psychologically, periwinkle bridges the gap between the tranquility of blue and the spiritual creativity of purple. It is widely associated with serenity and everlasting friendship, lacking the aggressive energy of red or the melancholy sometimes associated with deep indigo. Because it is a tint (mixed with white), it projects a sense of openness and clarity often utilized to reduce stress in clinical settings.
Culturally, this shade is often linked to innocence and womanhood. Unlike royal purples which command authority, periwinkle suggests approachability and care. It creates a dreamy atmosphere, encouraging imagination without over-stimulation, making it a frequent choice for creative spaces and branding that wishes to appear helpful rather than corporate.
In Nature
The definitive example of this color in the wild is the Vinca minor plant, a hardy groundcover known for its delicate, star-shaped blossoms. The color name also technically belongs to the common marine-snail (Littorina littorea), though their shells are often a drabber grey-brown than the flower's petal. In the mineral world, high-quality specimens of Blue-Lace-Agate and certain formations of Celestine crystals exhibit this specific cloudy, violet-blue coloration.
How To Use Periwinkle
In design, periwinkle serves as a sophisticated alternative to baby blue, adding warmth via its purple undertones. It is excellent for UI-design backgrounds as it is low-saturation and does not fatigue the eye. However, designers must pair it with warm accents like peach or lemon to prevent the palette from feeling too clinical or cold.
Regarding accessibility, #CCCCFF is a very light color. Never use white text over a periwinkle background, as it will fail WCAG contrast standards. For maximum legibility, layer deep charcoal, navy, or dark violet text over it. It functions best as a highlight or a soft background rather than a structural element for typography.
Related Words
Curated Palettes
Botanical Morning
A fresh, high-contrast spring palette inspired by garden florals.
Digital Vapor
A trendy, synthetic aesthetic mixing soft pastels with neon energy.
Corporate Softness
Professional blues and greys anchored by periwinkle for approachability.
Color Conversions
Color Blindness Simulation
CSS Snippets
color: #CCCCFF;
color: rgb(204, 204, 255);
background-color: #CCCCFF;
border: 3px solid #CCCCFF;
box-shadow: 0 4px 12px #CCCCFF66;
background: linear-gradient(135deg, #CCCCFF 0%, #ffffff 100%);

Shop Premium Products in Periwinkle
This isn't just a mockup. We'll custom make high-quality home decor in this exact shade, just for you.
Ships in 3-5 daysSecure Checkout
Product Details
Add a touch of luxury to your home with our premium Eco Velvet cushions. Soft to the touch, these cushions are perfect for adding comfort and style to any room.
- Material: Soft Eco Velvet.
- Feel: Velvety soft finish.
- Print: Double-sided, all-over vibrant color using water-based inks.
- Care: Machine washable at 30°C.
- Construction: Handmade to order with a concealed zipper.
Eco Credentials
We believe in sustainable style. Our cushions are crafted with the planet in mind.
- Made to Order: Produced only when you order, eliminating overproduction and waste.
- Water-Based Inks: Printed using neo-pigment, water-based inks that are non-hazardous, toxin-free, and vegan-friendly.
- Local Fulfilment: Produced locally where possible to reduce carbon emissions from transport.
- Vegan Friendly: No animal products are used in the production of these cushions.
What Goes With Periwinkle?
Explore color palettes containing Periwinkle and discover harmonious combinations for your designs.
Analogous
Complementary
Split-complementary
Monochromatic
Accessibility
Contrast with Black and White
Contrast with Black
UI Examples
"Color is a power which directly influences the soul."
Contrast Ratio
Contrast with White
UI Examples
"Color is a power which directly influences the soul."
Contrast Ratio
Closest Color Matches
Caran d'ache Luminance 6901
Cobalt Blue 5%
#661 • #9AC3EB
Polychromos
sky blue
#146 • #86B2DF
Caran d'ache Luminance 6901
Ultramarine
#140 • #1E5CDA
Prismacolor
China Blue
#PC1100 • #315AC7
Similar Colors
View all Blue-Violet colors →Colors with similar hex values and appearance to Periwinkle
Frequently Asked Questions
What is the hex code for Periwinkle?
What colors go with Periwinkle?
Is Periwinkle accessible for text?
How do I use Periwinkle in CSS?
You can use Periwinkle in CSS with its hex code. Here is an example class:
.periwinkle {
background-color: #CCCCFF;
color: #FFFFFF;
}For more snippets including gradients, see the CSS snippets section.