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).
Chromaforge 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 (numerica, semantica 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 automaticamente, sin JavaScript adicional.
Chromaforge 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 rapido: la exportacion ya incluye el bloque
[data-theme="dark"]con los valores invertidos; conectalo a un toggle HTML y el dark mode esta listo. - Migracion desde SCSS: sustituye las variables SCSS
$color-primarypor custom properties CSS y ganas la posibilidad de cambiarlas en tiempo de ejecucion (animaciones, temas de usuario). - Design tokens con Style Dictionary: exporta en JSON e importalo 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 compilacion: se sustituyen por los valores finales en el CSS generado. Las custom properties CSS existen en tiempo de ejecucion en el navegador, se pueden leer y modificar via JavaScript, heredan en cascada y se pueden sobreescribir para selectores especificos. Para dark mode y temas dinamicos, las custom properties CSS son superiores.
¿Como nombro las variables de forma escalable?
Una convencion solida 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 anos (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.
¿Puedo usar las variables CSS directamente en Tailwind?
Si, en Tailwind v3 puedes usar valores arbitrarios como bg-[var(--color-primary)]. En Tailwind v4, el sistema se basa nativamente en custom properties CSS, haciendo la integracion aun m?s directa a traves del bloque @theme.
¿Que son los design tokens y como se diferencian de las variables?
Los design tokens son variables con metadatos estructurados (tipo, categoria, descripcion) en un formato est?ndar como JSON o YAML. Permiten generar variables CSS, constantes Swift, recursos Android y archivos Figma desde la misma fuente. Chromaforge exporta un JSON base compatible con el formato W3C Design Tokens.