Css Variable Generator

Turn a single base color into a full design-token CSS variable set. Pick a hex base color, name the variable, choose a prefix, and optionally generate a 50–950 shade scale and/or an HSL channel breakdown. The output is a ready-to-paste :root { ... } block with the shade levels derived by adjusting the HSL lightness while keeping hue and saturation from your base color.

1. Pick a Base Color with the color picker (or type a hex value). 2. Enter a Variable Name (e.g. primary) — used as the suffix after your prefix. 3. Set the Prefix (default --, automatically gets a trailing dash if missing). 4. Tick Generate Shades to emit the 50–950 scale, and/or Generate HSL to emit the raw HSL channel breakdown. 5. Click Generate, then Copy to copy the CSS block.

Shades are produced by converting the base color to HSL and substituting fixed lightness levels: 50→97%, 100→94%, 200→86%, 300→76%, 400→64%, 500 (your base color unchanged), 600→42%, 700→34%, 800→26%, 900→20%, 950→12%. Hue and saturation are taken from the base color. The HSL variant block emits space-separated HSL (e.g. --primary: 217 91% 60%) plus separate -h, -s, -l channels for use in modern color-mix/relative-color functions.