What colors are in the Muted Dashboard palette?

The Muted Dashboard palette has 5 colors: #14161A, #2A2F38, #5B6B7C, #A9B6C4, #EEF2F6.

Where can I use this palette?

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

Is the Muted Dashboard palette accessible?

Its darkest and lightest colors have a contrast ratio of 16.10: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 Muted Dashboard palette?

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

Text #14161A Graphite Secondary #2A2F38 Gunmetal Gray Primary #5B6B7C Dim Gray Accent #A9B6C4 Ash Gray Surface #EEF2F6 Cool White

Muted Dashboard

Minimal Data-heavy admin 5 colors

Five steps of one cool grey. Charts borrow saturation only where a series needs to be told apart.

Open in generator All palettes

Text Graphite — #14161A

Secondary Gunmetal Gray — #2A2F38

Primary Dim Gray — #5B6B7C

Accent Ash Gray — #A9B6C4

Surface Cool White — #EEF2F6

Contrast matrix

Text on Surface 16.10 AAA

Primary on Surface 4.86 AA

Text on Secondary 1.35 Fail

Surface on Primary 4.86 AA

Accent on Text 8.78 AAA

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: #14161A;
  --secondary: #2A2F38;
  --primary: #5B6B7C;
  --accent: #A9B6C4;
  --surface: #EEF2F6;
}

$muted-dashboard-text: #14161A;
$muted-dashboard-secondary: #2A2F38;
$muted-dashboard-primary: #5B6B7C;
$muted-dashboard-accent: #A9B6C4;
$muted-dashboard-surface: #EEF2F6;

// tailwind.config.js — theme.extend.colors
colors: {
  'muted-dashboard': {
    'text': '#14161A',
    'secondary': '#2A2F38',
    'primary': '#5B6B7C',
    'accent': '#A9B6C4',
    'surface': '#EEF2F6',
  },
}

{
    "muted-dashboard": {
        "text": {
            "value": "#14161A",
            "type": "color"
        },
        "secondary": {
            "value": "#2A2F38",
            "type": "color"
        },
        "primary": {
            "value": "#5B6B7C",
            "type": "color"
        },
        "accent": {
            "value": "#A9B6C4",
            "type": "color"
        },
        "surface": {
            "value": "#EEF2F6",
            "type": "color"
        }
    }
}

{
    "text": "#14161A",
    "secondary": "#2A2F38",
    "primary": "#5B6B7C",
    "accent": "#A9B6C4",
    "surface": "#EEF2F6"
}

/* Paste into Canva → Brand Kit → Brand Colors */
#14161A
#2A2F38
#5B6B7C
#A9B6C4
#EEF2F6

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.

Muted Dashboard

Contrast matrix

Export tokens

How the roles work

Related palettes