Uwarp

Dark surface preview

Body and secondary text sit on surface, surface-dim, and surface-container.

Primary action

Contrast check

Body text13.97:1 AAA
Secondary text8.66:1 AAA
Primary on surface9.65:1 AAA
On-primary10.34:1 AAA

Help Us Improve

—

(—)

Dark theme color palette generator

Build a dark surface and on-surface palette from a seed color. Check contrast. Local-first, no signup.

What is a dark theme color palette generator?

A dark theme color palette generator builds surface, on-surface, and primary tokens for a dark UI from a seed color. This page also reports WCAG contrast for body text, secondary text, and primary on that surface.

Dark theme palette features

Dark surfaces with a contrast check.

  • Dark surfaces

    Surface, surface-dim, surface-bright, and surface-container share the seed hue.

  • On-surface text

    On-surface and on-surface-variant are tuned for reading on the dark field.

  • Contrast grades

    See AA / AAA / fail for body, secondary, and primary pairs as you change the seed.

  • CSS export

    Copy variables scoped to [data-theme="dark"].

How to generate a dark theme palette

Three steps from a seed hex to a checked dark theme.

  1. Pick an accent

    The seed tints primary and the dark surface hue.

  2. Read the contrast row

    Aim for 4.5:1 on body text. Adjust the seed if a pair fails.

  3. Copy CSS

    Paste the dark-theme variables into your stylesheet.

Great for

Dark UI starting points.

  • Product dark mode

    Stand up surface tokens before a full design-system pass.

  • Accessibility review

    Catch weak on-surface contrast before you ship.

  • Brand accents at night

    See how a brand hex behaves on a dark field.

Why use this generator

Dark tokens plus a live contrast check.

  • Free to use

    No signup. Tokens update with the seed.

  • Contrast in view

    You see AA/AAA grades next to the export, not in a second tool.

  • Local-first

    Palette math stays in the browser.

Technical details

How the dark theme tokens are built.
Surfaces
Low-lightness HSL neutrals tinted with the seed hue.
Contrast
WCAG 2 relative luminance. AA is 4.5:1 for body text; AA Large is 3:1.
Export
CSS custom properties on [data-theme="dark"].

Sources & References

Contrast and dark-surface references used by this palette.
  • “The visual presentation of text and images of text has a contrast ratio of at least 4.5:1.”
    — W3C — WCAG 2.2 Contrast (Minimum)

    W3C — Contrast (Minimum): The contrast row grades body text on the generated dark surface against this threshold. w3.org/WAI/WCAG22/Understanding/contrast-minimum.html

  • “Dark theme surfaces use a range of elevation tones rather than a single black fill.”
    — Material Design 3 — Dark theme

    Material Design 3 — Dark theme: Surface, surface-dim, and surface-container follow that stepped-dark-surface idea. m3.material.io/styles/color/system/overview

Frequently Asked Questions

Quick answers about this tool—open a question to read more.