Extractor de tokens de CSS
CSS Token Extractor
Saca los colores, espaciados, radios y tipografías de una hoja de estilos y propone un conjunto de propiedades personalizadas.
Lee una hoja de estilos, cuenta cada color, longitud, radio, fuente y sombra que contiene, y propone una `--variable` para cada uno, ordenadas por frecuencia de uso. Después puede reescribir la hoja de estilos para usarlas. Es un escáner de declaraciones construido sobre el tokenizador del formateador de CSS, no un analizador completo ni un linter: te dice qué valores hay en el archivo, que es la parte tediosa de hacer a mano.
CSS de entrada
Suelta un archivo .css
Se lee solo en esta pestaña.
Tokens propuestos
Se antepone, como en --app-color-1.
Declaraciones
29
Colores
11
Valores de espaciado
5
Radios
3
Fuentes
1
Variables que ya estaban
1
Colores 11
- #6366f1×2
- #fff×2
- #1f2937×1
- rgba(0,0,0,.06)×1
- rgba(0,0,0,.08)×1
- #111827×1
- #4b5563×1
- #4f46e5×1
- #eef2ff×1
- #4338ca×1
- #e5e7eb×1
Espaciado 5
- 4px×1
- 8px×3
- 16px×4
- 24px×3
- 32px×1
Radios 3
- 8px×1
- 12px×1
- 999px×1
Tamaños de letra 3
- 12px×1
- 14px×2
- 20px×1
Interlineados 1
- 1.6×1
Fuentes 1
- "Pretendard", system-ui, sans-serif×1
Sombras 2
- 0 1px 2px rgba(0,0,0,.06)×1
- 0 8px 24px rgba(0,0,0,.08)×1
Cómo lee el archivo
- · Se lee con el tokenizador del formateador de CSS, así que un
url()o un#fffdentro de una cadena no cuenta como color, ycalc()se deja entero. - · Los colores se normalizan a hex, así que #FFF, white y rgb(255 255 255) se funden en una sola entrada con su recuento. Los nombres se numeran por frecuencia de uso, así que --color-1 suele ser el color de marca o el del texto: renómbralos.
- · El espaciado sale solo de margin, padding, gap y las propiedades inset, y los radios solo de border-radius, numerados por tamaño. width y height quedan fuera: son dimensiones, no ritmo.
- · El JSON tiene la forma del borrador de W3C Design Tokens (DTCG), con $type y $value. «CSS reescrito con var()» sustituye solo las coincidencias exactas de valor y deja intacto cualquier otro carácter.
Para construir una escala a partir de un color que sacaste, la escala de tonos y sombras hace eso; para el modo oscuro, la paleta para modo oscuro.
Cómo se usa
Pega la hoja de estilos o suelta el archivo
Un archivo cada vez. El ejemplo que se carga primero está ahí para enseñar la forma de la salida antes de que vayas a buscar tu propio CSS.
Lee los recuentos antes que los tokens
Cuarenta colores en un archivo que debería tener doce es el hallazgo. Las listas agrupadas de debajo muestran cada valor con el número de veces que aparece, así que los que merece la pena nombrar están arriba y los únicos —que suelen ser errores o reglas muertas— están abajo.
Fija un prefijo si el proyecto lo necesita
Vacío da `--color-1`; escribir `app` da `--app-color-1`. En los dos casos los números son la clasificación por uso, no un significado, así que renómbralos cuando sepas para qué es cada valor.
Toma las variables, el JSON o el archivo reescrito
La salida CSS es un bloque `:root` para pegar al principio. El JSON tiene la forma del borrador W3C Design Tokens, para un paso de compilación o una herramienta de diseño. La reescritura es la hoja de estilos original con las coincidencias exactas de valor cambiadas por `var()` y nada más tocado: lee la diferencia antes de confirmarla.
Preguntas frecuentes
¿El CSS reescrito es seguro para publicar tal cual?
Lee la diferencia primero. La sustitución es textual y solo por coincidencia exacta, así que no romperá un valor que no reconoce, pero tampoco puede saber que dos grises idénticos significan dos cosas distintas: un color de borde y una etiqueta deshabilitada que casualmente comparten hexadecimal recibirán la misma variable, y más tarde alguien cambia uno de los dos. Nombrar bien los tokens es el paso que atrapa esto, y es un paso humano.
¿Por qué faltan width y height en la lista de espaciado?
A propósito. El espaciado es un ritmo —márgenes, padding, gaps, insets— y un sistema de diseño lo convierte en tokens. Los anchos y altos son dimensiones: una barra lateral de 240px y un objetivo táctil de 44px no son dos puntos de la misma escala, y meterlos en la lista entierra los valores que sí lo son.
¿Maneja SCSS, Less o CSS-in-JS?
Solo CSS plano de forma fiable. El tokenizador atravesará mucho SCSS, pero el anidamiento, los cuerpos de `@mixin` y los valores interpolados no se resuelven, así que los recuentos se desvían. Compílalo primero y escanea la salida: ese es además el archivo que el navegador ve de verdad.
Encontró un color dentro de una URL. ¿De verdad?
No: ese caso está contemplado. El escaneo corre sobre el tokenizador del formateador de CSS, así que un `#fff` dentro de un `url()` o de una cadena es una cadena, y `calc()` se deja entero en lugar de despedazarse en longitudes. Esos son los dos lugares donde una expresión regular se equivoca en esto.
Puede recibir de
Formateador y minificador de CSS
CSS Beautifier & Minifier
Formatea o minifica CSS sin reordenar nada, conservando exactamente el flujo de tokens.
Generador de paletas
Palette Generator
Construye una paleta armónica a partir de un color base con reglas de complementarios, tríadas y análogos.
Paleta para modo oscuro
Dark Mode Palette
Construye una rampa de 50 a 950 desde un color y la refleja en una versión oscura, de modo que cada pareja de tokens conserva su contraste.
Color de Tailwind más cercano
Nearest Tailwind Colour
Encuentra la entrada de la paleta de Tailwind más próxima a cualquier color y muestra la distancia perceptual.
Después
Estas aceptan lo que produce esta herramienta, así que el resultado puede pasar directamente.
Escala de tonos y sombras
Tint & Shade Scale
Genera una escala de luminosidad de 50 a 950 desde un solo color con pasos perceptualmente iguales, lista para usar como tokens de diseño.
Formateador y minificador de CSS
CSS Beautifier & Minifier
Formatea o minifica CSS sin reordenar nada, conservando exactamente el flujo de tokens.
Paleta para modo oscuro
Dark Mode Palette
Construye una rampa de 50 a 950 desde un color y la refleja en una versión oscura, de modo que cada pareja de tokens conserva su contraste.
Generador de paletas
Palette Generator
Construye una paleta armónica a partir de un color base con reglas de complementarios, tríadas y análogos.
Conversor de códigos de color
Colour Format Converter
Convierte un color entre HEX, RGB, HSL, HWB, LAB, LCH y OKLCH, y nombra el color conocido más próximo.
Selector de color
Colour Picker
Elige un color en un plano OKLCH, con el cuentagotas de pantalla o desde una imagen que subas, y lo copia en cualquier notación.