Color theme maker

Build a light and dark theme and export it as 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

1

Choose your colors

Set the base, surface, text and accent colors for your theme.

2

Check both modes

Preview the palette in light and dark to make sure both read well.

3

Export CSS variables

Copy the custom properties and drop them into your stylesheet.

Frequent questions

What does it export?

A set of CSS custom properties (variables) for your colors, ready to paste into a :root block and reference throughout your styles.

Does it cover light and dark mode?

Yes. You design both variants together, so your light and dark themes stay consistent.

Explore more tools

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.

Blend two colors and get the steps between.

Generate organic SVG blob shapes.

Palette from image

Extract dominant colors from an image.

Color blindness simulator

Preview colors for different vision types.