Swatch to CSS Variables
Paste hex swatches and export clean CSS custom properties.
Palette to CSS variables
A palette is only useful in code when it is defined as reusable tokens. This tool takes your hex swatches and exports them as clean CSS custom properties, so your colors live in one place and update everywhere with a change.
Centralizing colors as variables is the foundation of maintainable, themeable CSS. Paste your swatches, get a tidy :root block of custom properties, and copy it into your stylesheet as the single source of truth for your palette.
Copy-ready variables
It exports your swatches as :root custom properties, ready to drop into a stylesheet as reusable tokens. Generated in your browser, nothing uploaded.
Frequently asked questions
What does the swatch to CSS variables converter do?
It converts pasted hex colors into a CSS :root block with custom properties.
How are the variables named?
In order: --color-1, --color-2, and so on, inside a :root block, with hex values lowercased. Rename them to purposes like --brand or --surface once you know their roles.
How do I paste the colors?
Any text containing hex codes works; each #rgb or #rrggbb value is picked out in order, so you can paste a list, CSS, or notes.
Why use CSS variables for colors?
Changing one variable updates every place it is used, and redefining the same names in a dark theme block switches the whole palette at once.
Related tools
Need a polished visual system? Bushe can help turn rough ideas into production-ready design.