What colors are in the Nordic Night palette?

The Nordic Night palette has 5 colors: #0E1620, #1C2A3A, #3E5C7E, #7FA0C0, #DCE6F0.

Where can I use this palette?

It's a Dark palette — well suited to dark mode, dashboards, gaming ui, hero sections.

Is the Nordic Night palette accessible?

Its darkest and lightest colors have a contrast ratio of 14.40:1. 5 color pairs in it meet WCAG AA for text.

How do I use this palette in CSS?

Copy the CSS custom properties (:root variables) from the Export section, or grab any single hex with one click.

Can I export the Nordic Night palette?

Yes — export to CSS, SCSS, Tailwind config or JSON, or copy all hex codes at once.

Text #0E1620 Graphite Secondary #1C2A3A Gunmetal Gray Primary #3E5C7E Lapis Lazuli Accent #7FA0C0 Iceberg Surface #DCE6F0 Lavender

Nordic Night

Moody Dark product UI 5 colors

A deep navy dark theme with one steel blue doing the pushing. Surfaces stay cold and low-chroma so a single accent reads as a click, not decoration.

Open in generator All palettes

Text Graphite — #0E1620

Secondary Gunmetal Gray — #1C2A3A

Primary Lapis Lazuli — #3E5C7E

Accent Iceberg — #7FA0C0

Surface Lavender — #DCE6F0

Contrast matrix

Text on Surface 14.40 AAA

Primary on Surface 5.47 AA

Text on Secondary 1.25 Fail

Surface on Primary 5.47 AA

Accent on Text 6.66 AA

Ratios are WCAG 2 contrast between the roles as assigned above. AA needs 4.5:1 for body text, 3:1 for large text.

Export tokens

:root {
  --text: #0E1620;
  --secondary: #1C2A3A;
  --primary: #3E5C7E;
  --accent: #7FA0C0;
  --surface: #DCE6F0;
}

$nordic-night-text: #0E1620;
$nordic-night-secondary: #1C2A3A;
$nordic-night-primary: #3E5C7E;
$nordic-night-accent: #7FA0C0;
$nordic-night-surface: #DCE6F0;

// tailwind.config.js — theme.extend.colors
colors: {
  'nordic-night': {
    'text': '#0E1620',
    'secondary': '#1C2A3A',
    'primary': '#3E5C7E',
    'accent': '#7FA0C0',
    'surface': '#DCE6F0',
  },
}

{
    "nordic-night": {
        "text": {
            "value": "#0E1620",
            "type": "color"
        },
        "secondary": {
            "value": "#1C2A3A",
            "type": "color"
        },
        "primary": {
            "value": "#3E5C7E",
            "type": "color"
        },
        "accent": {
            "value": "#7FA0C0",
            "type": "color"
        },
        "surface": {
            "value": "#DCE6F0",
            "type": "color"
        }
    }
}

{
    "text": "#0E1620",
    "secondary": "#1C2A3A",
    "primary": "#3E5C7E",
    "accent": "#7FA0C0",
    "surface": "#DCE6F0"
}

/* Paste into Canva → Brand Kit → Brand Colors */
#0E1620
#1C2A3A
#3E5C7E
#7FA0C0
#DCE6F0

Download for Procreate

How the roles work

SurfaceThe lightest color — page and card backgrounds.

TextThe darkest color — body text and high-contrast UI.

PrimaryThe most chromatic middle — buttons, links, the one color that pushes.

AccentThe second most chromatic — badges, highlights, states.

SecondaryEverything else — fills, borders, supporting surfaces.

Nordic Night

Contrast matrix

Export tokens

How the roles work

Related palettes