What are CSS custom properties?

CSS custom properties (variables) are defined with a -- prefix in a :root block and referenced as var(--name). They allow centralized color management that can be overridden at any scope.

How do I use the generated CSS in my project?

Copy the :root block and paste it at the top of your main CSS file. Then use var(--color-primary) etc. anywhere in your styles.

Can I export for SCSS?

Yes. Switch to the SCSS tab to get $color-name: #hex; variable declarations for Sass projects.

What is the JSON format useful for?

The JSON output is useful for design token pipelines, Style Dictionary, or passing color values to JavaScript/TypeScript theme configuration.

Are the default colors the Toolivon design system colors?

The defaults are a generic starting palette (primary, secondary, accent, background, foreground, muted). Replace them with your own brand colors.

CSS Variable Generator — Build Design Token Color Files | Toolivon

CSS Variable Generator

Build a design-token color file from your palette. Exports CSS, SCSS, JSON, and Tailwind config instantly.

Preview

CSS Variables

:root {
  --color-primary: #2563eb;
  --color-secondary: #7c3aed;
  --color-accent: #0ea5e9;
  --color-background: #ffffff;
  --color-foreground: #0a0a0a;
  --color-muted: #94a3b8;
}

Related Color Tools

View all →

Color Picker

Popular

Pick any color and instantly get its HEX, RGB, HSL, and CMYK values

Palette Generator

Popular

Generate beautiful multi-color palettes from a single seed color

Gradient Generator

Popular

Create CSS linear, radial, and conic gradients with live preview and code output

Image Color Extractor

Popular

Upload an image and extract its dominant colors as a palette

How to Use the CSS Variable Generator

1
Edit the color palette
Each row has a color picker, HEX input, and a name field. Edit any of them to update the entry.
2
Add or remove colors
Click '+ Add Color' to add a new row. Click ✕ to remove any entry you don't need.
3
Choose an output format
Switch between CSS Variables (:root), SCSS Variables, JSON object, or Tailwind Config.
4
Copy the output
Click 'Copy Output' to copy the generated code to your clipboard.

Frequently Asked Questions

Loading color tools…