Extractor Gratis de Paleta de Colores de Sitios Web

El Extractor de Paleta de Colores de Sitios Web es una herramienta en línea gratuita que extrae la paleta de colores completa del CSS de cualquier sitio web. Descubre los colores de marca, los colores de texto y los fondos. Funciona por completo en tu navegador, sin necesidad de instalar nada ni registrarte.

Pega el código fuente CSS de un sitio web y la herramienta extraerá todos los valores de color utilizados.

Sí, detecta las variables CSS (--color-*) y sus valores.

Sí, totalmente gratis.

Por supuesto. El Extractor de Paleta de Colores de Sitios Web procesa todo en tu navegador, del lado del cliente. No se sube ni se almacena ningún dato en ningún servidor. Tu contenido permanece privado en tu dispositivo en todo momento.

Sí, el Extractor de Paleta de Colores de Sitios Web es totalmente adaptable y funciona en smartphones y tabletas. Puedes usarlo en cualquier dispositivo con un navegador web moderno, sin necesidad de descargar ninguna app.

No hace falta ninguna cuenta ni registro. Simplemente abre el Extractor de Paleta de Colores de Sitios Web en tu navegador y empieza a usarlo de inmediato. No hay barreras de registro ni restricciones de uso.

El Extractor de Paleta de Colores de Sitios Web funciona en todos los navegadores modernos, incluidos Chrome, Firefox, Safari, Edge y Opera. Para una mejor experiencia, usa la última versión de tu navegador preferido.

Abre el sitio en tu navegador, consulta su código fuente o su hoja de estilos (haz clic derecho y elige Ver código fuente de la página, o abre un archivo .css enlazado), copia el CSS y pégalo en el extractor. La herramienta lee los valores de color en bruto en lugar de muestrear píxeles de una captura de pantalla, así que los códigos hexadecimales que obtienes son los exactos que definió el diseñador, no aproximaciones distorsionadas por el antialiasing o la compresión. Analiza las propiedades donde vive el color -- background, color, colores de borde, fill, stroke, box-shadow y outline -- además de las propiedades personalizadas de CSS, y luego lista cada color único como una muestra en la que puedes hacer clic para copiarlo. Como funciona sobre código fuente pegado, también puedes analizar una hoja de estilos interna o sin publicar a la que ninguna herramienta de captura podría acceder. Pega el CSS arriba para extraer la paleta completa y exacta con un solo clic.

Un selector de color sobre una captura de pantalla muestrea un píxel ya renderizado, así que el valor que lees puede desviarse del original por el antialiasing en los bordes, la compresión JPEG o PNG, los perfiles de color del monitor y cualquier mezcla de opacidad que haya ocurrido durante el renderizado. Extraer del CSS lee el valor literal que escribió el autor -- por ejemplo #2563eb -- así que es exacto y repetible. La extracción desde CSS también saca a la luz colores que una captura nunca podría mostrar: tonos definidos solo en estados hover, reglas de modo oscuro, botones deshabilitados o componentes en los que nunca hiciste clic, ya que todos viven en el código fuente. La contrapartida es que necesitas acceso a la hoja de estilos, mientras que un selector funciona sobre cualquier imagen. Esta herramienta toma la ruta del CSS, eliminando duplicados y convirtiendo cada valor a hexadecimal. Pega una hoja de estilos arriba para ver todos los colores definidos, incluidos los ocultos.

Sí. La herramienta reconoce valores de color en todas las sintaxis CSS habituales y los normaliza todos a hexadecimal para que los resultados sean coherentes y fáciles de comparar. Convierte las funciones rgb() y rgba(), las funciones hsl() y hsla(), la forma abreviada de 3 dígitos como #f0a, el hexadecimal completo de 6 dígitos, y los colores CSS con nombre como crimson, teal y gold, asociándolos con su nombre correspondiente. Para los valores hexadecimales de 8 dígitos y los rgba/hsla que incluyen un canal alfa, el alfa se descarta y solo se conserva el color subyacente, ya que el objetivo es la paleta y no la transparencia por elemento. Como todo termina en un único formato hexadecimal, dos valores escritos de forma distinta -- por ejemplo rgb(220, 20, 60) y #dc143c -- se agrupan en una sola muestra con un contador de uso combinado. Pega tu CSS arriba y cada formato compatible se unificará en una paleta hexadecimal limpia.

Un listado en bruto de cuarenta códigos hexadecimales es difícil de interpretar, así que el extractor clasifica cada color según su luminosidad y saturación en cuatro categorías. Los tonos muy claros se convierten en Colores claros / de fondo, los tonos muy oscuros en Colores oscuros / de texto, los valores de baja saturación en Colores neutros / grises, y los tonos saturados restantes en Colores de acento / marca. Esto refleja cómo se estructura un sistema de diseño real y te permite ver al instante los colores distintivos de una marca frente a sus grises de apoyo. La agrupación también expone la dispersión de color: si el grupo de acento contiene tres azules casi idénticos, normalmente significa que un único color de marca se introdujo de forma ligeramente distinta en varios lugares y debería consolidarse. Cada muestra conserva su código hexadecimal y su contador de uso, y los colores más usados quedan arriba del todo. Pega una hoja de estilos arriba para ver la paleta organizada así automáticamente.

Después de extraer los colores, abre la sección Exportar Paleta y elige el formato Variables CSS. La herramienta genera un bloque :root listo para pegar en el que cada color se convierte en una propiedad personalizada numerada, como --color-1: #2563eb, para que puedas incorporar todo el conjunto directamente a una hoja de estilos y referenciar los tokens en todo tu proyecto. Si necesitas los datos en otro sitio, cambia a Array JSON para obtener cada color con su hexadecimal, su nombre asociado y su contador de uso, útil para scripts o herramientas de diseño, o a Lista hexadecimal para una cadena simple separada por comas que se pega sin problemas en Figma, un panel de muestras o documentación. Un botón de copiar pone el formato elegido en tu portapapeles con un solo clic. Esto es muy útil para recuperar tokens de un tema cuyo archivo de diseño se perdió hace tiempo, o para documentar una marca antes de un rediseño. Pega tu CSS arriba y luego exporta el formato que tu flujo de trabajo necesite.