Midnight Brand

A deep midnight palette for premium SaaS: a near-black canvas, soft periwinkle primary, and amber accent for high-contrast CTAs.

darkmodernpremiummodernluxurybold

When to Reach for Midnight Brand

Midnight Brand suits products that want a premium, low-light feel: dashboards, fintech tools, and B2B sites where the interface stays on screen for hours. The near-black canvas reduces glare, and the periwinkle primary reads clearly against it without the loudness of a saturated blue. Amber belongs to alerts and the single conversion action, not to decorative fills.

Keep large color areas to the canvas and surface tones, which are close in value, and reserve the periwinkle and amber for interactive states. That restraint is what makes the palette feel expensive. Text sits in the pale lavender-white of the text token, and secondary information drops to the muted slate. The contrast checker on this page confirms which pairs pass AA at small sizes before you ship.

Palette colors

Every color role with HEX, RGB, HSL, and OKLCH values. Click any value to copy.

Background

rgb(11, 15, 26)

hsl(224, 41%, 7%)

oklch(17.0% 0.024 268.5)

Text

rgb(232, 236, 244)

hsl(220, 35%, 93%)

oklch(94.2% 0.012 264.5)

Primary

rgb(124, 158, 255)

hsl(224, 100%, 74%)

oklch(71.6% 0.147 268.0)

Secondary

rgb(74, 85, 104)

hsl(218, 17%, 35%)

oklch(44.7% 0.034 261.3)

Accent

rgb(246, 173, 85)

hsl(33, 90%, 65%)

oklch(80.1% 0.134 68.8)

Surface

rgb(20, 26, 42)

hsl(224, 35%, 12%)

oklch(22.0% 0.033 267.9)

Border

rgb(31, 41, 55)

hsl(215, 28%, 17%)

oklch(27.8% 0.030 256.8)

Muted

rgb(107, 114, 128)

hsl(220, 9%, 46%)

oklch(55.1% 0.023 264.4)

WCAG contrast checks

Three semantic pairs evaluated against WCAG 2.2 AA (4.5:1 for normal text).

Text on background

Ratio 16.16:1

AA pass

Primary on background

Ratio 7.46:1

AA pass

Accent on background

Ratio 10.05:1

AA pass

Export tokens

Six formats covering most design system workflows. Each copies cleanly to your clipboard.

tokens.css

:root {
  --color-background: #0B0F1A;
  --color-foreground: #E8ECF4;
  --color-primary: #7C9EFF;
  --color-secondary: #4A5568;
  --color-accent: #F6AD55;
  --color-surface: #141A2A;
  --color-border: #1F2937;
  --color-muted: #6B7280;
}

Related Palettes

Ocean Deep

A deep ocean palette: midnight-navy canvas, sky-blue primary, amber accent. For premium tech and finance brands.

Cyber Violet

A vivid cyber palette: deep violet canvas, electric purple primary, cyan accent. For bold creative and Web3 brands.

Terminal Green

A terminal-inspired dark palette: deep black-green canvas, phosphor-green primary, amber accent for warnings. Built for developer tools.

Steel Blue

A cool steel-blue palette: gray-blue canvas, dark navy text, electric blue primary, cyan accent. For SaaS dashboards, fintech, and enterprise tools.