Twilight
#4e518b
Darker twilight violet for calm, high-contrast UI
About Twilight
Twilight looks like the purple you'd catch on a studio monitor right after the scene cuts, when everything's still cool but no longer dim. Compared with Dusk, it doesn't go as muted or heavy, and it keeps more color density instead of turning grayier. Against Piccadilly Purple, Twilight feels a bit deeper and more night-leaning, with less of that lavender softness. And relative to Freshly Purpleized, it holds onto its tone. Not washed, not airy.
I use Twilight when the UI needs purposeful depth without losing clarity: media playback progress and waveform accents, creator dashboards for analytics states, and editorial sidebars in dark-mode layouts where you want "on" to feel calm, not muted like Dusk. It also works well for focus rings and selection highlights in music apps because it reads cleaner than the lighter violet options while staying less steel-like than indigo-heavy purples.
If your background is very bright, keep an eye on contrast with off-white panels. Pairing it with a slightly brighter violet for hierarchy saves it from looking subdued.
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.