Dragonfly
#314a76
Lighter violet blue with airy, balanced calm
About Dragonfly
I think of Dragonfly as the purple you notice in the margins, not the headline. It lands right in the middle of the blue-purple lane, but it stays brighter and more breathable than Bonne Nuit. Compared to Blue Funk, it feels less muted and more saturated, so it reads like a deliberate accent instead of a calm backdrop. And unlike Assassin, it doesn't go full steel. It keeps a softer undertone, more "inky ink" than fortified authority.
This is the one you reach for when you want hierarchy in product UI without looking heavy: form labels, tab indicators, secondary buttons, and chart highlights in dashboards and finance apps. In healthcare software, where you're balancing clarity and comfort, this shade shows up well on focused states, icons, and status chips. It also holds together in marketing landing modules where you need purple contrast that still feels composed.
Pair it with clean grays or cool neutrals and it stays crisp. Let it sit next to warm surfaces too long and it can start to feel slightly flat against the contrast shift.
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.