CSS Color Variables Generator
Generate a :root block of CSS variables for a color scale (50→950) from one color. Everything runs on your device — fast, free, and private.
The result will appear here…
or press Ctrl+Enter
Everything runs in your browser. Your data is never sent to our servers.
728 × 90Ad Space AvailablePlace your ad here
Example
Example Input
#00B8E6, name=brand
Example Output
:root { --brand-50: …; --brand-500: #00b8e6; … }How to Use
- 1Enter a color or data in the Input field.
- 2Set "More settings" if needed, then click Run (or Ctrl+Enter).
- 3Copy the result — a swatch is shown next to each value.
About CSS Color Variables Generator
The CSS Color Variables Generator creates a :root block of custom properties (--brand-50 … --brand-950) for a whole color scale from one base color, ready to paste into your stylesheet.
Using CSS variables makes theming easy to change in one place. You can rename the variable prefix to match your brand/component.
FAQ
Is my data sent to a server?
No. CSS Color Variables Generator runs entirely in your browser — your data never leaves your device.