#CCCCFFPeriwinkle hex code: #CCCCFF · RGB 204, 204, 255. Also called periwinkle blue, lavender blue.
Periwinkle is a pale blue with a violet tint, named after the periwinkle flower (Vinca). The common reference value is #CCCCFF, an equal mix of red and green with full blue. It sits right between blue and lavender, which is why it is sometimes called lavender blue.
Periwinkle is gentle and slightly playful: popular in stationery, cosmetics, children's products, spring fashion and creative tools. Deeper periwinkles make friendly, less corporate alternatives to standard blue in apps.
Light periwinkle needs dark text. For a button with white text, use a deep periwinkle around #5A67C8. Pair it with butter yellow (its near-complement), soft pink or crisp white.
Popular color names rarely have one official value. "Reference" values are the ones commonly listed in general color references; "HueWiz pick" values are lighter, deeper or muted versions chosen for interface work. Click a code to copy it.
#CCCCFFrgb(204, 204, 255) · reference#9999FFrgb(153, 153, 255) · HueWiz pick#8E9BD8rgb(142, 155, 216) · HueWiz pick#6F7DD1rgb(111, 125, 209) · HueWiz pickThe same base color in a light and a dark theme. Surfaces and text are tinted with periwinkle's hue; links are adjusted until they reach 4.5:1 against the surface. The accent comes from the first palette below.
Spring collection
Designed around periwinkle.
A short paragraph shows how body text reads on this surface, with an inline link in the brand color.
#F6F6FF · text #1E1E2B · link #6D6D9ASpring collection
Designed around periwinkle.
A short paragraph shows how body text reads on this surface, with an inline link in the brand color.
#13131D · text #EEEEF4 · link #CCCCFFHand-picked combinations that work with periwinkle. Hover a swatch to see its code; click to copy.
WCAG 2.x asks for 4.5:1 for normal text (AA), 3:1 for large text and 7:1 for AAA. Ratios are truncated, not rounded, so a pass shown here is a real pass. Check your exact pairs in the contrast checker.
| Pairing | Ratio | Normal text | Large text |
|---|---|---|---|
| White text on periwinkle | 1.53:1 | Fail | Fail |
| Black text on periwinkle | 13.64:1 | AAA | AAA |
| Periwinkle text on white | 1.53:1 | Fail | Fail |
| Periwinkle text on near-black #111111 | 12.27:1 | AAA | AAA |
| White text on deeper periwinkle #7372A0 | 4.52:1 | AA | AAA |
An 11-step 50–950 ramp generated in OKLCH from #CCCCFF. Light steps suit backgrounds and borders, middle steps buttons, dark steps text. This is a generated ramp, not an official Tailwind palette.
@import "tailwindcss";
@theme {
--color-periwinkle-50: #F6F6FF;
--color-periwinkle-100: #EAEBFF;
--color-periwinkle-200: #D6D6FF;
--color-periwinkle-300: #BDBDED;
--color-periwinkle-400: #A2A2CA;
--color-periwinkle-500: #8787A9;
--color-periwinkle-600: #6D6D88;
--color-periwinkle-700: #57576D;
--color-periwinkle-800: #424253;
--color-periwinkle-900: #2E2E3A;
--color-periwinkle-950: #1B1B22;
--color-periwinkle: #CCCCFF;
}:root {
--periwinkle: #CCCCFF;
--periwinkle-rgb: 204 204 255;
--periwinkle-light: #EAEBFF;
--periwinkle-dark: #424253;
}
.btn-periwinkle {
background: #7372A0;
color: #000000;
}Need semantic roles (surface, text, primary, accent) and exports? Open periwinkle in the Tailwind color generator.
#CCCCFF is the value HueWiz uses for periwinkle; it equals rgb(204, 204, 255). Other common versions include #9999FF (medium periwinkle), #8E9BD8 (muted periwinkle), #6F7DD1 (deep periwinkle).
With an HSL hue of 240° and 100% saturation, periwinkle reads as a cool blue.
Use dark text. White on #CCCCFF measures 1.53:1 and black measures 13.64:1; WCAG AA needs 4.5:1 for normal text. For white text, deepen it to about #7372A0.
Try periwinkle & butter (#CCCCFF, #FFF1A8, #FFFFFF); soft creative (#F6F6FF, #CCCCFF, #F4C2C2); twilight (#9999FF, #6F7DD1, #2E2E48). Each palette above can be copied or opened in the HueWiz studio.
Periwinkle isn't a CSS keyword. These built-in CSS colors are the nearest by perceptual (OKLab) distance; lower ΔE means closer.