Extractor de paleta de colores

Saca una paleta de colores de una imagen, comprueba el contraste de dos colores cualesquiera y expórtala como CSS o Tailwind, directamente en tu navegador.

Acerca de Extractor de paleta de colores

Qué es

Esta herramienta encuentra los colores principales de una imagen —una foto, un logotipo, una captura— y los muestra como paleta con el dominante primero. Añade tus propios colores con un cuentagotas directamente de la imagen, compara dos cualesquiera según el contraste WCAG y exporta la paleta como variables CSS, configuración de Tailwind o JSON.

Funciones principales

  • Una paleta de los colores principales de una imagen PNG, JPEG o WebP, con el dominante primero.
  • El número de colores que elijas.
  • Tus propios colores tomados de la imagen con un cuentagotas.
  • Una comprobación de contraste WCAG para dos colores cualesquiera, para texto normal y grande.
  • Exportación como variables CSS, Tailwind o JSON; copia de cualquier color en HEX o RGB.

Cómo usarlo

  1. Suelta una imagen en la zona, haz clic en ella para elegirla o pulsa «Ejemplo».
  2. Ajusta el número de colores.
  3. Si hace falta, toma más colores de la imagen y marca dos para comparar su contraste.
  4. Copia colores sueltos o exporta toda la paleta.

Cuándo es útil

  • Montar la paleta de una web a partir de una foto de marca o un logotipo.
  • Comprobar que el texto en tus colores se lee bien antes de usarlos.
  • Sacar los códigos exactos de color de una captura de un diseño.

Privacidad y limitaciones

Tus datos

Tu imagen se procesa en el navegador y no se sube a ningún servidor: el sitio solo recibe un evento anónimo de «herramienta abierta», sin el contenido. Un resultado que envías a otra herramienta se queda 24 horas en este dispositivo, en «Actividad reciente».

Limitaciones

  • Los píxeles totalmente transparentes se ignoran; una imagen sin ningún color visible no da paleta.
  • La paleta muestra los grupos de color principales, no cada tono de la imagen.

Preguntas frecuentes

¿Cómo se eligen los colores?

Los colores parecidos de la imagen se agrupan, y cada grupo da un color de la paleta. El grupo que ocupa más superficie es el color dominante.

¿Qué significan AA y AAA en la comprobación de contraste?

Son niveles de accesibilidad WCAG. AA pide un contraste de al menos 4,5:1 para texto normal y 3:1 para texto grande; AAA pide 7:1 y 4,5:1.

¿Qué formato de exportación elijo?

Variables CSS para CSS normal, Tailwind para una configuración de Tailwind y JSON para herramientas de diseño o tus propios scripts.