Generador de paleta de colores desde imagen

Sube una foto y obtén una paleta de 3 a 10 colores junto con el lugar de donde sale cada uno: los seis colores dominantes de la foto de ejemplo son #ADB7B3, #D1CBC2, #0C464B, #F1BB8C, #251E1E, #F7E9DE

La herramienta de arriba lee la foto en tu navegador, la divide en celdas pequeñas, elige entre 3 y 10 colores claramente distintos y los muestra en una tarjeta de paleta. En la foto de ejemplo, un atardecer en la playa, dominan el gris azulado del cielo #ADB7B3 (32 %) y el gris beige de las nubes #D1CBC2 (25 %), seguidos del verde azulado oscuro del mar #0C464B, el resplandor del atardecer #F1BB8C, el marrón casi negro de las rocas #251E1E y el cielo claro alrededor del sol #F7E9DE.

Los puntos sobre la foto de la tarjeta marcan el lugar donde cada color aparece de verdad en la imagen. Si un color no te convence, arrastra su punto a otro lugar y cambiará al color de ese sitio; al pasar el cursor por un color de la lista, solo se ilumina la parte de la foto agrupada bajo él. Una misma foto da paletas muy distintas según elijas «Dominantes», «Vivos» o «Suaves». La tarjeta terminada se guarda como PNG a tamaño real en formato Polaroid, vertical 3:4, historia 9:16 u horizontal 16:9, y los colores se pueden copiar como lista HEX o como variables CSS. La foto se lee solo en este navegador y no se envía a ningún servidor.

Cuándo conviene sacar una paleta de una foto

Partir de una foto que te gusta suele ser más rápido que elegir los colores desde cero, y el resultado tiende a ser armónico. Los colores de una foto se captaron bajo la misma luz, así que rara vez chocan entre sí. Usos habituales:

Elegir los colores base de un blog, un canal o una marca pequeña: toma 3 o 4 colores suaves de una foto con el ambiente adecuado como candidatos para fondos y textos, y usa un color vivo para botones o acentos. Los puntos muestran de qué parte de la foto sale cada color, lo que facilita explicar la elección a otras personas.
Hacer que miniaturas, carruseles o portadas de presentación combinen con una foto: si pintas la banda del título o el fondo junto a la foto con colores sacados de ella, foto y texto no parecen piezas sueltas. La tarjeta horizontal 16:9 pone una franja de color al lado de la foto, así que sirve como primer borrador de una portada de diapositiva.
Guardar y compartir los colores de un viaje o un paisaje: guardada como tarjeta Polaroid o de historia, la foto y sus códigos de color quedan en una sola imagen, fácil de encontrar de nuevo o de enviar a alguien.
Usar una foto como referencia para interiores, ropa o accesorios: si separas en una foto de una habitación las paredes, el suelo y los muebles, los porcentajes te dan una idea de en qué proporción se usa cada color. Los colores de la pantalla pueden verse distintos de la pintura o la tela reales, así que antes de decidir compáralos siempre con una muestra física.

Cómo se usa

Añadir una foto: pulsa «Elegir foto», arrastra un archivo a la zona de trabajo o pega una imagen copiada con Ctrl+V (⌘V). Al principio hay una foto de ejemplo cargada para que puedas probar de inmediato.
Elegir el estilo de extracción: las tres franjas ya están extraídas con el número de colores actual. Compáralas y pulsa la que prefieras.
Fijar el número de colores y el orden: cambia el número entre 3 y 10 con los botones − y +. El orden puede ser de los más extensos a los menos, de los más claros a los más oscuros, o por tono; la tarjeta y la lista siguen el mismo orden.
Afinar con los puntos: si falta un color que quieres, arrastra el punto del color más parecido hasta un lugar de ese color. Con el teclado, selecciona un punto con Tab y muévelo paso a paso con las flechas, o de diez en diez con Mayús+flecha. Un color movido a mano lleva la marca «Elegido a mano», y «Volver a automático» recupera el resultado original.
Elegir el formato de tarjeta: escoge Polaroid, vertical 3:4, historia 9:16 u horizontal 16:9, y decide si la tarjeta muestra los códigos HEX y los puntos de color. Junto a cada formato aparece en píxeles el tamaño que se guardará.
Guardar o copiar: «Guardar tarjeta PNG» guarda a tamaño real la misma tarjeta de la vista previa. «Copiar HEX» copia un código por línea, «Copiar variables CSS» genera líneas como --palette-1: #ADB7B3;, y al pulsar un color de la lista se copia solo su HEX.

Dominantes, vivos y suaves: por qué una misma foto da paletas distintas

Los tres estilos eligen entre los mismos 32 colores candidatos; solo cambia el orden en que se eligen. «Dominantes» empieza por los candidatos que ocupan más superficie de la foto. «Vivos» empieza por los más saturados entre los que ocupan al menos el 0,3 % de la foto. «Suaves» empieza por los más extensos entre los tenues cuya saturación está entre 0,015 y 0,09. Aquí la saturación es la C de OkLCh, es decir, la distancia medida sobre los ejes a y b de Oklab (√(a² + b²)). La tabla muestra seis colores sacados de la foto de ejemplo con cada estilo, de mayor a menor extensión.

Puesto	Dominantes	Vivos	Suaves
1	#ADB7B3 · 32 %	#EAAD7F · 56 %	#87AFAF · 24 %
2	#D1CBC2 · 25 %	#045D61 · 18 %	#C5C0B4 · 22 %
3	#0C464B · 14 %	#51A4A7 · 13 %	#E3D6CA · 21 %
4	#F1BB8C · 12 %	#9D794E · 5 %	#3A2C2C · 12 %
5	#251E1E · 10 %	#7C6041 · 4 %	#F1BB8C · 11 %
6	#F7E9DE · 6 %	#1F878E · 3 %	#0C464B · 10 %

«Dominantes» recoge los colores de las zonas grandes, como el cielo, las nubes, el mar y las rocas. «Vivos» reúne el naranja del atardecer y los verdes azulados de las olas, y «Suaves» trae el gris azulado húmedo y los beiges de la arena y las nubes. El primer color de «Vivos», #EAAD7F, llega al 56 % porque el porcentaje se calcula como la proporción de celdas de la foto cuyo color más cercano, entre los elegidos, es ese. Los seis colores de «Vivos» no incluyen ningún gris, así que las celdas del cielo y las nubes caen todas en el naranja más próximo. Por eso el mismo #F1BB8C aparece con un 12 % en «Dominantes» y con un 11 % en «Suaves».

Cómo se calculan los colores

Dividir en celdas: la foto se divide en 256 celdas a lo largo de su lado largo (256 × 170 en la foto de ejemplo) y se promedian los píxeles de cada celda. Si el lado largo mide más de 256 px, cada celda reúne varios píxeles y las motas sueltas que deja la compresión JPEG se suavizan con el promedio de la celda (en imágenes de 256 px o menos, cada celda es un solo píxel). Las celdas con más de la mitad de transparencia no se cuentan.
Crear 32 candidatos: el algoritmo median cut (Heckbert 1982) reparte los colores de las celdas en 32 grupos y después un paso de refinamiento (k-means, Lloyd 1982) reasigna las celdas al grupo más cercano en Oklab, cuatro veces. Oklab es un espacio de color diseñado para que las diferencias que el ojo ve como parecidas tengan distancias parecidas.
Buscar un lugar real para cada candidato: entre las celdas de ese candidato se toman las «celdas interiores», aquellas cuyas 8 vecinas pertenecen al mismo candidato, y se elige la más cercana al color del candidato. El color que ves es el de esa celda y no el promedio del grupo, así que existe de verdad en la foto. El punto se coloca sobre esa celda. Si varias celdas tienen ese mismo color, gana la más alejada del borde de su zona, así que en una forma de color plano, como un logotipo, el punto queda en el centro de la forma.
Ordenar según el estilo y filtrar: se recorren los candidatos en el orden que marca el estilo y solo se conservan los que están a una distancia ΔEOK (la distancia entre dos colores en Oklab) de al menos 0,07 de todos los colores ya elegidos. En el estilo «Dominantes» de la foto de ejemplo se toma primero el candidato más extenso, #D1CBC2 (11,0 %); el segundo, #E3D6CA (9,3 %), y el tercero, #C5C0B4 (7,6 %), están a 0,040 y 0,036 de #D1CBC2, menos que 0,07, y se descartan. El cuarto, #ADB7B3, está a 0,076 y pasa a ser el segundo color.
Una segunda pasada si hace falta: si con el umbral de 0,07 no se llega al número pedido, se repite con 0,035. Si aun así faltan colores, se devuelven menos y se avisa. Nunca se repite un color para rellenar, de modo que un logotipo de solo tres colores da tres colores aunque pidas seis.
Contar los porcentajes: cada celda de la foto se asigna al color elegido más cercano en Oklab, y la proporción de celdas es el porcentaje que se muestra. Al mover un punto cambia ese color, así que los porcentajes se vuelven a contar.

CSS Color 4 considera que 0,02 en OkLCh es una diferencia apenas perceptible (JND). El umbral de 0,07 de esta herramienta equivale a unas tres veces y media esa cifra, una distancia elegida para que dos colores de una paleta se lean claramente como distintos. Los valores 0,3 %, 0,015 a 0,09, 0,07 y 0,035 son umbrales fijados por esta herramienta, no por una norma. No interviene el azar, así que la misma foto con los mismos ajustes da siempre la misma paleta.

Adónde apuntan los puntos

Un punto está en el centro de la «celda interior» elegida en el paso 3 anterior. Como las vecinas de esa celda tienen el mismo color, los puntos suelen caer dentro de una mancha de color y no sobre un borde. Estos son los lugares donde quedan los seis colores dominantes de la foto de ejemplo. Las coordenadas se miden desde la esquina superior izquierda (0, 0) del original (1440 × 958 px).

Color	Posición (x, y)	Parte de la foto	Luminosidad L	Croma C
#ADB7B3	(1240, 121)	Cielo, arriba a la derecha	0,770	0,012
#D1CBC2	(1026, 172)	Nube, arriba a la derecha	0,844	0,014
#0C464B	(824, 679)	Agua oscura de una ola antes de romper	0,362	0,056
#F1BB8C	(1066, 470)	Resplandor del atardecer sobre el horizonte	0,830	0,088
#251E1E	(903, 882)	Rocas en primer plano	0,243	0,011
#F7E9DE	(706, 346)	Cielo claro alrededor del sol	0,942	0,021

Cuando pasas el cursor por un color de la lista o le llevas el foco con Tab, solo las celdas agrupadas bajo ese color siguen claras y el resto se oscurece. Sirve para ver dónde está realmente un color grande y de qué parte de la foto sale uno pequeño. Al arrastrar un punto, el color cambia al de la celda donde lo sueltas, y la zona iluminada y los porcentajes se recalculan.

Formatos y tamaños de tarjeta

La tarjeta se guarda como PNG con un tamaño fijo y con el mismo aspecto que la vista previa. La foto se recorta por el centro para ajustarla al espacio de foto de la tarjeta, y el espacio sobrante lo ocupan las celdas de color. La proporción del espacio de foto solo sigue a la foto dentro de un intervalo fijo para cada tarjeta (columna «Proporción sin recorte» de la tabla); las fotos que quedan fuera se recortan desde el centro. Por ejemplo, una foto vertical de móvil (3:4) en la tarjeta Vertical 3:4 recibe un espacio de 1080 × 1110, así que solo queda el 77,1 %. Estos son los tamaños con la foto de ejemplo (cercana a 3:2).

Formato de tarjeta	Tamaño guardado (px)	Espacio de foto (px)	Parte de la foto de ejemplo que se conserva	Proporción sin recorte (ancho ÷ alto)	Ideal para
Polaroid	1080 × 1228	960 × 768	83,2 %	0,80~1,25	Tarjeta de registro con borde blanco y, debajo, una franja de color con los códigos HEX
Vertical 3:4	1080 × 1440	1080 × 719	99,9 %	0,97~2,00	Publicaciones altas de feed e imágenes para pines
Historia 9:16	1080 × 1920	1080 × 720	99,8 %	0,79~1,50	Pantalla vertical completa del móvil
Horizontal 16:9	1920 × 1080	1440 × 1080	88,7 %	0,89~1,33	Diapositivas de presentaciones e imágenes de portada de blog

El Polaroid adapta su espacio de foto a la foto dentro de 4:5 a 5:4, así que una foto 3:2 pierde un poco por los dos lados. Si desactivas los códigos HEX, desaparece la línea de texto inferior y la tarjeta se acorta 60 px. El formato vertical 3:4 sigue la ayuda de Instagram: las fotos se suben con 1080 px de ancho y, si la proporción está entre 1,91:1 y 3:4 (de 566 a 1440 px de alto), se mantiene la resolución original. 1080 × 1440 es el tamaño más alto de ese intervalo. El texto HEX sobre una celda de color es blanco o negro, el que dé mayor contraste según WCAG 2.2 sobre ese color.

Errores frecuentes

En una foto de producto sobre fondo blanco, el primer color de «Dominantes» sale blanco: si los colores se eligen por superficie, el fondo es lo más extenso. Para ver los colores del producto, cambia a «Vivos» o recorta la foto alrededor del producto antes de subirla.
Falta un acento pequeño (un paraguas rojo, un cartel amarillo): «Dominantes» empieza por las zonas grandes, así que los colores pequeños quedan desplazados. Cambia a «Vivos» o aumenta el número de colores y, si sigue sin aparecer, arrastra hasta él el punto de un color parecido. Los colores que ocupan menos del 0,3 % de la foto quedan relegados incluso en «Vivos».
El mismo color tiene un porcentaje distinto en cada estilo: el porcentaje depende de qué otros colores se hayan elegido junto a él. No lo interpretes como una superficie fija que ese color ocupa en la foto.
Los colores de una foto de móvil difieren un poco de los de la aplicación de fotos: los móviles recientes suelen fotografiar en un espacio de color más amplio que sRGB (como Display P3), mientras que el lienzo del navegador usa sRGB por defecto, así que los colores se convierten a ese rango. Para colores que se usarán en la web, estos valores sRGB se parecen más a lo que se verá de verdad.
Imprimir o comprar pintura con un color sacado de la pantalla: el HEX es un color de pantalla. Para imprimir, conviértelo según tus condiciones de impresión con el Conversor RGB a CMYK; para pintura o tela, compáralo con una muestra física.
Necesitas el código exacto de un solo punto: los colores de esta herramienta son promedios de celda y pueden diferir del valor de un píxel. Para el valor exacto de un píxel, por ejemplo en un logotipo, usa el Selector de color de imagen.

Límites y precauciones

Los colores salen de promedios de celda con 256 celdas a lo largo del lado largo. El color de una línea más fina que una celda o de un texto diminuto se mezcla con el de sus vecinas.
Hay como máximo 32 candidatos, así que el color de una zona muy estrecha puede no entrar en la lista. Para elegir ese color, arrastra un punto.
Los umbrales de los tres estilos (0,3 %, saturación de 0,015 a 0,09) y las distancias de filtrado (ΔEOK 0,07 y 0,035) los fija esta herramienta. Otras herramientas de paletas eligen de otra manera, así que con la misma foto pueden dar otros colores.
Una foto de más de 2048 px en el lado largo se reduce a ese tamaño antes de leerla y dibujarla en la tarjeta. La tarjeta guardada más grande mide 1920 px, así que la calidad de imagen casi no se ve afectada.
En un PNG con zonas transparentes, las celdas con más de la mitad de transparencia no se cuentan, y la tarjeta dibuja la foto sobre un fondo blanco.
El texto HEX de la tarjeta se dibuja con una fuente monoespaciada instalada en el dispositivo (Menlo, Consolas, etc.), por lo que la forma de las letras puede variar un poco entre dispositivos.

Los valores de las tablas se leyeron con esta herramienta en la foto de ejemplo (1440 × 958 px) el 2026-10-20. El número de celdas, el número de candidatos, las distancias de filtrado y los umbrales de saturación son reglas fijas de esta herramienta y no cambian de un año a otro. La ayuda de Instagram y CSS Color 4 (edición del 2026-10-09), en las que se basan los tamaños de tarjeta, se comprobaron el 2026-10-20.

Fuentes

01Heckbert, P. (1982). Color image quantization for frame buffer displayACM SIGGRAPH Computer Graphics 16(3), 297–307. Median cut
02Lloyd, S. (1982). Least squares quantization in PCMIEEE Transactions on Information Theory 28(2), 129–137. Refinamiento k-means
03Björn Ottosson — A perceptual color space for image processing2020-12-23. Oklab (sRGB lineal → LMS → raíz cúbica → Lab)
04W3C CSS Color Module Level 4 (CRD 2026-10-09)§9.5 C = √(a² + b²), H = atan2(b, a); §14.2.1 OkLCh 1 JND = 0,02; §20.3 ΔEOK = distancia euclídea en Oklab
05WCAG 2.2 — contrast ratio, relative luminance(L1 + 0,05) ÷ (L2 + 0,05), para elegir el color del texto sobre una celda de color
06Instagram Help — Image resolution of photos you share on Instagram1080 px de ancho; se mantiene la resolución original con proporciones de 1,91:1 a 3:4 (de 566 a 1440 px de alto) (comprobado el 2026-10-20)
07MDN — HTMLCanvasElement: getContext()El colorSpace predeterminado del contexto 2d es «srgb»
08Wikimedia Commons — Sunset over beach (Unsplash).jpgCharlie Hang, CC0 1.0. Foto de ejemplo (reducida a 1440 × 958)

Preguntas frecuentes

¿Se sube mi foto a un servidor?

No. La foto que eliges se dibuja solo en un lienzo de este navegador, y tanto la extracción de colores como la creación de la tarjeta PNG se hacen dentro del navegador. No se envía ni se guarda nada, y desaparece al cerrar la pestaña.

¿En qué se diferencian dominantes, vivos y suaves?

Eligen entre los mismos 32 colores candidatos, pero en distinto orden. «Dominantes» empieza por los colores que ocupan más superficie de la foto. «Vivos» empieza por los más saturados (C de OkLCh) entre los que ocupan al menos el 0,3 % de la foto. «Suaves» empieza por los más extensos entre los tenues con saturación de 0,015 a 0,09. En cualquier estilo solo se conservan los colores que están a una ΔEOK de al menos 0,07 de los ya elegidos.

¿Los colores extraídos existen de verdad en la foto?

Sí. Para cada color se toma una de las celdas que resultan de dividir en 256 el lado largo de la foto y se usa el color de esa celda tal cual. Es el color de un lugar de la foto y no el promedio de todo el grupo candidato, y el punto de la tarjeta marca justo ese lugar. Ten en cuenta que una celda ya es un promedio de varios píxeles originales, por lo que puede diferir un poco del valor de un solo píxel.

¿Qué hago si el color que quiero no aparece en la paleta?

Primero prueba a cambiar a «Vivos» o a aumentar el número de colores. Si sigue sin aparecer, arrastra el punto del color más parecido hasta donde está el color que quieres y cambiará al color de ese lugar. Con el teclado, selecciona un punto con Tab y muévelo con las flechas. «Volver a automático» recupera la primera extracción.

¿Por qué los porcentajes no siempre suman 100 %?

Cada porcentaje se redondea a un número entero al mostrarlo. Un porcentaje es la proporción de celdas de la foto cuyo color elegido más cercano es ese, así que, si cambian los demás colores elegidos, también cambia el porcentaje del mismo color.

¿Cómo se decidieron los tamaños de tarjeta?

La tarjeta vertical 3:4 mide 1080 × 1440 px, siguiendo la ayuda de Instagram. Esta indica que las fotos se suben con 1080 px de ancho y que se mantiene la resolución original con proporciones de 1,91:1 a 3:4. La de historia 9:16 mide 1080 × 1920 y la horizontal 16:9, 1920 × 1080. El Polaroid tiene 1080 px de ancho y su altura depende de la proporción de la foto.

¿La misma foto da siempre la misma paleta?

Sí. No interviene el azar, así que en el mismo navegador la misma foto con los mismos ajustes (estilo y número de colores) da siempre los mismos colores. Otros navegadores descodifican el JPEG y reducen las fotos grandes de forma algo distinta, por lo que algún valor puede variar ligeramente. Eso sí, una foto en el espacio de color más amplio del móvil (Display P3) la convierte el navegador a sRGB, por lo que los valores pueden diferir un poco de los que ves en la aplicación de fotos.

¿En qué se diferencia del Selector de color de imagen?

El Selector de color de imagen sirve para pulsar un punto de la foto y leer con exactitud los códigos HEX, RGB, HSL y CMYK de ese píxel. Esta herramienta elige varios colores distintos de toda la foto, forma con ellos una paleta y está pensada para guardarla como tarjeta que se puede compartir, junto con los lugares de donde salen los colores.