What Is Periwinkle? The Origin of Its Name and Its Color Code

Periwinkle is a name for a soft blue with a subtle violet cast. When using it on a website or banner, choosing a specific color sample helps everyone work with the same shade. This article explains where the name comes from, a commonly used color code, how it compares with similar colors, and what to check when placing text and buttons on it. HEX is a six-digit hexadecimal notation for specifying web colors.

Periwinkle takes its name from a flower

In English, “periwinkle” refers to plants in the Vinca group, which can produce blue-violet flowers. One example is Vinca minor, commonly called lesser periwinkle. The color takes its name from these flowers. English dictionaries describe the color as a pale purplish blue. The same word can also refer to a sea snail, but the plant is the source of the color name.

Real flowers vary in appearance with the specimen and lighting, and a traditional color name is not a precise digital specification. Instead of telling a colleague to “use periwinkle” without further detail, share the selected swatch and its code.

A common HEX code and a comparison with similar shades

A commonly used web swatch for periwinkle is ■#CCCCFF. In RGB, which describes a screen color using red, green, and blue light components, this is red 204, green 204, and blue 255. Blue has the highest value, while red and green are equal. The result is a light blue that can also appear faintly violet.

Compare it with lavender ■#E6E6FA and light blue ■#ADD8E6. This lavender sample is lighter and less colorful than the periwinkle sample, whereas this light blue contains relatively more green and leans toward a sky-blue appearance. They are useful comparisons, not interchangeable versions of exactly the same color.

There is no single universal HEX value for the everyday color name “periwinkle.” For example, another color-name survey uses the stronger, more saturated ■#8E82FE. Also, periwinkle is not a standard CSS named-color keyword. CSS is the styling language used for web pages, so specify a HEX value or another valid numeric color format rather than expecting that word to work as a color declaration.

Check text contrast before using periwinkle on a webpage

Consider a registration page for a pressed-flower workshop. Use periwinkle ■#CCCCFF for the introductory section and deep navy ■#29314D for its heading and short description. Their contrast ratio is approximately 8.32:1. A contrast ratio measures the difference in relative luminance between text and its background.

Put dates, prices, and other details in white ■#FFFFFF cards with the same navy ■#29314D body text; that pair has a contrast ratio of about 12.80:1. For a “Register” button, use deep purple ■#51448A behind white ■#FFFFFF lettering, giving about 8.26:1. The purple button also contrasts about 5.37:1 against the surrounding periwinkle ■#CCCCFF, making the action distinct from the pale section.

However, periwinkle ■#CCCCFF and white ■#FFFFFF differ by only about 1.54:1. Avoid white text directly on that pale background, and do not depend on the slight color difference alone to outline a white card. If a visible card boundary is needed, try a muted purple-gray ■#66609C border. Its contrast is approximately 3.67:1 against periwinkle and 5.65:1 against white.

Under WCAG 2.2 Level AA, the general minimum contrast ratio is 4.5:1 for normal text and 3:1 for qualifying large text. Important boundaries of interactive components may also require 3:1 against adjacent colors. HueRoll accepts HEX input and compares a selected color with white and black. It does not compare arbitrary color pairs or automatically judge AA compliance, so verify the actual text, background, and control combinations separately.