Sail Into the Horizon
#a3bbdc
Soft lavender-blue for calmer, brighter purple layouts
About Sail Into the Horizon
I keep catching Sail Into the Horizon on the rim of a window at dusk, where lavender starts to gray out but never goes flat. It's lighter than Mont Blanc, less foggy than Sailor Boy, and it doesn't feel as blue-cool and desaturated as Blue Lips. This one reads as a soft, slightly smoky periwinkle with a gentler undertone, like the purple is there to support the layout, not to lead it.
For me it's the one you reach for when you need separation in health and wellness interfaces without that chilly periwinkle edge. Use it behind filters and secondary buttons, in onboarding step indicators, and on charts where you want category grouping that doesn't shout. It also shows up well in skincare packaging for "calm" lines, and in product UI for subscriptions where the tint has to stay friendly under gradients.
Pair it with crisp off-whites and medium slate so the purple doesn't drift toward near-neutral, and watch it against very warm creams or it can start to feel a touch washed.
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.
Similar colors
Create a gradient with Sail Into the Horizon
Open the generator with this color pre-loaded.
Start creating