Flying Fish Blue

#024aca

Deep sea-blue with violet lift for primary UI

Save
Share

About Flying Fish Blue

Flying Fish looks like a calm action button that's been lightly dipped in sea air. It's a cleaner, brighter than the frosty periwinkle feel of , and it doesn't carry that midpoint purple warmth of . Compared to the flat authority of Screen of Death, this one has more lift and a softer temperature shift toward purple without going smoky.

I use Flying Fish for UI moments that need to read clearly but stay friendly: primary CTAs, hover and focus states, and key chart series in SaaS dashboards and e-commerce admin panels. It's also great for onboarding steps where you want urgency without sounding like an error. This shade stays crisp in dense tables, but it won't feel as heavy or absolute as that "serious " look.

Quirk: if you stack it next to very saturated purples, it can start to feel a little too cool. Pair with neutrals that are slightly warm so it keeps its "light-in-the-water" edge.

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.41:1AAA

On Gray 100 #f5f5f5

Aa
6.79:1AAAAA Large

On Gray 900 #18181b

Aa
2.39:1Fail

On Black #000000

Aa
2.83: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 Flying Fish Blue

Open the generator with this color pre-loaded.

Start creating