Generador de variables CSS
Componga una lista de colores con nombre y obtenga al instante el bloque :root { --nom: valeur; } de variables CSS (custom properties) correspondiente. Procesamiento 100% local en su navegador: no se envía nada a un servidor.
Cómo funciona
Las variables CSS (también llamadas «custom properties») centralizan en un único lugar los colores de una guía de estilo, lo que evita repetir el mismo código hexadecimal en decenas de archivos y facilita un futuro cambio de tema (incluido un modo oscuro). Añada o quite líneas, ajuste cada color y el bloque :root se actualiza en tiempo real, listo para pegarlo al principio de su hoja de estilos principal.
¿Se corrigen automáticamente los nombres de variable no válidos?
Sí: los espacios y los caracteres no permitidos se sustituyen por guiones y el nombre se pasa a minúsculas para respetar la convención habitual de CSS. Si dos variables acaban con el mismo nombre, se añade automáticamente un sufijo numérico para evitar conflictos.
¿Puedo usar algo distinto de colores como valor?
Sí, el campo «Valor» acepta cualquier valor CSS válido (un tamaño en rem, una fuente, un degradado...), aunque el selector de color contiguo sigue siendo práctico para componer rápidamente una paleta.
Privacidad: la paleta que compone permanece por completo en su navegador; no se envía ni se conserva nada en un servidor.