What colors are in the Nordic Minimal palette?

The Nordic Minimal palette has 5 colors: #20262E, #3E4B59, #7C8DA1, #4C86C6, #EEF1F4.

Where can I use this palette?

It's a Muted palette — well suited to editorial layouts, minimal ui, photography portfolios, modern brands.

Is the Nordic Minimal palette accessible?

Its darkest and lightest colors have a contrast ratio of 13.44:1. 2 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 Minimal palette?

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

Text #20262E Graphite Secondary #3E4B59 Outer Space Accent #7C8DA1 Light Slate Gray Primary #4C86C6 Steel Blue Surface #EEF1F4 Cool White

Nordic Minimal

Minimal Product & marketing sites 5 colors

Slate-blue neutrals with a single cold accent. Scandinavian restraint: the accent shows up once per screen, on the thing you are meant to click.

Open in generator All palettes

Text Graphite — #20262E

Secondary Outer Space — #3E4B59

Accent Light Slate Gray — #7C8DA1

Primary Steel Blue — #4C86C6

Surface Cool White — #EEF1F4

Contrast matrix

Text on Surface 13.44 AAA

Primary on Surface 3.35 AA Large

Text on Secondary 1.71 Fail

Surface on Primary 3.35 AA Large

Accent on Text 4.49 AA Large

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: #20262E;
  --secondary: #3E4B59;
  --accent: #7C8DA1;
  --primary: #4C86C6;
  --surface: #EEF1F4;
}

$nordic-minimal-text: #20262E;
$nordic-minimal-secondary: #3E4B59;
$nordic-minimal-accent: #7C8DA1;
$nordic-minimal-primary: #4C86C6;
$nordic-minimal-surface: #EEF1F4;

// tailwind.config.js — theme.extend.colors
colors: {
  'nordic-minimal': {
    'text': '#20262E',
    'secondary': '#3E4B59',
    'accent': '#7C8DA1',
    'primary': '#4C86C6',
    'surface': '#EEF1F4',
  },
}

{
    "nordic-minimal": {
        "text": {
            "value": "#20262E",
            "type": "color"
        },
        "secondary": {
            "value": "#3E4B59",
            "type": "color"
        },
        "accent": {
            "value": "#7C8DA1",
            "type": "color"
        },
        "primary": {
            "value": "#4C86C6",
            "type": "color"
        },
        "surface": {
            "value": "#EEF1F4",
            "type": "color"
        }
    }
}

{
    "text": "#20262E",
    "secondary": "#3E4B59",
    "accent": "#7C8DA1",
    "primary": "#4C86C6",
    "surface": "#EEF1F4"
}

/* Paste into Canva → Brand Kit → Brand Colors */
#20262E
#3E4B59
#7C8DA1
#4C86C6
#EEF1F4

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 Minimal

Contrast matrix

Export tokens

How the roles work

Related palettes