Cómo extraer una paleta de colores de una foto y comprobar si sirve para texto

Una fotografía es un buen lugar para encontrar colores que combinan entre sí y un mal lugar para encontrar un color de texto. Las razones son mecánicas: lo que un extractor les hace a los píxeles y de qué están hechas las fotografías. Esta guía recorre el selector de imágenes y luego las cifras detrás de la línea de contraste que muestra debajo de cada paleta.

Cómo extraer la paleta

1. Carga la foto. Arrástrala al panel que dice “Drop an image here” (suelta una imagen aquí), o presiona Browse image (buscar imagen). Funciona con cualquier cosa que tu navegador pueda decodificar; si no puede leer el archivo, la herramienta te pide un PNG, JPEG, WebP o SVG. Replace (reemplazar) y Remove (quitar) aparecen sobre la imagen una vez cargada.
2. Elige el tipo de extracción. Dominant, Distinct o Accessible, bajo “Extraction” (extracción). La frase debajo de los botones explica qué hace el modo actual, y la tecla M los recorre.
3. Define cuántos colores. Los botones − y + junto a “Colours” (colores) van de 2 a 10. Empieza en 5.
4. Lee cada fila. Cada muestra indica su código hex, su proporción de la imagen como porcentaje y su ratio de contraste sobre blanco.
5. Lee la línea debajo de la lista. Indica cuántas muestras fallarían como texto de cuerpo sobre blanco y, si algún par se vuelve difícil de distinguir con daltonismo simulado, cuántos pares.
6. Cambia a Accessible si el texto va a ir sobre blanco, y luego exporta. Export copia la paleta como CSS, OKLCH, Tailwind v4, SCSS, JSON, tokens de Figma o muestras SVG, y Save here la guarda en este dispositivo.

Debajo de la lista hay dos enlaces. Check colour vision abre las muestras en el simulador de daltonismo, y Build a ramp lleva la primera muestra al generador de escalas y tokens. La herramienta guarda una copia reducida de la imagen para la pestaña, así que puedes seguir cualquiera de los dos enlaces y volver sin perderla.

Qué les pasa a los píxeles

El agrupamiento k-means es el método de fondo. Reparte los píxeles muestreados en un número fijo de grupos asignando cada píxel a su centro más cercano, moviendo cada centro al promedio de sus píxeles y repitiendo hasta que nada se mueve. Cada muestra que ves es uno de esos centros. El proceso, leído en el código fuente de la herramienta:

• La imagen se escala para que su lado más largo mida como máximo 320 píxeles antes de leer nada. Una foto más pequeña se deja como está.
• Se muestrean como máximo 6 000 píxeles, a intervalos regulares. Una foto de 4 000 × 3 000 pasa a 320 × 240 = 76 800 píxeles, así que se lee uno de cada 13 (76 800 ÷ 6 000 = 12.8, redondeado hacia arriba), lo que da 5 908.
• Los píxeles con un valor alfa menor de 128 sobre 255 se omiten, para que un logo sobre fondo transparente no salga como negro.
• El agrupamiento se hace en OKLab, un espacio de color construido para que la distancia numérica entre dos colores siga lo diferentes que se ven. En sRGB, las distancias entre colores oscuros se exageran y las de los claros se subestiman, y así es como un extractor en sRGB devuelve varios oscuros casi idénticos de una foto que claramente tiene varios distintos.
• Se ejecuta hasta 24 rondas, y los centros iniciales no tienen nada de aleatorio: el primero es el píxel que está a mitad de la muestra, y cada uno de los siguientes es el píxel más alejado de los centros ya elegidos. La misma foto da siempre la misma paleta.

Dominant, Distinct y Accessible, comparados

Los tres modos responden preguntas distintas, y el porcentaje junto a cada muestra significa algo ligeramente diferente en cada uno.

Modo	Grupos calculados	Lo que obtienes	El porcentaje
Dominant	El número que definas	Todos los grupos, del más grande al más pequeño	Proporción de los píxeles muestreados en ese grupo
Distinct	El doble del número más dos, 16 como máximo	Grupos tomados del más grande al más pequeño, omitiendo cualquiera que esté a menos de 0.1 de luminosidad y 0.05 de croma de uno ya elegido, y luego recortados al número que definas	Proporción dentro del agrupamiento más grande, así que la columna no tiene por qué sumar 100
Accessible	El número que definas	Los grupos de Dominant, con cada uno que dé menos de 4.5:1 sobre blanco desplazado a la luminosidad más cercana que apruebe	Igual que Dominant

La prueba de duplicados de Distinct solo mira la luminosidad y el croma, no el tono, así que dos acentos de tono distinto con luminosidad y croma parecidos cuentan como uno. Cuando los acentos de una foto se diferencian sobre todo por el tono, Dominant con un número más alto puede ser la mejor forma de que aparezcan.

Accessible busca la luminosidad en pasos de 0.01 y toma el valor aprobatorio más cercano al original, manteniendo el tono y, donde la pantalla puede mostrarlo, el croma.

Por qué los colores de una foto fallan como texto sobre blanco

Hay tres cosas que juegan en contra de una fotografía.

Los centros son promedios. Una muestra es la media de todos los píxeles de su grupo, así que la muestra más oscura es más clara que los píxeles más oscuros que contiene: la sombra se promedia con la casi sombra. Los extremos que necesita un color de texto son lo primero que elimina el promedio.

El texto de cuerpo sobre blanco necesita un color oscuro, y la mayor parte de una fotografía son tonos medios. Para 4.5:1 sobre blanco, la fórmula de WCAG limita la luminancia relativa a 1.05 ÷ 4.5 − 0.05, unos 0.183. En un color neutro, la luminosidad OKLCH es la raíz cúbica de la luminancia relativa, así que eso equivale a una luminosidad de unos ∛0.183 ≈ 0.568. Los ejemplos resueltos en las notas de las herramientas de color del sitio llegan al mismo punto: un azul con luminosidad 0.567 mide 4.50:1, y un ámbar con 0.572 mide 4.51:1.

La cifra de cada muestra es solo sobre blanco. El ámbar de un atardecer, #e8b04b, mide 1.95:1 sobre blanco con una luminosidad de 0.791. Accessible devuelve #a16c00 con 4.51:1, manteniendo el tono 79° y bajando la luminosidad a 0.572, una caída de 0.791 − 0.572 = 0.219. Es un ámbar visiblemente más oscuro que sigue perteneciendo a la fotografía.

Una página oscura invierte el problema. El ratio de un color sobre negro es 21 dividido entre su ratio sobre blanco, así que el ámbar original alcanza 21 ÷ 1.95, más de 10:1, sobre negro. La versión Accessible alcanza 21 ÷ 4.51, justo por debajo de 4.7:1, apenas por encima del límite. Para texto sobre fondo oscuro, quédate en Dominant y calcula así la cifra de cada muestra sobre negro.

Frente a un extractor típico

	Esta herramienta	Un extractor en línea típico
Espacio de agrupamiento	OKLab	sRGB
Modos	Dominant, Distinct o Accessible, con nombre	Uno, sin nombre
Comprobación de uso	Contraste sobre blanco para cada muestra	Ninguna
Una muestra que falla	Búsqueda de luminosidad con el mismo tono	No se ofrece
La imagen	Se decodifica en la pestaña	Se envía a un servidor

Otras formas de hacerlo

No hay un método integrado en macOS, Windows ni iPhone para extraer una paleta de una foto, ni una vía por línea de comandos entre las que estas guías respaldan. Si ya tienes colores de otra fuente, el verificador de contraste te dirá cuáles pueden llevar texto y encontrará la versión más cercana de cada uno que sí pueda.

Cómo comprobar que la foto no sale de tu equipo

La zona para soltar archivos dice que el archivo se lee en tu navegador, y puedes confirmarlo. Abre DevTools, elige el panel Network y luego suelta una foto: no sale ninguna solicitud que transporte la imagen. También puedes desconectarte de la red antes de soltarla, y la paleta aparece igual.

Abre el selector de imágenes con la foto que tienes en mente y lee la línea debajo de las muestras antes de enamorarte de ellas. Si el color que quieres falla sobre blanco, Cómo corregir el contraste sin cambiar tu color de marca explica por qué mover la luminosidad, y no el tono, lo mantiene reconocible.