Skip to content
Build a color system

Dark mode palette generator

Enter one brand color and get a readable, consistent dark-mode palette, with the light mode alongside and every pair checked for contrast.

One brand color in. A complete light and dark UI color system out.

How it works

  1. Enter your brand color. Any hex, rgb, hsl, oklch, or color name works.
  2. The preview opens in dark mode. Switch to light to compare, and read the accessibility results for both.
  3. Copy the CSS export. Light values are in :root and dark values are in .dark; add the “dark” class to the html element to switch.

Questions

How is the dark palette chosen?

Dark surfaces come from a neutral scale with a faint hint of your color, text is kept readable on them, and your brand color gets a mode-specific variant where contrast needs it.

Can I get only the dark values?

Yes. The brand color to dark mode tool exports just the dark half and explains each choice.

Does it follow the visitor’s system setting?

It can. Turn on the option in the CSS export to add a prefers-color-scheme rule.

Is my color sent anywhere?

No. Everything is worked out in your browser.