CSS variables generator
Compose a list of named colors and instantly get the matching :root { --nom: valeur; } block of CSS variables (custom properties). 100% local processing in your browser — nothing is sent to a server.
How it works
CSS variables (also called “custom properties”) centralize the colors of a design system in one place, avoiding repeated hexadecimal code across dozens of files and making future theme changes (including a dark mode) easier. Add or remove rows, adjust each color, and the :root block updates in real time, ready to paste at the top of your main stylesheet.
Are invalid variable names corrected automatically?
Yes: spaces and disallowed characters are replaced with dashes, and the name is lowercased to follow the usual CSS convention. If two variables end up with the same name, a numeric suffix is added automatically to avoid any conflict.
Can I use something other than colors as a value?
Yes, the “Value” field accepts any valid CSS value (a size in rem, a font, a gradient...), although the color picker next to it remains handy for quickly building a palette.
Privacy: the palette you build stays entirely in your browser; nothing is sent or stored on a server.