CSS Color Generator
Generate CSS custom properties and color snippets from any color.
About the CSS Color Generator
Generate CSS custom properties and color snippets from any color. Every value is computed locally with vanilla JavaScript — there is no server round-trip, no sign-up and no limit on how many times you use it.
How to use
Choose a color
Enter a HEX value or pick one visually.
Generate variables
CSS custom properties are produced automatically.
Review the snippet
See the color expressed as HEX, RGB and HSL variables.
Copy the code
Paste the :root block straight into your stylesheet.
Benefits
Drop-in variables
Get a ready-made :root block for your design tokens.
Multiple formats
HEX, RGB and HSL variables from one color.
Cleaner stylesheets
Reference one variable instead of repeating values.
Features & supported formats
Features
- CSS custom property output
- HEX, RGB and HSL variants
- Copy-ready :root snippet
- Live color preview
- One-tap copy
Supported formats
Frequently asked questions
What is a CSS variable?
A custom property such as --brand: #3b82f6 that you reference with var(--brand) anywhere in your stylesheet.
Why store colors as variables?
Variables let you change a color in one place and update it everywhere, which is ideal for theming.
Can I use the RGB variable for opacity?
Yes. Storing channels as numbers lets you write rgb(var(--color-rgb) / 50%) for transparency.
Where do I paste the snippet?
Into a :root block near the top of your CSS so the variables are globally available.
Do CSS variables work everywhere?
They are supported in all modern browsers; only very old browsers need a fallback.