Mystic Blue

#48a8d0

Deeper, grayer blue for grounded interfaces

Save
Share

About Mystic Blue

I keep coming back to Mystic Blue when I want that "blue on purpose" feeling without the punchiness of a brighter, more saturated neighbor. Compared to , it doesn't float back as softly, and compared to it holds more weight instead of staying airy. It's cooler and deeper than too, so it anchors controls and links with a calmer signal.

In UI terms, I'd use Mystic Blue for dashboards and finance apps where status, filtering, and secondary actions need to read clearly on light surfaces. Think SaaS analytics, health monitoring screens, fintech transaction views, and the accent state for buttons, toggles, and interactive charts. It's the one you reach for when lighter blues start to feel like support text but you don't want the edge that brings. Pair it with mid-gray copy and crisp dividers for hierarchy that stays disciplined.

Quirk: on very warm displays it can drift toward a gentler teal, so validate it alongside your interface grays early.

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
2.70:1Fail

On Gray 100 #f5f5f5

Aa
2.47:1Fail

On Gray 900 #18181b

Aa
6.57:1AAAAA Large

On Black #000000

Aa
7.79:1AAA

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

#55a9d6
#36a5c9
#57a1ce
#59a4c1
#4ca8e0

Create a gradient with Mystic Blue

Open the generator with this color pre-loaded.

Start creating