Periwinkle Hex Code

Periwinkle Is #CCCCFF

Periwinkle is a pale blue-violet named after the flower. Its high luminance makes it a background colour rather than a text one — the contrast against white is far too low to read.

Every Format

Format	Value
HEX	#CCCCFF
RGB	rgb(204, 204, 255)
HSL	hsl(240, 100%, 90%)
CMYK	20%, 20%, 0%, 0%
Nearest Tailwind	indigo-200 (#c7d2fe)

The HSL reading is the useful one for design work: hue 240°, saturation 100%, lightness 90%. Adjusting lightness while holding hue and saturation is how you build a consistent ramp; adjusting the hex directly is guesswork.

Contrast and Accessibility

Combination	Ratio	WCAG
Periwinkle text on white	1.54:1	fails
Periwinkle text on black	13.65:1	AAA
White text on periwinkle	1.54:1	fails

WCAG AA requires 4.5:1 for body text and 3:1 for large text (18pt, or 14pt bold). AAA requires 7:1. Periwinkle fails AA on white at any size. Use it for backgrounds, borders and large decorative shapes rather than text.

A Ramp Built From It

Step	Hex
100	#666680
200	#8888aa
300	#aaaad5
400	#CCCCFF
500	#d5d5ff
600	#ddddff
700	#e6e6ff

The dark end comes from mixing toward black and the light end from mixing toward white. Note that a perceptually even ramp is not an arithmetically even one — equal steps in lightness look uneven, which is why the middle of a hand-built ramp usually needs adjusting by eye.

Harmonies

Relationship	Hex
Base	#CCCCFF
Complementary	#ffffcc
Triadic	#ffcccc and #ccffcc

A complementary pair is the highest-contrast combination on the colour wheel, which makes it excellent for a single accent and exhausting for a whole interface. The usual approach is one dominant colour, one complement used sparingly, and neutrals for everything else.

Print Reproduction

The CMYK values above are a mathematical conversion, not a press-ready specification. Screen colours are emitted light and print colours are reflected ink, and the screen gamut is larger — highly saturated values simply do not exist in CMYK.

For brand-critical work, specify a Pantone reference and let the printer match it rather than trusting a CMYK conversion.

A Full Ramp From This Colour

Design systems settle on a 50–900 scale because it covers backgrounds, borders, text and states without anyone reaching outside the palette. Mixing toward white and black rather than adjusting HSL lightness keeps more of the hue's character:

Step	Colour	Contrast on white	Safe for
50	#F5F9FF	1.06:1	backgrounds and fills
100	#EBF3FE	1.12:1	backgrounds and fills
200	#CEE0FD	1.34:1	backgrounds and fills
300	#B1CDFB	1.62:1	backgrounds and fills
400	#76A8F9	2.40:1	backgrounds and fills
500	#3B82F6	3.68:1	large text, borders
600	#326FD1	4.85:1	body text on white
700	#295BAC	6.59:1	body text on white
800	#204887	8.98:1	body text on white
900	#183462	12.31:1	body text on white

The contrast column is the one that decides usage. Steps below 3:1 cannot carry text at any size and belong in fills and dividers; steps at 4.5:1 and above are safe for body copy.

Adjusting It

Base colour in HSL is hsl(217, 91%, 60%). Two useful moves:

``css /* +10% lightness, same hue */ --lighter: #6da2f8; /* −10% lightness */ --darker: #0b64f4; ``

Raising lightness also drops perceived saturation, so a lightened colour reads greyer than its numbers suggest. Adding 5–10% saturation alongside every 20% of lightness keeps the ramp looking like one hue rather than a fade to grey.