Generate CSS color variables

Turn a palette into predictable CSS custom properties and simple JSON tokens.

Palette

Variable prefixOutput

Generated names are positional utility names, not semantic design-token governance. Rename them to roles such as surface, text, primary, danger, or success when your design system requires semantics.

Connected color workflow

v10.74 keeps the established color/conversion widgets intact while connecting picking, palette generation, contrast review, visual preview, scales and CSS/JSON reuse. Color work stays in the browser, and recent palettes can be stored locally without an account.

Color and accessibility boundaries

HEX/RGB/HSL/HSV/OKLCH conversions are numerical color-model operations. CMYK output is an RGB-derived approximation rather than ICC-profiled print proofing. WCAG contrast ratios measure luminance contrast only and do not certify a full interface. Color-blindness previews are design simulations, not medical tests.

How to use this CSS Color Variables Generator

Convert a HEX palette into CSS custom properties and JSON color tokens with a configurable prefix and instant copy/download-ready output.

Enter, paste, upload, or choose the inputs shown in the tool above.
Adjust the available options for the result you need.
Review the output before copying, downloading, or using it elsewhere.

What this tool does

Turn design colors into reusable browser-local code without claiming framework-specific naming semantics.

Practical tips and limits

Review the inputs and result before using the output elsewhere. Keep the original data when the operation changes or replaces content.