Generador de variables de color CSS
Genera custom properties CSS y tokens de diseño desde una paleta.
Cómo ayuda
Genera custom properties CSS y tokens de diseño desde una paleta.
- Genera paletas desde un color base.
- Comprueba el contraste antes de publicar texto UI.
- Exporta CSS, Tailwind, SCSS, JSON, SVG y PNG.
- Funciona localmente en el navegador.
Cómo funciona el generador de variables CSS
Las custom properties CSS (variables) son la forma más robusta de gestionar un sistema de colores en un proyecto web. Defines los valores una vez en el selector :root y los reutilizas en cualquier lugar con var(--nombre-variable).
Chromoforge genera el bloque :root completo desde tu paleta, con nombres semánticos listos para usar: --color-primary-500, --color-neutral-100, --color-accent, etc. Puedes elegir la convencion de nomenclatura que prefieras (numérica, semántica o ambas).
La ventaja frente a hardcodear los hex es evidente cuando hay que gestionar el dark mode: defines un segundo bloque [data-theme="dark"] con los mismos nombres de variable pero valores invertidos. El navegador gestiona todo el resto automáticamente, sin JavaScript adicional.
Chromoforge también exporta en formato SCSS con variables $color para quienes usan preprocesadores. Y en formato JSON compatible con W3C Design Tokens para quienes trabajan con Tokens Studio, Style Dictionary o sistemas de diseño estructurados.
Ejemplos prácticos
- Proyecto nuevo: genera las variables desde el color de marca, pegaias en un archivo
tokens.cssimportado como primer stylesheet. A partir de ese momento, usa solo los nombres semánticos en el CSS de los componentes. - Dark mode rápido: la exportación ya incluye el bloque
[data-theme="dark"]con los valores invertidos; conéctalo a un toggle HTML y el dark mode esta listo. - Migración desde SCSS: sustituye las variables SCSS
$color-primarypor custom properties CSS y ganas la posibilidad de cambiarlas en tiempo de ejecución (animaciones, temas de usuario). - Design tokens con Style Dictionary: exporta en JSON e impórtalo directamente en Style Dictionary para generar salidas multiplataforma (iOS, Android, web).
FAQ — Variables de color CSS
¿Cuál es la diferencia entre custom properties CSS y variables SCSS?
Las variables SCSS existen solo en fase de compilación: se sustituyen por los valores finales en el CSS generado. Las custom properties CSS existen en tiempo de ejecución en el navegador, se pueden leer y modificar via JavaScript, heredan en cascada y se pueden sobreescribir para selectores específicos. Para dark mode y temas dinámicos, las custom properties CSS son superiores.
¿Cómo nombro las variables de forma escalable?
Una convencion sólida usa dos niveles: primitivos (el valor bruto, por ejemplo --blue-600: #2563eb) y semánticos (el rol, por ejemplo --color-action: var(--blue-600)). En los componentes usas solo los semánticos. Cuando cambias la marca, solo modificas el mapeo, no cada componente.
¿Las custom properties funcionan en todos los navegadores modernos?
Sí. El soporte es universal en navegadores modernos desde hace varios años (Chrome 49+, Firefox 31+, Safari 9.1+). Si debes dar soporte a IE11, las custom properties no están disponibles y necesitaras usar un fallback con valores hardcodeados o un polyfill.