Hokkaido Lavender
#7736d9
Lighter lavender-violet for airy, modern UI accents
About Hokkaido Lavender
On my monitor, Hokkaido Lavender reads like a purple that's been gently lightened, not washed out. It has a calm, misty presence with a clear violet core, sitting closer to lilac than the deeper, magenta-leaning Dreamscape Purple or the more electric Blurple. Compared to Candy Grape Fizz, it gives up some of that punchy saturation, so it feels more controlled than attention-grabbing.
I reach for it in brand systems and UI states where you want purple to look intentional but not loud, especially in dashboards and media product UIs for creators, music and video platforms, and editorial page controls. It's the shade I'd use for key highlights, filters, or focus rings where the hierarchy matters and you still want a soft, friendly mood.
Pair it with warm creams and muted grays, or let it sit next to berry accents so the contrast stays crisp. If you put it beside Candy Grape Fizz, use Hokkaido Lavender for the background role and save the brighter purple for the single active moment. the one you reach for when you need purple with restraint.
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.
Similar colors
Create a gradient with Hokkaido Lavender
Open the generator with this color pre-loaded.
Start creating