styleColor Scheme

Midnight Dark

A deep midnight palette with rich dark blues and silver starlight accents. Evokes the quiet sophistication of a clear night sky.

#020617
#0f172a
#ffffff
#94a3b8
#6366f1

Color Breakdown

Role

background

Name

Slate 950

Hex

#020617

Tailwind

bg-slate-950

Role

surface

Name

Slate 900

Hex

#0f172a

Tailwind

bg-slate-900

Role

primary

Name

White

Hex

#ffffff

Tailwind

text-white

Role

secondary

Name

Slate 400

Hex

#94a3b8

Tailwind

text-slate-400

Role

accent

Name

Indigo 500

Hex

#6366f1

Tailwind

bg-indigo-500

Live Preview

Welcome Back

This is a live preview of the Midnight Dark color scheme applied to a sample card component. See how the colors work together in a realistic UI context.

Design Rationale

Near-black backgrounds with silver-gray text create a starlit night atmosphere. Indigo accents glow like distant celestial objects against the darkness.

Use Cases

Astronomy websitesNight event platformsPremium dark UIs

CSS Variables

CSS
:root {
  --background: #020617;
  --surface: #0f172a;
  --primary: #ffffff;
  --secondary: #94a3b8;
  --accent: #6366f1;
}

Tailwind Config

JavaScript
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'midnight-dark': {
  'background': '#020617',  // bg-slate-950
  'surface': '#0f172a',  // bg-slate-900
  'primary': '#ffffff',  // text-white
  'secondary': '#94a3b8',  // text-slate-400
  'accent': '#6366f1',  // bg-indigo-500
        },
      },
    },
  },
};

Related Color Schemes

Build with This Scheme

Use our palette generator to customize and extend this color scheme for your project.

Open Palette Generator

Frequently Asked Questions

Why do dark themes feel premium?
Dark palettes reduce visual noise and create a focused, cinematic experience that many users associate with luxury and sophistication.