Should dark mode just invert the light palette?

No. Inverting RGB or flipping HSL lightness breaks hue relationships and contrast. In OKLCH you invert perceived lightness deliberately (surfaces go to L 0.15–0.30, text to L 0.85–0.97), keep the hue, and reduce chroma slightly because saturated colors vibrate against dark backgrounds.

What contrast does dark mode text need?

The same WCAG targets: 4.5:1 for body text at AA. Pure white on pure black (21:1) passes easily but can feel harsh and halate for readers with astigmatism; an off-white around L 0.90–0.95 on a surface around L 0.18–0.25 is usually more comfortable while staying well above the threshold. APCA models this polarity difference explicitly.

Why do brand colors look neon in dark mode?

Saturated colors appear more intense against dark surroundings at the same chroma. Lower chroma by roughly 10–25% for dark surfaces and accents, and raise lightness a little, until the dark variant carries the same visual weight as the light one.

Dark Mode Color Palettes — Building Dark Themes in OKLCH

Dark mode color palettes

How to build a dark mode palette that keeps contrast and brand hue: invert lightness in OKLCH, compensate chroma, and check pairs with WCAG and APCA.

Why naive inversion fails

The tempting shortcut — invert the light theme, or mirror every color's lightness — produces dark UIs that feel wrong in three predictable ways: brand blues turn electric, greys go muddy, and text either glares or sinks. The reason is that perceived lightness, chroma and contrast do not mirror symmetrically. OKLCH gives you independent control of exactly those three things, which is why a deliberate mapping beats an inversion.

The OKLCH method

Move surfaces down, not to black. Large backgrounds live around L 0.15–0.25 (a slate like #0f172a sits at L 0.208). Pure black removes your ability to layer cards and borders above the background.
Bring text up, not to white. Body text around L 0.88–0.95 keeps contrast enormous without the halation of pure white on near-black. A light surface like #f8fafc (L 0.984) becomes your text color's neighbourhood, slightly dimmed.
Keep hue, trim chroma. Your brand hue stays the same number — that is what makes the theme recognisably yours. Reduce chroma about 10–25% and lift lightness a little for accents, because saturated colors gain intensity against dark backgrounds.
Rebuild elevation with lightness steps. In dark mode, “higher” surfaces are lighter (the opposite of shadows). Even L steps — 0.18, 0.22, 0.26 — give a calm elevation ladder because OKLCH steps are perceptually even.

Check the pairs, both metrics

Dark pairs are where WCAG ratios and APCA disagree most: WCAG treats white-on-black and black-on-white as the same ratio, while APCA (designed with polarity in mind) rates light text on dark backgrounds differently from the reverse. Use WCAG 2.2 for compliance and APCA as the readability sanity check — the WCAG vs APCA guide covers the details, and every pair can be tested in the contrast checker before it ships.

From guide to tokens

Once the mapping feels right for a few seed colors, let Studio generate the full dark ramp set — surfaces, text, borders, accents — from the same OKLCH values and export light and dark themes as matching CSS variables or Tailwind tokens. The scales guide explains how the underlying 50–950 ramps are built, so both themes share one system instead of drifting apart.

FAQ

Should dark mode just invert the light palette?: No. Inverting RGB or flipping HSL lightness breaks hue relationships and contrast. In OKLCH you invert perceived lightness deliberately (surfaces go to L 0.15–0.30, text to L 0.85–0.97), keep the hue, and reduce chroma slightly because saturated colors vibrate against dark backgrounds.
What contrast does dark mode text need?: The same WCAG targets: 4.5:1 for body text at AA. Pure white on pure black (21:1) passes easily but can feel harsh and halate for readers with astigmatism; an off-white around L 0.90–0.95 on a surface around L 0.18–0.25 is usually more comfortable while staying well above the threshold. APCA models this polarity difference explicitly.
Why do brand colors look neon in dark mode?: Saturated colors appear more intense against dark surroundings at the same chroma. Lower chroma by roughly 10–25% for dark surfaces and accents, and raise lightness a little, until the dark variant carries the same visual weight as the light one.