Extractor de variables de color CSS
Encuentra cada color en tu CSS y conviértelo en propiedades personalizadas reutilizables.
Extractor de variables de color CSS
Pega una hoja de estilos y esta herramienta escanea cada declaración en busca de valores de color escritos como hex, rgb()/rgba() o hsl()/hsla(), luego reescribe las reglas para que hagan referencia a propiedades personalizadas en lugar de repetir el mismo valor una y otra vez. Está diseñada para limpiar una hoja de estilos que creció orgánicamente — un rediseño, una fusión de biblioteca de componentes o CSS extraído de una herramienta de diseño — donde el mismo azul termina siendo escrito una docena de formas ligeramente diferentes.
La opción de nomenclatura controla cómo se nombra cada variable: por orden de primera aparición (--color-1, --color-2…), por un matiz aproximado y claridad (--color-azul-oscuro, --color-gris-claro), o por la propiedad en la que aparece primero (--color-fondo, --color-borde). Activa "combinar colores iguales escritos de forma diferente" para unificar #ff0000, rgb(255, 0, 0) y hsl(0, 100%, 50%) en una sola variable aunque el texto fuente difiera; los valores idénticos siempre se fusionan independientemente. El regulador de similitud va más allá y fusiona tonos que son cercanos pero no idénticos — útil cuando una paleta acumuló grises o azules casi-duplicados que nadie pretendía crear. Elige si el bloque generado se coloca bajo :root o un selector personalizado, selecciona la notación en la que imprimen las variables, o cambia a una lista simple de colores y recuentos de ocurrencia cuando solo quieres una auditoría en lugar de una reescritura.
El escáner solo mira dentro de los valores de declaración reales, por lo que nunca confunde un selector de ID como #abcabc con un color, y deja comentarios, cadenas entrecomilladas y contenidos de url() completamente intactos. Los finales de línea de Windows y Unix funcionan ambos, y la herramienta no se deja engañar por funciones anidadas como un color dentro de una lista de gradiente.
Todo se ejecuta localmente en tu navegador — tu hoja de estilos nunca se carga en ningún lugar, por lo que es seguro pegar código de un proyecto privado. Copia el resultado, descárgalo como archivo .txt, o envía la salida de vuelta a la entrada para refinarla con otro paso.