Winter Storm

#4b7079

Deeper storm-blue for contrast-heavy, grounded UI blocks

Save
Share

About Winter Storm

Winter Storm looks like the sky right before the band of snow hits, a steel-leaning blue that's noticeably heavier than and but less ink-dark than you'd expect. It reads cooler and a touch grayer, so the teal warmth doesn't show up. Compared to , it's a clearer, steadier blue rather than that fog-soft wash.

I use it as the selected-state color and primary accent when you want the UI to feel settled, not airy. Think dashboards and finance apps that need emphasis on cards, drill-down tabs, and highlighted metrics, plus healthcare scheduling or logistics screens where the state needs to be legible without shouting. Next to , it holds its presence instead of going "watered down." Next to , it feels less muted and more cold-toned. And versus , it keeps the mood tighter and more wintry.

Pair it with near-whites and cool grays; warmer creams can make it flatten and lose that crisp, winter-edge focus.

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

On Gray 100 #f5f5f5

Aa
4.95:1AAAAA Large

On Gray 900 #18181b

Aa
3.28:1FailAA Large

On Black #000000

Aa
3.89: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

#49747f
#407577
#4f6f85
#3d7188

Create a gradient with Winter Storm

Open the generator with this color pre-loaded.

Start creating