What colors are in the Scandi Minimal palette?

The Scandi Minimal palette has 5 colors: #F4F1EC, #D8D2C7, #A8A29A, #5E5B55, #2E2C28.

Where can I use this palette?

It's a Neutral palette — well suited to dashboards, minimal ui, corporate sites, dark-mode surfaces.

Is the Scandi Minimal palette accessible?

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

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

Surface #F4F1EC Isabelline Primary #D8D2C7 Pastel Gray Accent #A8A29A Dark Gray Secondary #5E5B55 Ebony Text #2E2C28 Bistre

Scandi Minimal

5 colors

Open in generator All palettes

Surface Isabelline — #F4F1EC

Primary Pastel Gray — #D8D2C7

Accent Dark Gray — #A8A29A

Secondary Ebony — #5E5B55

Text Bistre — #2E2C28

Contrast matrix

Text on Surface 12.37 AAA

Primary on Surface 1.33 Fail

Text on Secondary 2.06 Fail

Surface on Primary 1.33 Fail

Accent on Text 5.51 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 {
  --surface: #F4F1EC;
  --primary: #D8D2C7;
  --accent: #A8A29A;
  --secondary: #5E5B55;
  --text: #2E2C28;
}

$scandi-minimal-surface: #F4F1EC;
$scandi-minimal-primary: #D8D2C7;
$scandi-minimal-accent: #A8A29A;
$scandi-minimal-secondary: #5E5B55;
$scandi-minimal-text: #2E2C28;

// tailwind.config.js — theme.extend.colors
colors: {
  'scandi-minimal': {
    'surface': '#F4F1EC',
    'primary': '#D8D2C7',
    'accent': '#A8A29A',
    'secondary': '#5E5B55',
    'text': '#2E2C28',
  },
}

{
    "scandi-minimal": {
        "surface": {
            "value": "#F4F1EC",
            "type": "color"
        },
        "primary": {
            "value": "#D8D2C7",
            "type": "color"
        },
        "accent": {
            "value": "#A8A29A",
            "type": "color"
        },
        "secondary": {
            "value": "#5E5B55",
            "type": "color"
        },
        "text": {
            "value": "#2E2C28",
            "type": "color"
        }
    }
}

{
    "surface": "#F4F1EC",
    "primary": "#D8D2C7",
    "accent": "#A8A29A",
    "secondary": "#5E5B55",
    "text": "#2E2C28"
}

/* Paste into Canva → Brand Kit → Brand Colors */
#F4F1EC
#D8D2C7
#A8A29A
#5E5B55
#2E2C28

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.

Scandi Minimal

Contrast matrix

Export tokens

How the roles work

Related palettes