Nordic Noir

#003344

Deep, neutral-teal blue with noir contrast

Save
Share

About Nordic Noir

On my screen, Nordic Noir looks like deep winter ink that stayed cool instead of going murky. It's darker than but it doesn't feel as withdrawn as . Compared with Into the Night, it holds a steadier, denser presence, with less of that near-black "sealed door" mood.

I use Nordic Noir when I need the one you reach for for a header bar or panel fill that reads serious without turning clinical. It's great in dashboards and finance apps too, but unlike Into the Night, it keeps its blue character a bit longer, so the UI feels grounded rather than swallowed. In security consoles, incident timelines, and admin tables, it behaves like a stable stage for bright states and crisp type.

Quick note: it can feel heavy if your surrounding blues are lighter. I usually balance it with cooler grays or thin borders so the layout breathes.

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
13.49:1AAA

On Gray 100 #f5f5f5

Aa
12.37:1AAA

On Gray 900 #18181b

Aa
1.31:1Fail

On Black #000000

Aa
1.56: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.

Similar colors

Create a gradient with Nordic Noir

Open the generator with this color pre-loaded.

Start creating