What colors are in the Slate Analytics palette?

The Slate Analytics palette has 5 colors: #101418, #232A33, #3E7BD6, #8FB4E8, #EDF1F6.

Where can I use this palette?

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

Is the Slate Analytics palette accessible?

Its darkest and lightest colors have a contrast ratio of 16.31: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 Slate Analytics palette?

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

Text #101418 Graphite Secondary #232A33 Gunmetal Gray Primary #3E7BD6 True Blue Accent #8FB4E8 Maya Blue Surface #EDF1F6 Cool White

Slate Analytics

Minimal Data dashboards 5 colors

A cool slate scaffold with exactly one blue that survives next to a dozen chart series. The neutrals stay legible under small numeric type, and the ink is dark enough for a dense table.

Open in generator All palettes

Text Graphite — #101418

Secondary Gunmetal Gray — #232A33

Primary True Blue — #3E7BD6

Accent Maya Blue — #8FB4E8

Surface Cool White — #EDF1F6

Contrast matrix

Text on Surface 16.31 AAA

Primary on Surface 3.70 AA Large

Text on Secondary 1.28 Fail

Surface on Primary 3.70 AA Large

Accent on Text 8.69 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: #101418;
  --secondary: #232A33;
  --primary: #3E7BD6;
  --accent: #8FB4E8;
  --surface: #EDF1F6;
}

$slate-analytics-text: #101418;
$slate-analytics-secondary: #232A33;
$slate-analytics-primary: #3E7BD6;
$slate-analytics-accent: #8FB4E8;
$slate-analytics-surface: #EDF1F6;

// tailwind.config.js — theme.extend.colors
colors: {
  'slate-analytics': {
    'text': '#101418',
    'secondary': '#232A33',
    'primary': '#3E7BD6',
    'accent': '#8FB4E8',
    'surface': '#EDF1F6',
  },
}

{
    "slate-analytics": {
        "text": {
            "value": "#101418",
            "type": "color"
        },
        "secondary": {
            "value": "#232A33",
            "type": "color"
        },
        "primary": {
            "value": "#3E7BD6",
            "type": "color"
        },
        "accent": {
            "value": "#8FB4E8",
            "type": "color"
        },
        "surface": {
            "value": "#EDF1F6",
            "type": "color"
        }
    }
}

{
    "text": "#101418",
    "secondary": "#232A33",
    "primary": "#3E7BD6",
    "accent": "#8FB4E8",
    "surface": "#EDF1F6"
}

/* Paste into Canva → Brand Kit → Brand Colors */
#101418
#232A33
#3E7BD6
#8FB4E8
#EDF1F6

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.

Slate Analytics

Contrast matrix

Export tokens

How the roles work

Related palettes