Obtener un código hexadecimal de una foto lleva un clic. Obtener el código correcto pide un poco más de cuidado, porque la compresión JPEG y los bordes suaves cambian los píxeles antes de que hagas clic. Esta guía muestra dónde se estropean los colores y cómo evitarlo, y cada cifra que contiene se midió en un navegador real.
Por Md. Delwar Hossen · mediciones tomadas el 25 de agosto de 2026· Última actualización
Tres pasos, y lo único que conviene entender
Carga una imagen, pasa el cursor para encontrar el píxel que quieres y haz clic para quedártelo. Lo que sigue son esos mismos tres pasos con sus razones.
Dentro de la pestaña de tu navegador
Tu imagen
Arrastrada, pegada, elegida o descargada desde una URL.
Decodificada una vez
createImageBitmap, con la orientación EXIF aplicada para que una foto del teléfono salga derecha.
Lienzo de origen
Mantenido a la resolución natural de la imagen y nunca escalado. Toda lectura de color sale de aquí.
↓ el mismo lienzo alimenta a ambos ↓
El lienzo visible
lo que ves
Se dibuja con una transformación de zoom y desplazamiento, con el suavizado desactivado por encima de 2× para que veas cada píxel. Nunca se muestrea nada de él.
El muestreador
lo que obtienes
Lee el lienzo de origen en el píxel bajo tu cursor, promediando el cuadrado que elegiste en el control de muestra.
Tu imagen solo genera una petición de red si pegas la URL de una imagen. Un archivo que arrastras o pegas se decodifica en memoria y no se envía a ninguna parte. Para comprobarlo, abre el panel de red de tu navegador mientras tomas colores: no aparece ninguna petición.
Conviene fijarse en esa bifurcación del medio, porque responde a la pregunta más repetida. Ampliar al 6400 por ciento no da una lectura más precisa, y volver a alejarse no la da más borrosa. El zoom existe para que tú veas en qué píxel vas a hacer clic. La lectura sale siempre del original intacto.
Cinco formas de cargar una imagen, y qué implica cada una
Todas acaban en el mismo sitio. Las diferencias están en lo que puede salir mal.
Arrástrala
Arrastra un archivo a cualquier punto del selector. La zona de destino se resalta mientras estás encima.
Soltar una segunda imagen sustituye a la primera y borra tus marcadores.
Pégala
Una captura de pantalla, o una imagen copiada de cualquier sitio. Funciona desde cualquier parte de la página.
Se ignora mientras el cursor está en un campo de texto, así que pegar un enlace en el campo de URL hace una sola cosa.
Elige un archivo
El selector de archivos de siempre, filtrado a imágenes.
En el teléfono, desde aquí llegas a tu galería de fotos. La mayoría de los selectores de archivos del teléfono ofrecen además la cámara como origen.
Pega una URL
Pega un enlace a una imagen y se descarga y decodifica en tu navegador.
Solo funciona si el servidor permite que otros sitios lean sus imágenes. Muchos no lo permiten. Si se niega, descarga el archivo y suéltalo.
Usa la de ejemplo
Una fotografía llamada Powder at sunset, pensada para que pruebes todo antes de usar un archivo tuyo.
Las cuadrículas de píxeles de la sección de la lupa, más abajo, salen de esta foto.
Tamaño máximo
40 MB
Dimensiones máximas
Sin límite
Formatos
Lo que tu navegador sepa decodificar
Orientación de la foto
EXIF aplicado
No hay límite de dimensiones porque la imagen nunca se redimensiona para muestrearla: se mantiene a su resolución natural y se lee directamente. La única regla de formato que puede darte problemas es la de los vectoriales: un SVG sin ancho y alto en su elemento raíz no tiene resolución que muestrear y se rechazará.
La lupa, y el píxel que de verdad querías
Al pasar el cursor se amplían los trece por trece píxeles a su alrededor. Esa ventana no es decoración: con el zoom normal, un píxel es mucho más pequeño que la punta del cursor, así que sin ella estás adivinando.
Zona
Píxel 435, 204 de la fotografía de ejemplo, ampliado unas 20 veces.
Muestra
#E79983
Solo el píxel bajo el cursor.
#CE8472
A 6,64 del valor de un solo píxel.
#B97262
A 12,92 del valor de un solo píxel.
#A8675D
A 17,9 del valor de un solo píxel.
Lo que cuesta fallar por un píxel
12,14
Diferencia máxima entre muestras promediadas
11,37
Dos zonas distintas se tocan dentro de los mismos trece píxeles. Ampliar la muestra promedia a través del límite y devuelve un color que no está en ninguna de las dos, así que este es el único caso en que hay que dejar la muestra en un solo píxel y acercarse con el zoom.
Píxel 149, 336 de la fotografía de ejemplo, ampliado unas 20 veces.
Muestra
#877978
Solo el píxel bajo el cursor.
#524442
A 19,53 del valor de un solo píxel.
#554745
A 18,55 del valor de un solo píxel.
#584948
A 17,79 del valor de un solo píxel.
Lo que cuesta fallar por un píxel
21,44
Diferencia máxima entre muestras promediadas
1,95
Detalle y ruido de compresión, sin ningún límite único que lo atraviese. Fallar por un píxel te deja en un sitio bastante distinto, que es exactamente el caso para el que sirve una muestra más ancha.
Píxel 72, 17 de la fotografía de ejemplo, ampliado unas 20 veces.
Muestra
#283270
Solo el píxel bajo el cursor.
#283371
A 0,36 del valor de un solo píxel.
#283371
A 0,36 del valor de un solo píxel.
#283371
A 0,36 del valor de un solo píxel.
Lo que cuesta fallar por un píxel
0,31
Diferencia máxima entre muestras promediadas
0
No pasa nada en estos trece píxeles. Todos los tamaños de muestra caen en el mismo sitio y fallar por un píxel no te cuesta nada, así que la muestra más estrecha es la correcta.
Ambas cifras son diferencias CIEDE2000. Por debajo de 1, el ojo no distingue dos colores; por encima de 10, se ven como colores distintos.
Cómo interpretar los tres casos
Cambia entre ellos arriba y observa las dos cifras de debajo. Son toda la regla del control de muestra, y puedes deducirla en lugar de creértela:
Un borde nítido. Fallar por un píxel sale caro y las muestras promediadas no coinciden entre sí. Esa discrepancia es la señal de que hay un límite dentro de la ventana. Quédate en un píxel, amplía y apártate de la línea de unión.
Textura fina. Fallar por un píxel sale igual de caro, pero esta vez las muestras promediadas caen todas en el mismo punto. No hay ningún borde que estropee el promedio, así que amplía la muestra.
Una zona tranquila. Fallar por un píxel no cuesta nada y todos los tamaños de muestra coinciden. Usa el más estrecho y sigue adelante.
A qué distancia cae una muestra del color que realmente hay
200 tomas en puntos al azar sobre un campo con ruido cuyo promedio real es #10A99B. Cuanto más bajo, más cerca.
1 px
6,45
3 × 3
2,07
5 × 5
1,16
11 × 11
0,57
Pasar de 1 px a 11 × 11 reduce el error de 6,45 a 0,57: de un color claramente equivocado a uno que ningún ojo distingue del correcto. Eso solo se cumple si los píxeles alrededor del cursor pertenecen a lo mismo; si la muestra cruza un borde, ese mismo promedio juega en tu contra.
Qué hace el zoom
Una imagen más pequeña que el área de trabajo se amplía para encajar, pero nunca más de ocho veces, para que un favicon diminuto no te llene la pantalla de cuatro cuadrados de color.
Puedes llegar al 6400 por ciento. Por encima de 2×, el suavizado se desactiva para que veas los bordes reales de cada píxel y no un degradado borroso.
La rueda amplía alrededor del puntero, así que el píxel que tienes bajo el cursor sigue ahí.
Al mover la imagen, siempre queda al menos un cuarto de ella en pantalla, así que no puedes perderla por el borde.
Medido en un navegador real
Por qué el color que tomaste no es el que querías
Tres cosas dañan un color antes de que llegues a hacer clic. Ninguna es culpa del selector, todas se pueden evitar y las tres se pueden medir. Por eso, en lugar de describirlas, aquí están medidas.
Subir la calidad del JPEG no salva un borde
Un dibujo de colores de marca planos, guardado con cinco ajustes de calidad y vuelto a leer. Las barras son la diferencia media CIEDE2000 respecto al original, sobre 51.362 píxeles situados en una zona plana y 5019 situados en un límite.
Dentro de una zona plana
Sobre un borde
q95
0,37
6,91
q85
0,6
7,28
q75
0,77
7,58
q60
0,98
8,2
q40
1,2
8,98
Incluso con la calidad más alta, un píxel sobre un borde ya se desvía 6,91, mientras que uno en una zona plana solo se desvía 0,37, una diferencia que nadie ve. Bajar la calidad a q40 cambia los dos números mucho menos que alejarse del borde. Dónde haces clic importa más que el ajuste de calidad.
Hasta dónde contamina un límite a su vecino
Dos colores planos que se tocan en un borde nítido, guardados con q90 y leídos de nuevo píxel a píxel, alejándose de la línea de unión.
19,04
4,95
0,76
1,53
0,76
0,36
1,41
0,3
0,3
1,1
visible a simple vista · 2,3
12345678910
píxeles desde el límite
El primer píxel al cruzar la línea de unión está a 19,04 del color que debería tener: sale como #648187, un color que no está en ninguna de las dos mitades de la imagen. A 3 píxeles del borde, el error ya queda por debajo de la línea a partir de la cual la diferencia se ve a simple vista. Guardar el mismo archivo con q60 dio el mismo resultado, así que esto tampoco se arregla subiendo la calidad.
Todo borde de un archivo sin pérdida también es inventado
Un círculo dibujado sobre un fondo, sin compresión ninguna de por medio.
#24409A
La forma
lo que querías tomar
#7A736A
Su borde
34,96 de distancia respecto a la forma
#FBBF24
El fondo
el otro color real
Para que una curva parezca suave, el renderizador mezcla la forma con el fondo a lo largo de todo su contorno. Ese único círculo tiene 77 colores distintos alrededor del borde, y ni uno solo está en el diseño. Haz clic en el centro visual de un borde y obtendrás #7A736A: un color que nadie eligió, a 34,96 del que buscabas. Ningún formato de archivo evita esto, así que la solución es acercarse lo bastante para ver la cuadrícula de píxeles y hacer clic dentro de la forma.
Qué hacer al respecto
Pide el archivo sin pérdida. Cuando un color tiene que ser exacto, un PNG o un SVG no tiene artefactos de compresión que muestrear por error.
Haz clic en el centro de las cosas. No en el borde del logotipo, ni en el contorno de la letra, ni en el reborde del botón. Unos pocos píxeles hacia dentro son la diferencia entre el color real y uno inventado.
Amplía antes de hacer clic. Por encima de 2× se ve la cuadrícula de píxeles y dejas de adivinar dónde está un límite.
Ajusta la muestra a la superficie. Un píxel en color plano y cerca de los bordes; una muestra más ancha sobre ruido o textura.
Cómo se produjeron estas cifras
Cada cifra de esta página sale de scripts/measure-color-drift.mjs, que se ejecuta en Chromium 151.0.7922.34. Se lanzó por última vez el 25 de agosto de 2026. La codificación y la decodificación JPEG son las del propio navegador, así que los resultados muestran lo que hace un navegador real. Cada diferencia es un valor CIEDE2000 calculado por la misma función que usa la herramienta. El script dibuja sus propias imágenes de prueba; las cuadrículas de píxeles salen de la fotografía de ejemplo incluida.
Teclado y gestos
Las flechas son la forma más fiable de acertar en un píxel concreto. Haz clic una vez en la imagen para darle el foco y las teclas de abajo funcionarán.
Sobre la imagen
Flechas
Mover el cursor un píxel
ShiftFlechas
Mover diez píxeles
Enter
Fijar el color bajo el cursor
Espacio
Mantenla presionada y arrastra para mover la imagen
+
Acercar
-
Alejar
0
Ajustar la imagen completa
Nada de esto funciona hasta que cargas una imagen, y es a propósito: un lienzo vacío no tiene píxeles por los que moverse.
Puntero y táctil
Clic
Tomar un color y fijarlo
Rueda
Zoom alrededor del puntero
Botón central
Arrastra para mover la imagen sin mantener Espacio
Un dedo
Arrastra para desplazar, toca para tomar
Dos dedos
Pellizca para hacer zoom
Un clic que arrastra más de cuatro píxeles se trata como desplazamiento y no toma nada, así que un pulso algo tembloroso nunca deja un marcador que no querías.
Hay un atajo que funciona en toda la página y no solo sobre la imagen: Ctrl + V carga la imagen que tengas en el portapapeles, o sigue un enlace de imagen si eso es lo que copiaste. Se desactiva mientras escribes en un campo de texto.
De un píxel a una paleta
Un solo código hexadecimal rara vez basta. Las cuatro pestañas junto a la imagen convierten tu selección en algo con lo que trabajar.
Paleta de la imagen
Los colores de los que realmente está hecha la fotografía, con la proporción de píxeles que ocupa cada uno. La imagen se reduce a 160 píxeles en su lado largo, se divide con el algoritmo de corte por mediana y luego se refina con k-medias ponderadas en CIE LAB, para que los grupos coincidan con cómo agrupa los colores una persona y no con cómo ordena números una máquina.
Las zonas totalmente transparentes se dejan fuera, así que un logotipo sobre fondo transparente te da los colores del logotipo y no una gran proporción de nada.
Mis colores
Cada clic deja un marcador numerado sobre la imagen. Renómbralos, reordénalos, descarta los que no quieras. El orden en que los dejes es el orden en que salen al exportar, y los nombres se convierten en los nombres de variable.
Los marcadores pertenecen a la imagen. Cargar otra los borra, así que exporta primero si quieres conservarlos.
Armonías
Seis esquemas construidos rotando el tono de tu selección. La rotación se hace en OKLCH y no en HSL, y eso importa más de lo que parece: si rotas en HSL, los amarillos salen sucios y los azules, chillones, porque en HSL pasos iguales no son pasos iguales para el ojo.
Elige algo casi gris y todos los esquemas acaban en el mismo color. El panel lo dice en lugar de disimularlo.
Tintes y sombras
Tintes hacia el blanco, sombras hacia el negro y tonos hacia el gris, diez pasos cada uno. La cuarta opción es la que te conviene para una interfaz: una escala de 50 a 950 con luminosidades perceptuales fijas, que es lo que espera un sistema de diseño.
Pasar el cursor por la imagen actualiza la muestra y las nueve notaciones en tiempo real; las armonías y las escalas esperan a que hagas clic, para no parpadear entre mil valores mientras mueves el cursor. Para analizar un color a fondo (34 formatos, contraste, daltonismo y el diagrama de gama), pégalo en el selector de color.
Exportar los colores
Todo lo que ves te lo puedes llevar. Elige qué exportar y en qué formato.
Qué exportar
Mis colores
Los marcadores que pusiste, en tu orden y con tus nombres.
Paleta de la imagen
Los colores dominantes que encontró el extractor.
Armonía actual
Todos los colores de los seis esquemas.
Escala actual
La escala que tengas abierta.
En qué formato
Variables CSS
Propiedades personalizadas en :root
Tailwind v4
Un bloque @theme, pégalo en tu CSS
SCSS
Variables más un mapa $palette
JSON
Todas las notaciones de cada muestra
HEX simple
Un código por línea
Muestras SVG
Una hoja de muestras etiquetada
Cópialo o descárgalo. No hay exportación a imagen: la hoja de muestras SVG es lo más parecido y, además, sigue siendo editable.
El enlace es el color
Cada color que fijas se escribe en la barra de direcciones. Guárdalo en favoritos, mándaselo a alguien o pégalo en un ticket, y se abrirá con ese color exacto. Nada más de tu sesión viaja con él.
Colores recientes
Las dos últimas docenas de colores que tomaste se guardan en tu propio dispositivo y siguen ahí mañana. Nunca salen de él, y se borran con un solo botón.
Cuatro trabajos, de principio a fin
Cuatro tareas habituales, con el recorrido completo por las dos herramientas.
Igualar un color de marca a partir de un logotipo
1Usa el PNG o el SVG si lo tienes. Un JPEG de un logotipo casi siempre tiene los bordes dañados.
2Amplía hasta ver la cuadrícula de píxeles y muévete varios píxeles hacia dentro de la forma, lejos de cualquier contorno.
3Mantén la muestra en 1 px. El color ya es plano, así que promediar solo puede arrastrar algo ajeno.
4Vuelve a tomar el color unos píxeles más allá. Si las dos tomas dan el mismo HEX, estás sobre un color plano y el valor es fiable.
Construir una paleta de interfaz desde una fotografía
1Carga la foto y mira la pestaña «Paleta de la imagen». Esos son los colores de los que está hecha la imagen, con la proporción de píxeles que cubre cada uno.
2Haz clic en el que quieras usar como base. Ese pasa a ser el color actual.
3Abre «Tintes y sombras» y cambia a la escala 50–950, ajustada en OKLCH para que los pasos parezcan igual de espaciados y no solo estén igual de numerados.
4Exporta la escala como Tailwind v4 y pega el bloque @theme en tu hoja de estilos.
2Toma el color del texto y mira las dos tarjetas de accesibilidad: tu color sobre blanco y sobre negro, con la relación de contraste y el nivel WCAG de cada una.
3Para una pareja que no sea blanco o negro, lleva el hexadecimal al comprobador de contraste y define los dos colores.
4Si la pareja no pasa, usa el color sugerido. Mantiene el tono y el croma y mueve solo la luminosidad, así que sigue pareciendo tu color.
1Toma el color que usas para un error, un aviso o un estado correcto.
2Pásalo por la simulación de daltonismo para verlo como lo ven las personas con las cuatro deficiencias más comunes.
3Mira la barra de separación del tipo que te preocupe. Por debajo de unos 10, el color está demasiado cerca de su complementario para transmitir significado por sí solo.
4Si queda por debajo, conserva el color y añade un icono, una forma o una etiqueta para que nunca sea la única señal.
Todos los mensajes que puede mostrarte el selector, qué significan y qué hacer después.
Esa imagen es demasiado grande.Prueba con una de menos de 40 MB.
El límite es de tamaño de archivo, no de dimensiones. Una fotografía grande no es problema; una exportación por capas de 60 MB sí. Guarda una copia aplanada.
Ese archivo no es una imagen.PNG, JPEG, WebP, AVIF, GIF, BMP y SVG funcionan todos.
Normalmente es un PDF, un archivo de diseño o un ZIP. Exporta primero desde él una imagen rasterizada o vectorial.
Esa imagen no tiene un tamaño fijo.Los archivos vectoriales necesitan ancho y alto para poder muestrearlos.
Un SVG sin ancho y alto en su elemento raíz no tiene resolución natural que muestrear. Añádeselos, o ábrelo y exporta un PNG.
No se pudo descargar esa imagen.El sitio que la aloja impide que otros sitios lean sus imágenes. Descárgala y suelta el archivo aquí.
Es una regla del navegador y ninguna página web puede saltársela. Descarga el archivo y suéltalo aquí.
Solo se admiten URL de imagen http o https.
Has pegado algo que no es una dirección web, o una URL data: o file:. Para un archivo local, usa el botón «Elegir imagen».
Tu navegador bloqueó el acceso al portapapeles
Copiar necesita permiso, y algunos navegadores lo deniegan en ventanas privadas o cuando la página no tiene el foco. Haz clic en la página e inténtalo de nuevo, o selecciona el valor y cópialo a mano.
Preguntas que surgen al usarlo
¿Por qué no pasa nada al presionar Ctrl + V?
El atajo de pegar se ignora mientras el cursor está dentro de un campo de texto, para que pegar un enlace en el campo de URL no intente además cargar el portapapeles como imagen. Haz clic en cualquier parte vacía de la página y vuelve a pegar.
¿El zoom cambia el color que obtengo?
No. El zoom y el desplazamiento solo afectan al lienzo que miras. Cada lectura se toma de un segundo lienzo oculto mantenido a la resolución natural de la imagen, así que el mismo píxel devuelve el mismo valor al 100 por ciento y al 6400 por ciento. Amplía únicamente para ver en qué píxel vas a hacer clic.
¿Qué tamaño de muestra conviene usar?
Empieza en 1 px. Amplíalo solo cuando los píxeles alrededor del cursor pertenezcan todos a la misma cosa pero tengan ruido, que es donde más ayuda: sobre un campo con ruido, 11 × 11 cayó a 0,57 del color verdadero mientras que 1 px cayó a 6,45. Cerca de cualquier borde haz lo contrario y quédate en 1 px, porque ahí una muestra más ancha promedia a través del límite y devuelve un color que no está en ninguno de los dos lados.
¿Por qué el color que saqué no coincide con el del manual de marca?
Casi siempre una de tres cosas. Hiciste clic a un par de píxeles de un borde, donde la compresión ha emborronado los dos colores; medido sobre un límite duro, el primer píxel al cruzar se desvía 19,04 y hacen falta 3 píxeles para que se recupere. O hiciste clic en un borde suavizado, que es una mezcla de la forma y de lo que haya detrás y no existe en ningún archivo de diseño. O la imagen es una captura de una captura. Amplía, muévete unos píxeles hacia el centro de la forma y vuelve a tomarlo.
¿Cómo me muevo exactamente un píxel?
Haz clic una vez en la imagen para darle el foco y usa las flechas. Cada pulsación mueve el cursor un píxel, y Shift con una flecha lo mueve diez. Pulsa Enter para fijar el color que está bajo el cursor.
¿Por qué no carga una imagen desde su URL?
El sitio que aloja esa imagen no permite que otros sitios lean sus píxeles. Los navegadores lo imponen y no hay forma de saltárselo desde una página web, y por eso la herramienta te lo dice con claridad en lugar de fallar en silencio. Descarga la imagen y suelta el archivo aquí.
¿Se conservan mis colores si recargo la página?
Tu color actual sí, porque vive en la barra de direcciones y puedes guardar o compartir ese enlace. Los colores usados recientemente se guardan en tu propio dispositivo y también sobreviven. Los marcadores sobre la imagen no sobreviven a una recarga, y cargar una imagen nueva también los borra, así que exporta o copia lo que quieras conservar antes de seguir.
¿Cómo saco un color de un PDF?
Abre el PDF, amplíalo hasta que el color ocupe buena parte de la pantalla, haz una captura y pégala aquí con Ctrl + V (⌘ + V en Mac). Después haz clic en el píxel. Una captura en PNG conserva los colores tal como los muestra tu pantalla, que es lo que necesitas para trabajo web.
¿Cómo saco un color de una imagen desde el teléfono?
Abre esta página en el navegador del teléfono, toca «Elegir imagen» para escoger una foto de la galería o hacer una nueva, luego pellizca para ampliar y toca el píxel que quieras. Los códigos aparecen debajo de la imagen, y cada uno se copia con un toque.
Y esa es toda la herramienta
Abre el selector y pruébalo con la fotografía de ejemplo. Nada de lo que cargues sale de tu dispositivo, y no tienes que registrarte en nada.
