CSS Custom Properties Export

01 — What you get

Production-ready variables

Generate a palette. Click export. Get this:

:root {
  --color-bg: #F5DBC1;
  --color-text: #583819;
  --color-primary: #FC6911;
  --color-secondary: #9A7658;
  --color-muted: #D9B89D;
}

Five variables. Semantic names. Ready to paste into any stylesheet. No transformation step, no JavaScript runtime, no config file.

02 — Semantic naming

Names that describe intent

Not --blue-500. Not --color-1. Semantic names that describe what the color does, not what it looks like.

Change your palette, keep your variable names, your UI updates everywhere. Swap a warm scheme for a cool one. Every component that references --color-primary updates automatically. Zero find-and-replace. Zero broken styles.

This is how design systems work. Named decisions, not named colors.

03 — Why CSS vars win

The case for custom properties

Cascade

Override per component, per section, per media query. The cascade is your friend when your variables are semantic.

Runtime changes

Dark mode via class swap. Theme switching without a rebuild. JavaScript can update them on the fly. Try that with Sass.

No build step

No compiler. No preprocessor. No PostCSS plugin. Paste the variables, use them. The browser does the rest.

Works everywhere

React. Svelte. Vue. Astro. Plain HTML. Every framework reads CSS custom properties natively. Zero adapter code.

04 — One click copy

Sixty seconds to production

Generate a palette. Open the Export tab. Click Copy CSS Variables. Paste into your globals.css. Done.

No account required for basic CSS export. No paywall on the format your browser already understands.

Need more formats? Export to Tailwind, SCSS, design tokens, and 7 more. Or pair with COLORS.md so your AI tools use the same palette.

Export CSS variables

Generate a palette. Copy the variables. Ship it.

Start generating