Home/Tools/Utilities/Color Variable Generator

Utilities · Generator

Color Variable Generator

Generate CSS custom property color palettes in HEX, RGB, HSL, or raw formats for alpha support.

Colors

Settings

Variable prefix

Color format

Generate 100–900 shadesInclude dark mode overrides

Color Swatches

primary

#6366f1

secondary

#ec4899

accent

#f59e0b

success

#10b981

danger

#ef4444

#ffffff

text

#1d1d1f

Generated CSS

:root {
  --color-primary: #6366f1;
  --color-secondary: #ec4899;
  --color-accent: #f59e0b;
  --color-success: #10b981;
  --color-danger: #ef4444;
  --color-bg: #ffffff;
  --color-text: #1d1d1f;
}

100%

Free, no
sign-up needed

Code written
by hand

85+

CSS tools
in one place

<1s

Copy-ready
CSS instantly

What is this

What is the CSS Color Variable Generator?

Turn any colour palette into CSS custom property declarations ready to paste into your :root block. Name and export your entire token set at once.

Everything runs locally in your browser. Adjust the controls above, preview instantly, and copy clean, production-ready CSS — no account, no upload.

How to use

Using the CSS Color Variable Generator

Everything lives in the panel at the top of this page. There is nothing to install — it all runs right here in your browser.

Add colours to the palette

Enter colour values and assign variable names. Use a naming convention like --color-[category]-[variant] for consistency.

Set naming format

Choose between kebab-case, camelCase, or a custom prefix. The generator enforces consistent naming across your token set.

Export the :root block

Click Export to copy the complete CSS custom property declarations. Paste into your global stylesheet or design token file.

The output

What the generated code looks like

Clean, production-ready CSS — no vendor bloat, no unnecessary declarations.

tokens.css

:root {
  /* Brand */
  --color-brand-primary:   #6C2EF5;
  --color-brand-secondary: #f97316;

  /* Neutral */
  --color-neutral-50:  #f8fafc;
  --color-neutral-900: #0f172a;

  /* Semantic */
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-error:   #ef4444;
  --color-info:    #3b82f6;
}

Paste this into your global CSS file. All components reference var(--color-brand-primary) rather than hardcoded hex values.

Pro tips

Pro tips for better results

★

Use semantic names alongside raw colour names

Define both --color-purple-500: #6C2EF5 (raw) and --color-brand-primary: var(--color-purple-500) (semantic). Change the brand colour by updating one line.

★

Custom properties cascade and inherit

You can override variables inside component selectors: .dark-theme { --color-brand-primary: #8b5cf6; }. Everything using var(--color-brand-primary) updates automatically.

★

Avoid deeply nested variable references

Chaining variables more than 2 levels deep (--a: var(--b); --b: var(--c)) makes debugging hard. Keep the chain flat: raw value then one semantic alias.

FAQ

Frequently asked questions

CSS custom properties (also called CSS variables) are values defined with a -- prefix that can be reused throughout a stylesheet using var(). They cascade and inherit like other CSS properties, and can be updated at runtime with JavaScript.

Yes. CSS custom properties are supported in Chrome 49+, Firefox 31+, Safari 9.1+, and Edge 15+ - covering more than 96% of current web traffic. They are safe to use without a fallback in most projects.

No. Everything runs in your browser. Nothing is sent to a server.