What colors are in the Console Slate palette?

The Console Slate palette has 5 colors: #0E141B, #1B2733, #2CC4D6, #5A7387, #E7EDF3.

Where can I use this palette?

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

Is the Console Slate palette accessible?

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

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

Text #0E141B Graphite Secondary #1B2733 Graphite Primary #2CC4D6 Lagoon Blue Accent #5A7387 Teal Blue Surface #E7EDF3 Cool White

Console Slate

Technical Developer dashboards 5 colors

A slate-blue dark surface with one cyan primary. The accent is loud so status and alerts read at a glance against the calm chrome.

Open in generator All palettes

Text Graphite — #0E141B

Secondary Graphite — #1B2733

Primary Lagoon Blue — #2CC4D6

Accent Teal Blue — #5A7387

Surface Cool White — #E7EDF3

Contrast matrix

Text on Surface 15.69 AAA

Primary on Surface 1.79 Fail

Text on Secondary 1.22 Fail

Surface on Primary 1.79 Fail

Accent on Text 3.73 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: #0E141B;
  --secondary: #1B2733;
  --primary: #2CC4D6;
  --accent: #5A7387;
  --surface: #E7EDF3;
}

$console-slate-text: #0E141B;
$console-slate-secondary: #1B2733;
$console-slate-primary: #2CC4D6;
$console-slate-accent: #5A7387;
$console-slate-surface: #E7EDF3;

// tailwind.config.js — theme.extend.colors
colors: {
  'console-slate': {
    'text': '#0E141B',
    'secondary': '#1B2733',
    'primary': '#2CC4D6',
    'accent': '#5A7387',
    'surface': '#E7EDF3',
  },
}

{
    "console-slate": {
        "text": {
            "value": "#0E141B",
            "type": "color"
        },
        "secondary": {
            "value": "#1B2733",
            "type": "color"
        },
        "primary": {
            "value": "#2CC4D6",
            "type": "color"
        },
        "accent": {
            "value": "#5A7387",
            "type": "color"
        },
        "surface": {
            "value": "#E7EDF3",
            "type": "color"
        }
    }
}

{
    "text": "#0E141B",
    "secondary": "#1B2733",
    "primary": "#2CC4D6",
    "accent": "#5A7387",
    "surface": "#E7EDF3"
}

/* Paste into Canva → Brand Kit → Brand Colors */
#0E141B
#1B2733
#2CC4D6
#5A7387
#E7EDF3

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.

Console Slate

Contrast matrix

Export tokens

How the roles work

Related palettes