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.

What is the Dark Mode Color Palette Generator?

Produces dark-theme color palettes — a near-black background, layered surfaces, a vivid accent, and a light text color — with WCAG contrast checked against the background. Copy hex codes for building readable dark-mode UIs. It runs free in your browser on Gera Tools, with nothing uploaded.

Dark Mode Color Palette Generator

Name: Dark Mode Color Palette Generator
Creator: Gera Tools
License: https://creativecommons.org/licenses/by/4.0/

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.

Why dark UI design is harder than it looks

Pure black causes halation. A pure black #000000 background with pure white #ffffff text has a contrast ratio of 21:1, which is technically the maximum. But in practice, reading bright white text on pure black causes visual fatigue and a “halation” effect where bright text appears to bleed into the dark background. Most successful dark UIs use a very dark gray (lightness 7–12%) rather than pure black, and an off-white (lightness 88–95%) rather than pure white.

Layering creates depth without color. In a light theme, shadows create elevation. In dark themes, shadows against a dark background are nearly invisible, so elevation is communicated by making raised surfaces lighter. A component sitting on the page background should be 2–4% lighter; a modal above that should be another 2–4% lighter. This is why the generator produces two surface colors rather than one.

Accent colors need adjustment for dark backgrounds. A vivid blue that passes WCAG contrast on a white background often does not pass on a dark background, because the relative luminance calculation changes significantly. Always verify the accent color on the dark background specifically, not just on white.

Applying the palette in CSS

Once you have the five hex values, map them to CSS custom properties for easy theming:

:root[data-theme="dark"] {
  --color-background:  #0e1117;  /* background */
  --color-surface-1:   #161b22;  /* cards, panels */
  --color-surface-2:   #1c2128;  /* modals, dropdowns */
  --color-accent:      #58a6ff;  /* buttons, links */
  --color-text:        #e6edf3;  /* body text */
}

Using tokens like this means switching between light and dark modes only requires toggling the data-theme attribute on the root element, while all component styles reference the same token names.

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.