Tangent Periwinkle

#50507f

Balanced periwinkle violet for softer focus overlays

Save
Share

About Tangent Periwinkle

Tangent Periwinkle reads like a periwinkle that got a little more structure, not just lighter purple. Compared to , it feels slightly more lavender-leaning and less night-dense, so it doesn't pull toward deeper indigo at a glance. And vs , it stays cleaner and airier, avoiding that heavier, subdued weight.

On screens, I use it for interfaces that need a confident purple accent without tipping into seriousness. It's great for media playback controls and waveform playhead ticks, where you want the highlight to feel distinct but not loud. It also works well in creator dashboards and editorial sidebars, especially for hover states, selection rings, and tab indicators in music and podcast apps. The one you reach for when you want purple to look intentional on both dark-mode chrome and cool off-whites.

One quirk: if you place it next to , this shade shows up a touch more saturated and more "ink-clean," so pick the lighter violet only when you need the gentlest, most diluted hit.

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
7.51:1AAA

On Gray 100 #f5f5f5

Aa
6.89:1AAAAA Large

On Gray 900 #18181b

Aa
2.36:1Fail

On Black #000000

Aa
2.80: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.

Similar colors

Create a gradient with Tangent Periwinkle

Open the generator with this color pre-loaded.

Start creating