Periwinkle and White Color Schemes: Choosing Text Colors for Soft Backgrounds
Periwinkle and white can create a gentle color scheme with a pale blue-violet feel. However, since both are light colors, white lettering and faint borders may disappear into the background. To preserve the soft look while keeping information clear, separate the large background areas from the darker colors used for text, buttons, and essential outlines. Here are two examples: an online-course information card and an event registration form.
Use dark lettering on periwinkle and white backgrounds
Periwinkle is a name for a pale color between blue and violet. The color reference Color-Site.com gives #CCCCFF as one example, with RGB values red 204, green 204, and blue 255. RGB describes screen colors using the red, green, and blue components of light, while HEX specifies a web color using a hash sign and six hexadecimal digits. This code is a reference swatch, not a universal numerical definition of the color name.
Periwinkle #CCCCFF and white #FFFFFF have a contrast ratio of approximately 1.54:1. A contrast ratio measures the difference in relative luminance between two colors. Against periwinkle #CCCCFF, dark charcoal #25293B achieves about 9.35:1 contrast, and the same charcoal #25293B on white #FFFFFF reaches about 14.39:1. These darker letters add definition without requiring the pale backgrounds themselves to become dark.
Compare a white information card and a periwinkle registration form
Example A: an online-course information card.Keep most of the page background white #FFFFFF, with periwinkle #CCCCFF reserved for a short heading band around the course title. Set the title on that band and the date, price, and description on white in dark charcoal #25293B. Make the “Enroll in the Course” button deep blue-violet #4C5382 with white #FFFFFF text. The button text and its fill have a contrast ratio of about 7.32:1, helping the main action stand out on the white page. The pale blue-violet identifies the heading, while longer information remains on white.
Example B: an event registration form.Use periwinkle #CCCCFF across the form panel and white #FFFFFF for the input fields. Place field labels in charcoal #25293B on the periwinkle area, and display entered text in charcoal #25293B inside the white fields. Use deep blue-violet #4C5382 for the borders that make the input fields recognizable. These borders contrast with the surrounding periwinkle by approximately 4.76:1 and with the white interior by about 7.32:1. Give the submit button the same deep blue-violet #4C5382 fill and white #FFFFFF lettering so it is distinct from the fields.
Example A gives white most of the space; Example B gives periwinkle the larger area. There is no need for a 50–50 split. Adjust the balance and spacing according to the amount of text and the number of form fields.
Check white text and the boundaries around input fields
Normal-sized white #FFFFFF text on periwinkle #CCCCFF has only about 1.54:1 contrast, below the WCAG (Web Content Accessibility Guidelines) 2.2 Level AA requirements. Normal-sized text generally needs at least 4.5:1 contrast, while large text needs at least 3:1. Use charcoal #25293B on the pale blue-violet background, and reserve white text for the deeper button color.
White #FFFFFF inputs against periwinkle #CCCCFF also differ by only about 1.54:1. Where the field edge is necessary to identify or use the control, retain a sufficiently contrasting outline such as deep blue-violet #4C5382. Visual cues required to identify user-interface components or states generally need at least 3:1 contrast against adjacent colors. Purely decorative surfaces do not all require dark outlines. Also check input and keyboard-focus visibility at smartphone width.
HueRoll allows you to adjust colors using HEX input and check the selected color’s contrast with white or black. It cannot compare arbitrary pairs of colors or automatically determine WCAG conformance. The text, border, and background combinations described here were calculated separately.