Design

Color theme maker

Build a light/dark theme and export CSS variables.

Pick an accent — the neutral scale and both light/dark modes come from it.

Light
Card title
Muted supporting text.
Accent button
Dark
Card title
Muted supporting text.
Accent button

CSS variables

:root {
  --bg: #ffffff;
  --surface: #f6f7f9;
  --text: #1a1d21;
  --muted: #6b7280;
  --border: #e5e7eb;
  --accent: #3366cc;
  --accent-contrast: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0d10;
    --surface: #15181d;
    --text: #f2f4f7;
    --muted: #9aa4b2;
    --border: #2a2f37;
    --accent: #3366cc;
    --accent-contrast: #ffffff;
  }
}

How it works

Three simple steps — all in your browser.

1

Open it in your browser

Color theme maker runs entirely on your device — no upload, no account, and nothing to install.

2

Do the work

Build a light/dark theme and export CSS variables. Everything happens instantly as you go.

3

Save your result

Download or copy the output straight away. Your data never leaves your device.

Why use Color theme maker

Completely private

Color theme maker works locally in your browser — your files and text are never sent to a server.

Free, with no account

No sign-up, no trial, and no usage limits. Open the tool and start straight away.

Works on any device

Runs in any modern browser on desktop, tablet or phone — nothing to download.

Frequent questions

Is Color theme maker free to use?
Yes — every tool here is completely free, with no account, sign-up, or usage limits.
Is anything uploaded to a server?
No. Color theme maker runs entirely in your browser, so your data never leaves your device.
Do I need to install anything?
No. It works in any modern browser on desktop or mobile — there is nothing to download or install.
Does it work offline?
Once the page has loaded, the processing happens locally, so it keeps working even on a flaky connection.

Explore more tools

Colors
Convert colors between HEX, RGB and HSL.
Contrast checker
Check color contrast against WCAG AA/AAA.
Palette generator
Harmonies, tints and shades from a base color.
Gradient generator
Build linear and radial CSS gradients.
Color mixer
Blend two colors and get the steps between.
Blob generator
Generate organic SVG blob shapes.
Palette from image
Extract dominant colors from an image.
Color blindness simulator
Preview colors for different vision types.