Color to CSS Variables

Convert hex colors to CSS custom properties with naming conventions

What is it and how does it work?

Converting a set of colors to CSS custom properties (variables) is a core workflow in design system development. Instead of hard-coding color values throughout your CSS — `color: #1DA1F2` scattered across hundreds of rules — you define them once as `--color-primary: #1DA1F2` in the `:root` selector and reference them everywhere else with `var(--color-primary)`. This makes global rebranding or theme changes a single-file edit instead of a find-and-replace across your entire codebase.

This tool takes a list of color values (hex, RGB, or HSL) along with their names and generates ready-to-paste CSS custom property declarations and their Sass/SCSS variable equivalents. It also validates colors, converts between formats, and produces the `:root { }` block with your full palette — ready to drop into your design system's token file.

Common use cases

• Design system bootstrap: paste your brand palette (primary, secondary, accent, neutral shades) and generate the CSS custom properties block for your design tokens file or Tailwind config.
• Theme switching: define light and dark theme colors as separate sets of custom properties — toggle between themes by swapping the `:root` block or using `[data-theme="dark"]` selectors.
• Sass migration: if you have a legacy Sass project with `$color-brand: #1DA1F2` variables, export to CSS custom properties for modern browser native theming without removing Sass compatibility.

Frequently asked questions

What is the difference between CSS custom properties and Sass variables?

Sass variables (like `$primary: #1DA1F2`) are resolved at compile time and become literal values in the output CSS. CSS custom properties (like `--primary: #1DA1F2`) are resolved at runtime in the browser. The key advantage of custom properties: they can be changed dynamically with JavaScript (`document.documentElement.style.setProperty("--primary", "#FF0000")`) and can be scoped to specific elements, enabling real-time theming without recompilation.

What naming convention should I use for color variables?

Common patterns: semantic naming (`--color-primary`, `--color-danger`, `--text-muted`), scale-based naming (`--blue-100` through `--blue-900` for shades), or both (define scales then alias: `--color-primary: var(--blue-600)`). Semantic names are more maintainable; scale names are more flexible. The Tailwind CSS and Open Props approaches are popular references.

Can CSS custom properties be used in media queries?

Partially. Custom properties work inside media query bodies (`@media (prefers-color-scheme: dark) { :root { --bg: #000 } }`) but cannot be used in media query conditions themselves (`@media (min-width: var(--breakpoint-md))` does not work). For responsive design with variables, Sass variables or PostCSS custom media queries are alternatives.

How do I inherit and override custom properties?

CSS custom properties cascade like regular properties. A value set on `:root` is inherited by all descendants. Override for a specific component by setting the variable on that element or a parent: `.card { --color-primary: #FF0000; }` changes the value only within `.card` and its children. This scoping is the main advantage over global Sass variables.

Developer

UUID Generator · Timestamp Converter · Base64 Encoder · Base64 Decoder · Hash Generator · Color Converter