Periwinkle color guide
HEX
#CCCCFF
RGB
204, 204, 255
HSL
240°, 100%, 90%
HSV
240°, 20%, 100%
So pale it flirts with lavender, periwinkle is blue that almost isn't — airy, cosmetic, slightly nostalgic. #CCCCFF works as a large field color without shouting. Under warm light it can pick up more pink than expected.
Best for
Educational platforms, course materials, and infographic designs.
Accessibility
Check contrast before using periwinkle for text-heavy layouts, especially on low-contrast backgrounds.
How does periwinkle compare to nearby colors?
What is the difference between periwinkle and lavender?
Periwinkle (#CCCCFF) looks cleaner and more charged than Lavender (#E6E6FA) when the two are shown together. Periwinkle reads faster on screen, so it changes the palette from steady to attention-seeking more quickly than Lavender does. Reach for periwinkle when the palette can tolerate a louder note; stay with lavender when the work calls for longer-running color.
What color is periwinkle?
Named for the periwinkle flower (Vinca). Common in spring fashion, beauty packaging, and Y2K-revival graphics. Also a familiar named pastel in design tool defaults.
What is the hex code for periwinkle?
| Format | Value |
|---|---|
| HEX | #CCCCFF |
| RGB | rgb(204, 204, 255) |
| HSL | hsl(240°, 100%, 90%) |
| HSV / HSB | hsv(240°, 20%, 100%) |
| CMYK (approx.) | cmyk(20%, 20%, 0%, 0%) |
Convert Periwinkle to other color formats
Open the color converter with Periwinkle (#CCCCFF) prefilled to copy RGB, HSL, HSV, CMYK, or OKLCH values.
Convert Periwinkle in the color converter →What does periwinkle mean in design?
Periwinkle is often associated with gentleness, whimsy, and soft femininity. Beside baby blue or ice blue, it tends to read as more lilac and less "water" or "clinical cool."
How do I use periwinkle in code?
| CSS (hex) | color: #CCCCFF; |
| CSS (rgb) | color: rgb(204, 204, 255); |
| CSS (hsl) | color: hsl(240, 100%, 90%); |
| RGB % | rgb(80%, 80%, 100%) |
| Tailwind | text-[#CCCCFF] |
| SwiftUI | Color(red: 0.800, green: 0.800, blue: 1.000) |
| UIKit | UIColor(red: 0.800, green: 0.800, blue: 1.000, alpha: 1.0) |
| Android | Color.rgb(204, 204, 255) |
| Compose | Color(0xFFCCCCFF) |
| Web Safe | #CCCCFF |
Is periwinkle accessible?
| Combination | Ratio | AA | AA lg | AAA | AAA lg | UI |
|---|---|---|---|---|---|---|
| AaWhite text on this color | 1.54:1 | ✗ | ✗ | ✗ | ✗ | ✗ |
| AaBlack text on this color | 13.65:1 | ✓ | ✓ | ✓ | ✓ | ✓ |
| AaThis color as text on white | 1.54:1 | ✗ | ✗ | ✗ | ✗ | ✗ |
| AaThis color as text on black | 13.65:1 | ✓ | ✓ | ✓ | ✓ | ✓ |
WCAG 2.1: AA normal ≥ 4.5:1, AA large text ≥ 3:1, AAA normal ≥ 7:1, AAA large ≥ 4.5:1, UI components ≥ 3:1.
How does periwinkle look with color blindness?
Simulated appearance for common types of color vision deficiency. Actual perception varies by individual.
What colors go with periwinkle
Charcoal keeps very light periwinkle from disappearing into the canvas and adds the structure needed for documents, interfaces, and tables.
With a cooler color like periwinkle, gold adds richness and turns the system toward premium packaging, hospitality, or ceremonial branding.
With a vivid periwinkle, cream is gentler than white, so the palette keeps warmth and avoids looking overlit.
What colors clash with periwinkle
Neon Green turns periwinkle into something closer to screen glow than surface color, which is a mismatch for most editorial, product, or deck work.
Magenta pushes periwinkle toward a nightclub or cosmetic register that is hard to square with calmer editorial or product work.
Orange lands abruptly next to periwinkle and can make the palette feel more promo-coded or team-coded than intended.
Light Gray sits too close to periwinkle in value, so the palette can wash out before it ever establishes a clear hierarchy.
How should I use periwinkle in design?
- •Periwinkle is subtle enough for full-page backgrounds, hover states, and delicate tinting effects — reserve it for atmosphere rather than emphasis.
- •Periwinkle leans cool, so warm accents like gold, coral, or rust add the most energy. For a calm, professional palette, stay with other cool tones and use value contrast instead.
- •Light tones like periwinkle work best for card backgrounds, section tints, and gentle emphasis — they add color without competing with the content.
What are good periwinkle palettes?
Fresh canvas
Educational platforms, course materials, and infographic designs.
Honey and cream
Personal branding, portfolio websites, and resume designs.
Design with periwinkle in Moda
Create a presentation or document using periwinkle as your accent color. Moda's AI applies your color palette automatically.
Create a design with periwinkle →What are the shades and tints of periwinkle?
Shades (darker)
Tints (lighter)
Tones (desaturated)
Hue variations
What are the color harmonies for periwinkle?
Harmonies are calculated from the base swatch. When a harmony matches a named color page, it links there; otherwise it appears here as a computed reference swatch.
Similar colors
Lavender
Lavender sits close to periwinkle on the wheel, but it carries less chroma, which makes it better for steadier surfaces and calmer long-form use than for sharper emphasis and quicker visual pickup.
Mauve
Mauve keeps some overlap with periwinkle, but the shift in finish and association is enough to make one feel better suited to this particular layout than the other.
Heather
Heather is close enough to periwinkle to keep the palette cohesive, yet the lighter-darker shift still decides whether the family behaves more like atmosphere or more like structure.
Light Blue
Light Blue turns the same general family toward a different energy level, which matters if the palette should feel punchier, dustier, more cosmetic, or more editorial.
Baby Blue
Baby Blue keeps some overlap with periwinkle, but the shift in finish and association is enough to make one feel better suited to this particular layout than the other.
Frequently asked questions
What is the hex code for periwinkle?
The hex code for periwinkle is #CCCCFF. In RGB, that's 204 red, 204 green, and 255 blue. The approximate CMYK equivalent is 20% cyan, 20% magenta, 0% yellow, and 0% key (black).
Is periwinkle a warm or cool color?
Periwinkle falls on the cool side of the palette, so warm companions create the clearest contrast while other cool tones keep the system more restrained.
Should periwinkle be used as a surface color or an accent?
Periwinkle belongs more naturally on surfaces than in tiny accent moments. Use it to open space, soften sections, or tint large areas, then let darker colors carry the emphasis.
Where does periwinkle work best in a layout?
Periwinkle is very light, so it works best as a background, card fill, or table tint in slides, documents, and landing pages. Pair it with dark text such as charcoal or navy for readability.
Is periwinkle accessible?
Periwinkle works better with dark text than white text. Black text reaches 13.65:1 contrast on the swatch, which makes the color more usable as a background or highlight surface than as a dark panel.
More blue colors
Keep exploring color resources
All color pages
Browse the full library of color references, pairings, and palettes.
Blue colors
Compare periwinkle with other blue tones.
Green colors
Explore nearby color families to build stronger palettes and contrasts.
Neutral colors
Explore nearby color families to build stronger palettes and contrasts.
Purple colors
Explore nearby color families to build stronger palettes and contrasts.
Last updated April 6, 2026
Color values are computed from the listed hex code using standard conversion formulas. RGB, HSL, and HSV are exact screen-ready conversions. CMYK is an approximate on-screen reference, not a press-ready print specification. Pairings, palettes, and use-case guidance are heuristic recommendations derived from color relationships, contrast behavior, and common presentation, document, and UI patterns.