Sapphire Siren

#662288

Cool, deep violet with blue-siren clarity

Save
Share

About Sapphire Siren

I keep noticing Sapphire Siren as that calm, deep-purple you see on a night mode panel right before your eyes stop hunting for contrast. Compared to Queens of the Dead, it feels less smoky and more neatly saturated. Versus Extraviolet, it doesn't have that lifted, neon-adjacent brightness, and it won't drift toward magenta heat. And unlike 's drier, slightly heavier ink, Sapphire Siren holds a smoother, more velvety violet core that reads richer without turning murky.

I use it as Sapphire Siren when selection states and focus rings need to look intentional but not loud, especially in dashboards and finance apps where the UI has to stay disciplined across dense tables and tight spacing. It also shows up well in streaming media layouts for chapter markers and active control highlights when you want the emphasis to stay composed on both light and dark themes. Think creator tools and analytics consoles where hover and active states should feel like one system, not a grab bag.

Quirk: on very cool grays it can look a touch more formal, so I'll pair it with neutrals that have a hint of warmth if the UI feels too restrained.

Gradient preview

See how this color looks in an animated mesh gradient.

Conversions

Click any value to copy.

Need this programmatically? Color API

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

Aa
9.77:1AAA

On Gray 100 #f5f5f5

Aa
8.96:1AAA

On Gray 900 #18181b

Aa
1.81:1Fail

On Black #000000

Aa
2.15:1Fail

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

Complementary
Analogous
Triadic
Split Complementary
Tetradic

Suggested palettes

Palettes built around this color.

4 colors
3 colors
4 colors
4 colors

Community palettes

Published palettes that include this color.

Create a gradient with Sapphire Siren

Open the generator with this color pre-loaded.

Start creating