CSS Theme Customizer

Visually create a custom color theme for your projects. Generate and download a complete set of CSS variables for light and dark modes.

Live Preview

See your theme in action.

Theme Preview

This is how your components will look.

Name

Toggle me

Color Controls

background Light

foreground Light

background Dark

foreground Dark

primary

primary Foreground

secondary

secondary Foreground

accent

accent Foreground

muted

muted Foreground

muted Dark

muted Foreground Dark

border Light

border Dark

Generated CSS

:root {
--background: 0 0% 100%;
    --foreground: 223 84% 5%;
    --card: 0 0% 100%;
    --card-foreground: 223 84% 5%;
    --popover: 0 0% 100%;
    --popover-foreground: 223 84% 5%;
    --primary: 217 91% 60%;
    --primary-foreground: 0 0% 98%;
    --secondary: 210 40% 96%;
    --secondary-foreground: 222 47% 11%;
    --muted: 210 40% 96%;
    --muted-foreground: 215 16% 47%;
    --accent: 210 40% 96%;
    --accent-foreground: 222 47% 11%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214 32% 91%;
    --input: 214 32% 91%;
    --ring: 217 91% 60%;
}

.dark {
--background: 223 84% 5%;
    --foreground: 0 0% 98%;
    --card: 223 84% 5%;
    --card-foreground: 0 0% 98%;
    --popover: 223 84% 5%;
    --popover-foreground: 0 0% 98%;
    --primary: 217 91% 60%;
    --primary-foreground: 0 0% 98%;
    --secondary: 210 40% 96%;
    --secondary-foreground: 222 47% 11%;
    --muted: 217 33% 17%;
    --muted-foreground: 215 20% 65%;
    --accent: 210 40% 96%;
    --accent-foreground: 222 47% 11%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217 33% 17%;
    --input: 217 33% 17%;
    --ring: 217 91% 60%;
}

How It Works

This tool helps you build a color palette and generates a corresponding CSS file compatible with CSS Variables, perfect for theming modern web applications. It's particularly useful for projects using frameworks like Tailwind CSS with a `globals.css` file. Simply pick your colors, see the live preview, and then copy or download the CSS to use in your own project.

Live Preview

Theme Preview

Color Controls

Generated CSS

How It Works

Frequently Asked Questions

How do I use the generated CSS?

What are HSL color values?