Colores desde una URL
Extractor de colores de sitios web
El Extractor de colores de sitios web lee el HTML y el CSS de un sitio web a partir de su URL y devuelve la paleta de colores del sitio: el color de marca, los acentos, los fondos, el texto y los bordes, con la variable CSS y la proporción de uso de cada color.
- Gratis, sin registro
- Lee el CSS real y sus variables
- No se guarda nada
¿Sitio bloqueado? Pega su HTML o CSS
¿Cómo funciona el extractor de colores de sitios web?
El extractor de colores de sitios web descarga una página y sus hojas de estilo, lee cada valor de color del código y ordena los colores según dónde y con qué frecuencia los usa la página.
Escribe una dirección
Escribe un dominio como example.com o pega la URL completa de cualquier página pública. El extractor obtiene la página y hasta 25 de sus hojas de estilo.
Se analizan las hojas de estilo
Se lee cada sintaxis de color: hex, rgb, hsl, hwb, lab, lch, oklab, oklch, color() y los 148 colores con nombre. Las variables CSS se resuelven a sus valores.
Los colores reciben roles
La propiedad CSS define el rol de cada color: fondo, texto, borde, relleno o sombra. Las reglas que coinciden con elementos de la página cuentan tres veces.
Copia la paleta
El color de marca va primero, seguido de los acentos, los fondos y los colores de texto. Exporta la paleta como CSS, Tailwind o tokens de diseño.
¿Cómo encuentra el extractor el color de marca de un sitio?
El color de marca es el color saturado más usado que aparece en botones, enlaces o variables CSS cuyo nombre alude a la marca.
- Saturación. Solo los colores con un croma OKLCH de 0.05 o más cuentan como colores de marca o de acento. Los grises y los casi grises cuentan como neutros.
- Ubicación. Los colores de selectores como
.btn,button,ay.ctaganan peso. - Nombres. Las variables como
--primary,--brandy--accentganan peso. - theme-color. Un valor
<meta name="theme-color">que coincide con un color del CSS añade una señal de marca fuerte.
| Rol | Propiedades CSS |
|---|---|
| Fondo | background, background-color, degradados |
| Texto | color, text-decoration-color, caret-color |
| Borde | border, outline, column-rule |
| Relleno | fill, stroke, stop-color, accent-color |
| Sombra | box-shadow, text-shadow (se listan, pero quedan fuera de la paleta principal) |
¿Cómo separa los colores usados del CSS sin usar?
El extractor da el triple de peso a las reglas CSS cuyos selectores coinciden con elementos del HTML de la página. Los frameworks CSS incluyen muchos colores que una página nunca usa, y la coincidencia de selectores impide que esos colores superen al diseño real.
- Los colores de
:hovery:focuscuentan con la mitad de peso, porque solo aparecen durante la interacción. - Las reglas
@media printse ignoran. - Los colores con menos del 35% de opacidad se omiten por ser superposiciones y tintes.
- Los colores a menos de ΔE_OK 0.02 entre sí se fusionan en una sola muestra que lista sus variantes.
¿El extractor encuentra los colores del modo oscuro?
Sí. Las reglas dentro de @media (prefers-color-scheme: dark) y las reglas bajo selectores como .dark o [data-theme="dark"] forman una paleta separada para el modo oscuro.
Los valores oscuros de las variables CSS reemplazan a los valores claros cuando el extractor resuelve una regla oscura, así que la paleta oscura muestra los colores que un visitante ve en modo oscuro.
¿Qué colores no puede leer el extractor de sitios web?
El extractor de sitios web lee el código que envía un servidor, así que tres tipos de color quedan fuera de su alcance.
- Estilos en tiempo de ejecución. Las bibliotecas CSS-in-JS inyectan estilos después de que la página se carga en un navegador.
- Colores de imágenes. Los colores de fotos, logotipos rasterizados y videos son píxeles, no CSS. El extractor lee por separado los colores del logotipo y del icono del sitio.
- Sitios protegidos. Los sitios con protección contra bots rechazan las solicitudes automáticas.
En estos casos, pega el HTML o el CSS de la página en el cuadro de código, o haz una captura de pantalla y suéltala en el Extractor de paletas de colores. La guía Cómo encontrar los colores que usa un sitio web (en inglés) también explica los métodos con las DevTools del navegador.
¿Quién usa un extractor de colores de sitios web?
Diseñadores
Audita los colores de marca actuales de un cliente antes de un rediseño, o estudia la paleta de un sitio de referencia.
Desarrolladores
Recupera los tokens de color y los nombres de variables de un sitio para reconstruir un tema.
Profesionales de marketing
Adapta las páginas de destino, los anuncios y los correos electrónicos a los colores del sitio web principal.
Revisores de accesibilidad
Prueba los pares de texto y fondo del sitio frente a los umbrales de contraste WCAG en la pestaña Contraste.
Preguntas frecuentes sobre el extractor de colores de sitios web
¿Por qué faltan algunos colores del sitio?
Los colores que JavaScript aplica en tiempo de ejecución, los colores dentro de imágenes y los colores de páginas que requieren inicio de sesión no aparecen en el HTML y el CSS que envía el servidor.
¿Puedo extraer colores de un sitio que bloquea los bots?
Sí, con una alternativa. Abre el sitio en tu navegador y pega su HTML o una hoja de estilo en el cuadro de código, o sube una captura de pantalla al extractor de imágenes.
¿El extractor guarda los sitios web que consulto?
No. El servidor obtiene la página y sus hojas de estilo para tu solicitud y no guarda ninguna copia. El análisis de color se ejecuta en tu navegador.
¿Qué significa el porcentaje junto a un color?
El porcentaje es la proporción del color en el uso ponderado del CSS de la página. Mide con qué frecuencia el código usa el color, no cuánta superficie de pantalla cubre el color.
¿Puedo consultar una página que no sea la de inicio?
Sí. Escribe la URL completa de cualquier página pública, por ejemplo example.com/pricing.