Twinkle Night
#636ca8
Lighter lavender-blue violet for airy focus
About Twinkle Night
Twinkle Night is the purple I notice when a UI needs night-sky calm, but not the heavy, office-locked feel of Loch Ness. It leans a little more toward violet than blue, and it's lighter than the steadier midtones in Scampi, with a smoother, slightly dreamy finish that doesn't drift into magenta.
I use it for moments that should feel quietly prominent: alert states and focus accents in creator and video platforms, stage markers on media timelines, and selection highlights in design systems for e-commerce and subscription dashboards. It also works well on admin tables where you want emphasis that's controlled but not grim. Compared to Bellflower's brighter, more open approach, Twinkle Night holds the edge with less punch and more duskiness.
Pair it with cool off-whites and steel grays for a clean read. If you put it next to warm creams, it can start looking a bit washed at the boundary.
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.
