Skip to main content
Back to Colors generators

Colors

CSS Color Variables Generator

Used by developers, writers, and creators worldwide.

The CSS color variables generator produces a ready-to-paste :root block of named custom properties in seconds. Set how many variables you need, define a prefix that matches your project's naming layer (color, brand, theme), and choose hex, RGB, or HSL output. The result is clean, valid CSS with no editing required. Developers use this to bootstrap token systems, replace scattered hardcoded values, or spin up a palette before a design file even exists. CSS custom properties cascade, so defining tokens once in :root means a single edit propagates to every selector that references them — exactly the consistency a component library or design system depends on.

Loading usage…

Free forever — no account required

How to use

  1. Choose your options above
  2. Click Generate
  3. Copy your result

Detailed instructions

  1. Set the Number of Colors to match how many tokens your palette needs, starting with 6 for a minimal system.
  2. Type your project's naming convention into the Variable Prefix field, such as color, brand, or theme.
  3. Select your preferred Color Format — hex for compactness, RGB for alpha compositing, or HSL for adjustable lightness.
  4. Click Generate to produce the :root block with all named CSS custom properties.
  5. Copy the output and paste it at the top of your main stylesheet or into a dedicated tokens.css file.

Use Cases

  • •Bootstrapping a :root token file for a new Storybook component library with a consistent prefix
  • •Generating HSL-based variables with predictable lightness steps for a systematic Figma-to-code palette
  • •Wiring CSS variables into tailwind.config.js under theme.extend.colors using var() references
  • •Creating matching light and dark palette blocks with identical variable names for prefers-color-scheme media queries
  • •Replacing 50+ hardcoded hex values across a legacy stylesheet with a single unified :root block

Tips

  • →Generate the same count with the HSL format first — it's easier to spot unwanted hue collisions before switching to hex for production.
  • →Use a prefix like color-light and color-dark to keep two theme palettes in the same stylesheet without naming conflicts.
  • →After pasting, immediately do a find-and-replace pass to rename any auto-generated token names to reflect their semantic role, like --color-1 to --color-primary.
  • →If you're feeding these tokens into a design tool like Figma Tokens or Style Dictionary, HSL format maps most cleanly to those systems.
  • →Generate a slightly larger set than you think you need — having 10 tokens to choose from during layout is faster than regenerating mid-build.
  • →Pair this generator with a CSS reset that also uses custom properties so your typography and spacing tokens share the same :root block structure.

FAQ

how do I use generated CSS color variables for dark mode

Generate two palettes using the same prefix and variable names but different color values. Place the light palette in :root and the dark palette inside @media (prefers-color-scheme: dark) or a .dark selector on your html element. Every component referencing those variables switches automatically with no extra selector changes.

hex vs hsl for CSS custom properties — which should I pick

Hex is the most concise and universally supported. HSL is better for systematic palettes because you can adjust lightness in fixed steps and reason about the scale intuitively. Use RGB when you need to compose alpha values with rgba() or the modern color() function.

what prefix should I use for CSS color variables

Pick a prefix that reflects the token's layer: color for generic values, brand for client-specific ones, or theme for mode-aware tokens. Avoid single-character prefixes — they collide with third-party libraries. A consistent prefix also makes codebase-wide search and refactoring much faster.