CSS Variables Generator

Turn colors into clean :root variables with consistent naming, prefixes, and output formats.

How to Use

  1. Add colors (pickers or paste a list).
  2. Set a variable prefix (example: --ub-) and naming rules.
  3. Choose output format (HEX / RGB / HSL) and options (alpha, grouping).
  4. Copy or download the generated CSS. Use “Share Link” to create a restorable URL.
Generated CSS
Output updates instantly. URLs do not change unless you press “Share Link”.
Vars
—
Format
—
Prefix
—
Preview
/* Your generated CSS will appear here */
Tip: You can paste colors like #ff7426, rgb(255, 116, 38), or hsl(18 100% 57%).
Inputs & Settings
Keep it consistent across your project: naming rules + formats + grouping.
Must start with --. Example: --ub-, --brand-
Slugify example: “Primary Accent” → primary-accent
Use RGB/HSL if you plan to do color-mix() or runtime tweaks.
Choose where variables are emitted (default: :root).
Used only when Scope = “Custom selector…”.
Format: Name | Color (pipe) or just color. Supports HEX/RGB/HSL.
Rows
Use the list parser or add rows manually. (Rows UI is powered by JS.)
Details (naming + formatting)
—
Details explain how names were normalized and how colors were converted into the selected output format.

Reference

  • Custom properties: --my-var: #ff7426;
  • Use: color: var(--my-var);
  • Scope: Put variables in :root for global usage, or in a selector for themes.
Output is generated for modern CSS; you control selector scope + variable prefix.

FAQ

Do you change my URL while I type?

No. A shareable URL is generated only when you press “Share Link”.

What naming style is best?

Slugified names are the most consistent across teams: Primary Accent → primary-accent.

HEX vs RGB vs HSL?

HEX is compact and common. RGB/HSL can be easier for computed effects like mixing, shading, or theme transforms.

Tool Info

Last updated:

Updates may include additional parsing support, export options, and edge-case handling.