Fading Night
#3377cc
Deep, muted purple-blue for subdued focus states
About Fading Night
Fading Night looks like a twilight screen that's gone a little smoky. It's a purple with a cool, nocturnal undertone, but it doesn't lean as bright or primary as Bluetiful, and it doesn't have Flood's rain-washed heaviness. Compared with Blue Öyster Cult, it feels slightly deeper and more muted, so it reads more like atmosphere than open color.
I use it when I want cool, restrained accents that still show up crisply on light UI surfaces. It's solid for dashboards and finance apps when you need a link, focus ring, or secondary button that feels controlled, not cheerful. In product settings for fintech, admin tables, and editorial media thumbnails, it lands as the one you reach for when you want authority without that lighter, airier blue-purple bounce.
One note: on very gray backgrounds it can trend a bit flat, so I'll usually pair it with a slightly warmer lavender or a clean near-white for separation.
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.