Herramientas
Extractor de paleta de colores
Extractor de paleta de colores de una imagen
Saca la paleta de colores de cualquier foto o imagen y expórtala en varios formatos.
Suelta una imagen aquí
o haz clic para elegir un archivo, o pégala
Sobre esta herramienta
El extractor analiza una foto o una ilustración y te devuelve los colores que la forman. Sirve para crear una paleta a partir de una imagen de referencia, para vestir una web con los colores de la foto de cabecera, para preparar un moodboard o para sacar los tonos de un producto, un cuadro o un paisaje sin tener que ir píxel a píxel con un cuentagotas.
Arrastra una imagen al recuadro, haz clic para elegirla o pégala desde el portapapeles. Después escoge qué quieres destacar: colores dominantes, vivos, apagados, claros, oscuros, cálidos, fríos o acentos. Ajusta con − y + cuántos colores quieres (de 3 a 11) y pulsa «Volver a extraer» o la barra espaciadora si quieres otra variante. La lista indica qué porcentaje de la imagen ocupa cada color y puedes copiarlo todo, copiarlo como variables CSS o abrir la paleta en el generador.
La imagen no sale de tu equipo: se lee y se analiza en el navegador, sin subirla a ningún servidor. Acepta los formatos que tu navegador sepa abrir (JPG, PNG, WebP, GIF y, en la mayoría, AVIF). Para ir rápido, la foto se reduce a 150 píxeles por el lado largo antes de agrupar los colores, así que los detalles muy pequeños pueden quedar fuera. Los píxeles transparentes se ignoran.
Preguntas frecuentes
¿Cómo saco los colores de una foto?
Carga la foto en el extractor y aparecerá una paleta con sus colores principales. Pasa el ratón (o toca) cada muestra para copiar su código, o usa «Copiar todos» para llevártelos juntos.
¿Por qué la paleta cambia un poco cada vez que la extraigo?
Los colores se agrupan con un algoritmo (k-means) que parte de puntos al azar. Por eso cada extracción puede dar tonos ligeramente distintos; si un resultado no te convence, pulsa la barra espaciadora para probar otra vez.
¿Qué diferencia hay entre colores dominantes, vivos y acentos?
Los dominantes son los que más superficie ocupan; los vivos, los más saturados aunque sean pequeños; y los acentos, colores poco frecuentes que se alejan del conjunto principal, como un detalle rojo en una foto verde.
¿Puedo usar la paleta en Tailwind o en mi CSS?
Sí. «Variables CSS» copia un bloque :root listo para pegar, y cada color de la lista tiene un botón que lo abre en el generador de escalas de Tailwind.