Color a variables CSS

Convierte colores hex a propiedades personalizadas CSS con convenciones de nomenclatura

¿Qué es y cómo funciona?

Convertir un conjunto de colores en propiedades personalizadas CSS (variables) es un flujo de trabajo central en el desarrollo de sistemas de diseño. En lugar de codificar valores de color en todo tu CSS, defines `--color-primario: #1DA1F2` una vez en el selector `:root` y lo referencias en todas partes con `var(--color-primario)`.

Esta herramienta toma una lista de valores de color junto con sus nombres y genera declaraciones de propiedades personalizadas CSS listas para pegar y sus equivalentes en Sass/SCSS.

Casos de uso

• Bootstrap de sistema de diseño: pega tu paleta de marca y genera el bloque de propiedades personalizadas CSS para tu archivo de tokens de diseño o configuración de Tailwind.
• Cambio de tema: define colores de tema claro y oscuro como conjuntos separados de propiedades personalizadas — alterna entre temas intercambiando el bloque `:root`.
• Migración de Sass: si tienes un proyecto Sass heredado con variables `$color-brand`, exporta a propiedades personalizadas CSS para temas nativos modernos del navegador.

Preguntas frecuentes

¿Cuál es la diferencia entre las propiedades personalizadas CSS y las variables Sass?

Las variables Sass se resuelven en tiempo de compilación. Las propiedades personalizadas CSS se resuelven en tiempo de ejecución en el navegador — pueden cambiarse dinámicamente con JavaScript y tienen alcance de elemento.

¿Qué convención de nomenclatura debo usar para las variables de color?

Patrones comunes: nomenclatura semántica (`--color-primario`), nomenclatura basada en escala (`--azul-100` a `--azul-900`), o ambas. Los nombres semánticos son más mantenibles; los de escala son más flexibles.

¿Se pueden usar propiedades personalizadas CSS en consultas de medios?

Parcialmente. Funcionan dentro de los cuerpos de consultas de medios pero no en las condiciones mismas.

¿Cómo heredo y anulo propiedades personalizadas?

Las propiedades personalizadas CSS se heredan como propiedades regulares. Anúlalas para un componente específico: `.card { --color-primario: #FF0000; }` cambia el valor solo dentro de `.card`.

Desarrollador

Generador de UUID · Conversor de timestamps · Codificador Base64 · Decodificador Base64 · Generador de hash · Conversor de colores