What roles does the palette assign?

It produces five purpose-built colors: a near-black background, two slightly lighter surface layers for cards and raised elements, a vivid accent for buttons and links, and a near-white text color. Each is labeled so you know where it goes.

How is the contrast ratio calculated?

The tool computes WCAG relative luminance for the text and background colors and divides the lighter plus 0.05 by the darker plus 0.05. A result of 4.5 or higher passes WCAG AA for normal text, and 7 or higher passes AAA.

Why use layered surfaces instead of one dark color?

In dark UIs, elevation is shown by making raised surfaces slightly lighter rather than by shadows alone. Two surface layers let you separate the page background, cards, and modals so the interface reads with depth.

Why not use pure black?

Pure black with pure white text creates harsh contrast that can cause eye strain and halation. A very dark gray background with an off-white text color is gentler while still passing accessibility checks.

What format are the colors?

Each color is shown as a hex code such as #121417, ready to drop into CSS variables or a design tool. Values are computed in HSL and converted to hex.

Dark Mode Color Palette Generator

This generator builds complete dark-mode palettes with each color assigned a UI role — background, surfaces, accent, and text — and verifies the text-on- background contrast against WCAG so your dark theme is actually readable.

How it works

A single base hue is chosen, then five role colors are derived in HSL:

Background: the base hue at very low lightness (about 8–12%) with low saturation — a near-black that is not pure black.
Surface 1 and 2: the same hue a few lightness steps higher, giving two elevation layers for cards and modals.
Accent: a vivid color at higher saturation and mid lightness for buttons and links.
Text: a near-white at very high lightness.

The text and background are then run through the WCAG contrast formula:

ratio = (Llighter + 0.05) / (Ldarker + 0.05)

where L is relative luminance. AA requires 4.5, AAA requires 7.

Tips and notes

Use the two surface colors for elevation rather than relying only on shadows. The accent should be reserved for interactive elements so it stands out against the muted background. If the reported ratio dips below 4.5, regenerate — the text lightness will land higher and pass. Click any swatch to copy its hex.