What colors are in the Midnight UI palette?

The Midnight UI palette has 5 colors: #0B0D12, #161A22, #5B6CF0, #3A4152, #E9ECF3.

Where can I use this palette?

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

Is the Midnight UI palette accessible?

Its darkest and lightest colors have a contrast ratio of 16.43:1. 3 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 Midnight UI palette?

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

Text #0B0D12 Jet Black Secondary #161A22 Graphite Primary #5B6CF0 Iris Accent #3A4152 Charcoal Surface #E9ECF3 Cool White

Midnight UI

Futuristic Dark-mode products 5 colors

A layered dark system: two surface tiers, one indigo primary, one desaturated text. Everything is tuned so a dark screen never becomes a black hole.

Open in generator All palettes

Text Jet Black — #0B0D12

Secondary Graphite — #161A22

Primary Iris — #5B6CF0

Accent Charcoal — #3A4152

Surface Cool White — #E9ECF3

Contrast matrix

Text on Surface 16.43 AAA

Primary on Surface 3.66 AA Large

Text on Secondary 1.12 Fail

Surface on Primary 3.66 AA Large

Accent on Text 1.90 Fail

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: #0B0D12;
  --secondary: #161A22;
  --primary: #5B6CF0;
  --accent: #3A4152;
  --surface: #E9ECF3;
}

$midnight-ui-text: #0B0D12;
$midnight-ui-secondary: #161A22;
$midnight-ui-primary: #5B6CF0;
$midnight-ui-accent: #3A4152;
$midnight-ui-surface: #E9ECF3;

// tailwind.config.js — theme.extend.colors
colors: {
  'midnight-ui': {
    'text': '#0B0D12',
    'secondary': '#161A22',
    'primary': '#5B6CF0',
    'accent': '#3A4152',
    'surface': '#E9ECF3',
  },
}

{
    "midnight-ui": {
        "text": {
            "value": "#0B0D12",
            "type": "color"
        },
        "secondary": {
            "value": "#161A22",
            "type": "color"
        },
        "primary": {
            "value": "#5B6CF0",
            "type": "color"
        },
        "accent": {
            "value": "#3A4152",
            "type": "color"
        },
        "surface": {
            "value": "#E9ECF3",
            "type": "color"
        }
    }
}

{
    "text": "#0B0D12",
    "secondary": "#161A22",
    "primary": "#5B6CF0",
    "accent": "#3A4152",
    "surface": "#E9ECF3"
}

/* Paste into Canva → Brand Kit → Brand Colors */
#0B0D12
#161A22
#5B6CF0
#3A4152
#E9ECF3

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.

Midnight UI

Contrast matrix

Export tokens

How the roles work

Related palettes