CSS Variable Palette Builder
100% PrivateColor & Design ToolsTurn a pasted list of colors into a :root block of CSS design tokens.
Runs entirely in your browser. Your input is not uploaded to Ovatly or anywhere else.
:root {
--color-primary: #2563EB;
--color-accent: #F59E0B;
--color-ink: #1B1E23;
--color-paper: #FAFAF7;
}/* Tailwind CSS v4: paste inside your CSS file */
@theme {
--color-primary: #2563EB;
--color-accent: #F59E0B;
--color-ink: #1B1E23;
--color-paper: #FAFAF7;
}
/* Tailwind CSS v3: tailwind.config.js */
// theme: { extend: { colors: {
primary: "var(--color-primary)",
accent: "var(--color-accent)",
ink: "var(--color-ink)",
paper: "var(--color-paper)",
// } } }- 1Paste one color per line, as name: hex, or just hex values.
- 2Set the variable prefix (color by default).
- 3Check the parsed color chips for mistakes.
- 4Copy the CSS variables block or the Tailwind snippet.
Pasting the lines "primary: #2563EB" and "paper: #FAFAF7" produces :root { --color-primary: #2563EB; --color-paper: #FAFAF7; } and a Tailwind snippet whose colors point at the same variables, so CSS and utility classes can never drift apart.
- Names are normalized to lowercase kebab-case and duplicates get a numeric suffix, so --color-primary-2 signals a clash you may want to rename.
- Lines without a valid hex color are reported with their line number and excluded; nothing is silently guessed.
- The Tailwind v3 snippet is shown as a commented shape to paste into the theme.extend.colors object of tailwind.config.js, not a complete config file.
name: #HEX, name #HEX, --name: #HEX with an optional trailing semicolon, or a bare #HEX per line. Both 3-digit and 6-digit hex values work and are normalized to 6 digits.
About this tool
The CSS Variable Palette Builder turns a pasted list of colors into design tokens: a :root block of CSS custom properties plus a Tailwind snippet (v4 @theme and a v3 config form) that reference the same names. Paste colors with role names like primary or paper, or paste bare hex values and let the tool number them.
Related tools
Part of Ovatly's free tools in Color & Design Tools.