Periwinkle carries the hex code #CCCCFF, which resolves to rgb(204, 204, 255) and hsl(240, 100%, 90%). Red and green sit at identical values while blue runs 51 points ahead, which places the hue at exactly 240° on the color wheel.
Periwinkle is therefore a pure blue by the numbers and a violet to the eye, and that gap explains most of the confusion around it. At 1.54:1 against white it fails every text requirement, and against black it reaches 13.65:1. This page covers every code format, the computed palettes, the four elements where periwinkle performs, and why a color sitting on the blue axis reads as purple.
What Is the Color Periwinkle?
Periwinkle sits at 240° with 100% saturation and 90% lightness. No CSS keyword maps to it, though #CCCCFF is the value most references publish, and its structure makes it one of the tidiest hex codes in common use.
The full code set for #CCCCFF:
- HEX: #CCCCFF
- RGB: rgb(204, 204, 255)
- RGBA: rgba(204, 204, 255, 1)
- HSL: hsl(240, 100%, 90%)
- HSB: 240, 20, 100
- CMYK: 20, 20, 0, 0
Equal red and green channels with blue at maximum define the pure blue axis. Anything at 240° is blue in the strict sense, which puts periwinkle in the same hue family as navy, royal blue, and #0000FF.
The HSB reading explains why it looks pale rather than vivid. Saturation reports 20% in the brightness model against 100% in HSL, and that gap is the signature of a color diluted almost entirely with white.
Why Does a Pure Blue Read as Violet?
Periwinkle sits at exactly 240°, the same hue angle as #0000FF, and almost nobody describes it as blue. The reason lies in how human vision handles pale, low-chroma colors rather than in anything about the color model.
Three factors combine:
- Blue perception shifts toward violet at high lightness: the same hue reads differently as white is added
- Chromatic adaptation: a low-chroma blue takes on a purple cast against neutral surroundings
- Naming convention: English reserves “blue” for saturated examples and reaches for other words at the pale end
The practical consequence appears in naming and search. Users looking for periwinkle will not find it under “light blue,” and a token named blue-100 that renders as #CCCCFF will surprise whoever picks it from a list.
By contrast, baby blue at #89CFF0 sits at 199°, a genuinely different hue with green in the mix, and it reads as blue at any lightness. The two colors are frequently grouped together and they sit 41 degrees apart.
Anyone building a blue scale should name periwinkle separately. A pure-blue ramp that runs from #0000FF up to #CCCCFF changes apparent hue along the way, which is invisible in the math and obvious on screen.
How Does Periwinkle Appear on Digital Screens?
Periwinkle renders consistently because blue at maximum with two equal mid channels sits well inside sRGB. It shows none of the clipping a saturated blue can produce.
The measured values set the constraints:
- #CCCCFF on white: 1.54:1, fails everything
- #CCCCFF on black: 13.65:1, passes AAA
- Black text on #CCCCFF: 13.65:1, passes AAA
- White text on #CCCCFF: 1.54:1, fails
- Dark variant #9999BF on white: 2.74:1, still fails AA
Periwinkle is unusual in this cluster for failing in dark mode as well. The computed bright variant #3333FF reaches only 2.82:1 against a dark surface, because pushing a pale blue toward saturation drives its luminance down rather than up.
That double failure narrows its range considerably. Most pale colors work as dark-mode accents once brightened, and periwinkle needs the tint ramp instead, where #D6D6FF and similar values keep enough lightness to pass.
The shade at #666680 reaches 6.1:1 on white and passes AA. Anyone needing periwinkle-family text on a light surface should reach for that value.
Blue-heavy colors also suffer most from panel variation. A cool-calibrated display pushes periwinkle toward gray-blue and a warm one pushes it toward lilac, so review on the target device matters more here than for a mid-tone.
What Are the Shades of Periwinkle?
Shades come from mixing black into #CCCCFF while holding hue at 240°:
- #B2B2DF
- #9999BF
- #80809F
- #666680
- #4C4C60
- #333340
- #1A1A20
The step at #666680 matters most, since it’s the first that passes AA on white at 6.1:1. Everything lighter fails as body copy.
Tints barely move. The computed ramp runs from #CCCCFF to #D6D6FF across nine steps, and the whole range is visually one color, which means periwinkle has almost nowhere to go but down.
Named neighbors cluster in the lavender-blue family:
- Lavender (#E6E6FA): the CSS keyword, lighter and pinker, 1.25:1 on white
- Wisteria (#C3B1E1): more violet, 1.79:1
- Light steel blue (#B0C4DE): greener and grayer, 1.78:1
- Thistle (#D8BFD8): pinker, 1.51:1
- Cornflower blue (#6495ED): far deeper and unmistakably blue, 2.97:1
What UI Elements Work Best with Periwinkle?
Periwinkle belongs on light surfaces that host dark content. The 13.65:1 for black text on it opens the surface role, and the 1.54:1 against white plus the weak dark-mode behavior closes almost everything else.
Text, functional borders, dark-mode accents, and any control with a white label all fall outside its range. Four element types remain where periwinkle genuinely performs.
Backgrounds and Surface Tints
Periwinkle works as a page or section background with white cards on top. The 1.54:1 separation reads as depth rather than as a color change, and dark text placed on it clears AAA.
Its cool cast gives an interface a calm, slightly editorial register. Products in education, productivity, and finance reach for it when a gray canvas would feel sterile and a warm one would feel informal.
Lighter tints suit large areas better. #D6D6FF across a full viewport carries the same character with less weight than the base.
Tags and Category Labels
Tags suit periwinkle because they’re small, non-semantic, and benefit from a color outside the severity ladder. Topic markers, plan tiers, and filter chips all fit.
A #CCCCFF fill with #333340 text is fully accessible at any size. Building a family of pale hues at matched lightness gives a category system where no tag outranks another.
Periwinkle carries no conventional status meaning, which makes it right for description and wrong for anything read as good or bad.
Buttons and CTAs with Dark Labels
Periwinkle buttons work when the label sits at near-black. At 13.65:1 the text clears AAA, while white on the same fill fails at 1.54:1.
Secondary actions suit it better than primary ones. The color reads as gentle rather than weighty, so a deeper blue carries the primary CTA more convincingly.
Outline variants need the shade ramp. A #CCCCFF border on white misses the 3:1 non-text minimum, so the stroke has to drop to #80809F or deeper.
Empty States and Illustrations
Empty states need a welcoming register rather than an alarming one, and periwinkle sits precisely there. Onboarding graphics, zero-data placeholders, and decorative illustration fills all suit it.
The accompanying instruction should stay in near-black. An illustration can live entirely in pale blues, and the sentence telling the user what to do next needs real contrast.
What Are the Best Periwinkle Color Palettes for UI?
Every palette below comes from rotating hue around #CCCCFF at fixed saturation and lightness. Because lightness sits at 90%, most produce a set of pastels rather than a light-and-dark pair.
Monochromatic
The monochromatic scheme holds hue at 240° and moves lightness: #CCCCFF, #1414FF, and #D6D6FF. The middle value jumps to a saturated blue, since dropping 90% lightness by 40% lands near the hue’s core.
#1414FF is the accent the pastel palette lacks. At 8.1:1 on white it passes AAA and gives periwinkle a genuine interactive partner.
Analogous
Analogous pulls neighbors 30° in each direction: #CCCCFF, #E5CCFF, and #CCE5FF. A pale violet and a pale cyan-blue flanking the base, all at matched lightness.
This is the classic pastel arrangement and its weakness is hierarchy. Three values at identical lightness need a dark neutral or the layout has no anchor.
Complementary
Periwinkle’s complement sits opposite at 60°: #CCCCFF paired with #FFFFCC, a pale butter yellow. Maximum hue separation with no contrast separation, since both sit at 90% lightness.
Adjacent surfaces work better than foreground and background. Yellow text on periwinkle fails, and a yellow card beside a periwinkle card reads clearly.
Triadic
The triadic scheme gives you #CCCCFF, #FFCCCC, and #CCFFCC: periwinkle, a pale rose, and a pale green. Three distinct hues at matched lightness, which makes an even category system.
Verification under simulation matters. Matched-lightness pastels converge faster under color vision deficiency than saturated sets, since little chroma remains to separate them.
Split-Complementary
Split-complementary softens the pairing: #CCCCFF, #FFE6CC, and #E6FFCC. Periwinkle with a pale peach and a pale lime, and the most flexible of the five for a full interface.
A near-black text color anchors it. Visily’s theme tools can generate the shade ladder beneath each pastel so the dark partners come out accessible rather than mixed by eye.
Which Colors Are Similar to Periwinkle?
Five values sit close enough to #CCCCFF to substitute for it, and all fail on white:
- Lavender (#E6E6FA): the CSS keyword, lighter and pinker, 1.25:1
- Thistle (#D8BFD8): pinker and more violet, 1.51:1
- Light steel blue (#B0C4DE): greener and grayer, 1.78:1
- Wisteria (#C3B1E1): more violet, 1.79:1
- Cornflower blue (#6495ED): far deeper, unmistakably blue, 2.97:1
Cornflower blue is the substitution when a layout needs presence. At 2.97:1 it sits just under the non-text floor and reads as a real color rather than a tint.
Lavender is the one most often confused with periwinkle in conversation. At #E6E6FA it’s noticeably lighter and leans pink, so the two aren’t interchangeable in a token set even though the words often are in a brief.
Which Colors Pair Best with Periwinkle?
Near-black is periwinkle’s essential partner. At 13.65:1 it’s the text color that makes every periwinkle surface work.
Saturated blue from the monochromatic scheme supplies the hierarchy. #1414FF shares the base’s exact hue, passes AAA on white, and gives the palette the interactive color a pastel can’t provide.
Warm neutrals prevent the clinical problem. Cream and warm sand keep periwinkle reading as considered, while cool grays push it toward a washed, medical register.
Soft yellow from the complementary direction balances it. The pairing reads as spring-like rather than corporate, which suits consumer and education products.
The 60-30-10 split applies as follows:
- 60% neutral: white or off-white surfaces
- 30% periwinkle and its tints: canvases, banners, and secondary surfaces
- 10% saturated blue: links, primary actions, and interactive elements
Which Colors Should You Avoid Pairing with Periwinkle?
White fails first. At 1.54:1 a periwinkle element on white has no perceptible boundary, so borders and outlines built that way disappear on most screens.
Two computed near-clashes cause the next problem: #E1CCFF and #CCE1FF. Both sit 25° away at identical lightness, offering hue difference with no luminance difference.
Lavender and thistle fail for the same reason at closer range. Any pale violet within a few points of periwinkle produces a boundary the eye can’t find.
Dark surfaces are the unusual failure here. Unlike most pale colors, periwinkle has no workable dark-mode form at saturation, so a near-black theme needs the tint ramp rather than a brightened base.
Does Periwinkle Meet Accessibility Standards?
Periwinkle fails as a foreground on white and passes as a background for dark text. The 1.54:1 measurement falls below the 4.5:1 body-text threshold and the 3:1 non-text floor set by the W3C.
Periwinkle lands as follows across the common pairings:
- #CCCCFF on white: 1.54:1, fails AA and the 3:1 non-text floor
- White on #CCCCFF: 1.54:1, fails
- Black on #CCCCFF: 13.65:1, passes AAA
- #666680 on white: 6.1:1, passes AA
- #3333FF on #0C0C1D: 2.82:1, fails
That last figure is the one worth flagging in a design review. A dark theme built by brightening periwinkle produces a value that fails, so the dark-mode token has to come from the light end of the ramp instead.
Tritanopia is the relevant deficiency. Blue-yellow deficiency shifts periwinkle toward a pale gray-pink, which collapses its separation from the lavender and thistle family.
A second cue should always accompany the hue in a category system. Several pale colors converging under simulation is a common failure, and periwinkle sits in the middle of a crowded region.
How Can You Convert Periwinkle Between HEX, RGB, HSL, CMYK, and Other Color Formats?
Each format describes the same pale blue from a different angle:
- HEX #CCCCFF: the default in design files and CSS, shortenable to #CCF
- RGB rgb(204, 204, 255): identical red and green channels with blue at maximum
- RGBA rgba(204, 204, 255, 1): adds alpha for tinted overlays and selection fills
- HSL hsl(240, 100%, 90%): hue lands on exactly 240°, the pure blue axis
- HSB 240, 20, 100: the picker model, reporting saturation very differently
- CMYK 20, 20, 0, 0: equal cyan and magenta with no yellow
The three-character shorthand is a useful marker. #CCF expands to #CCCCFF, and any color expressible in three characters sits on a coarse grid that predates modern displays, which is why so many early web palettes look like this.
HSL is what makes the ramp predictable. Holding hue at 240° and stepping lightness generates the whole family, including the AA-compliant #666680 that the base can never be.
The HSL and HSB saturation gap deserves attention in handoff. HSL reports 100% and HSB reports 20% for the same color, so a number copied between the two produces a completely different result.
Wrapping Up
Periwinkle is a pure blue that reads violet, and it’s a surface color rather than a text or dark-mode color. #CCCCFF works for canvases, tags, and buttons with near-black labels, #666680 handles anything read on white, #1414FF supplies the accent the pastel lacks, and a dark theme needs the tint ramp rather than a brightened base, since the saturated form fails at 2.82:1.
Those steps don’t need to be derived by hand. Open Visily and use its AI-powered design tools to generate the periwinkle tint and shade ladder, separate light and dark theme values, and matched accent pairings across the entire design in one pass.
