Viola
#966ebd
Balanced, medium violet for secondary UI sections
About Viola
Viola looks like the purple you'd mix from grape juice and a soft lilac tint. It has that dry-lilac clarity, not the deep velvet of Lavish Spending, and it doesn't push as warm as Crown Jewels. Compared to Amethyst, it reads a touch lighter and more softly held back, less "notice me" saturation, more focused color that stays readable.
I use Viola for UI accents and typography where you want purple presence without the punchy attitude: campaign landing pages, creative portfolio sites, and editorial spreads that need purple to behave like a supporting actor, not the headline. It's especially good for onboarding steps, category chips, and annotation highlights in dashboards and content platforms that still need a calm interface tone. It's also the one you reach for when Crown Jewels feels too hot and Amethyst feels too direct.
Pair it with cool grays or clean near-whites for crisp edges. With warm creams it can flatten, so keep contrast intentional.
Code snippets
Copy this color into your project.
Contrast checker
WCAG 2.1 contrast ratios. AA requires 4.5:1 for normal text, 3:1 for large. AAA requires 7:1 / 4.5:1.
On White #ffffff
On Gray 100 #f5f5f5
On Gray 900 #18181b
On Black #000000
Variations
Shades
Darker variations, created by mixing toward black.
Tints
Lighter variations, created by mixing toward white.
Tones
Muted variations, created by reducing saturation.
Hues
Hue rotations around the color wheel.
Temperatures
Warm and cool shifts of this color.
Color harmonies
Suggested palettes
Palettes built around this color.
Community palettes
Published palettes that include this color.