Warm Blue

#4b57db

Warmer mid purple-blue for secondary accents

Save
Share

About Warm Blue

Warm Blue looks like a purple that decided to take the blue train, not the purple one. It's medium-depth and noticeably warmer than the cooler, heavier , with a cleaner read than . Compared to , it keeps more purple in the undertone, so it doesn't feel like a straight "blue first" primary.

I use it when I need a focus state or link color that feels confident without going cold, especially in dashboards and finance apps where those accents have to stay legible but not sterile. It also works well in creator platforms and learning interfaces for buttons, hover states, and callout headers on bright surfaces. In motion mockups it behaves like the one you reach for when you want interactivity to pop without leaning neon.

Pair it with soft lilacs, warm grays, or pale cream. If you place it beside very cool steel tones, it can start to feel slightly "purplish-blue" and pull attention from your main hierarchy.

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
5.70:1AAAAA Large

On Gray 100 #f5f5f5

Aa
5.23:1AAAAA Large

On Gray 900 #18181b

Aa
3.11:1FailAA Large

On Black #000000

Aa
3.69:1FailAA Large

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 Warm Blue

Open the generator with this color pre-loaded.

Start creating