CSS Color Variables Generator
Generate a complete :root block of CSS custom properties from your palette. Copy and paste into any stylesheet or tokens file.
What this page covers
This page explains the workflow and links directly to the relevant section of the main Chromaforge tool.
- Exports palette colors and the full 50–950 shade scale as named CSS custom properties.
- Variable names are derived from the color role (base, complement, primary-50, primary-500, etc.).
- Works in any modern browser and any CSS preprocessor that supports custom properties.
- Copy the entire :root block in one click from the export panel.
How do I use the variables in my project?
Copy the :root block from the export panel and paste it into your main stylesheet or a dedicated tokens file. Reference any variable with var(--variable-name) in any selector, including inside calc() and color-mix().
Do the variables work alongside Tailwind?
Yes. Reference them in your Tailwind config using CSS variable syntax in the theme section, or use them as arbitrary values in class names: bg-[var(--base)] and text-[var(--primary-900)].
Can I scope the variables to a component instead of :root?
Yes. Replace :root with any selector — such as .my-component or [data-theme="brand"] — to scope the variables to that element subtree. This is useful for multi-theme setups where different sections of the page use different palettes.