Sacar el color de una imagen con precisión de píxel

Un selector de color de imagen es una herramienta que lee los valores reales de los píxeles de una imagen y te entrega sus códigos de color. Señalas un punto de una foto, una captura o un logotipo y te dice que ese píxel es #F5A17D, o rgb(245, 161, 125), o la notación que necesites. Ese es todo su trabajo. No es un filtro ni un editor, y tu imagen no cambia en nada. Es la forma de sacar un color de una imagen y meterlo en una hoja de estilos, un archivo de diseño o un pedido de pintura.

Tu navegador decodifica la imagen en una cuadrícula de píxeles, y cada píxel guarda un valor de rojo, uno de verde y uno de azul entre 0 y 255. Esta herramienta dibuja esa imagen decodificada en un lienzo HTML a su tamaño original completo y luego lee el píxel que hay bajo el cursor. Esos tres números se convierten en todas las demás notaciones: el hexadecimal son los mismos números escritos en base 16, mientras que HSL y OKLCH describen el mismo color mediante ángulo y luminosidad. El zoom solo cambia lo que ves. El lienzo que realmente se lee nunca se escala, así que una lectura a 10x es idéntica a la que obtienes con la imagen ajustada a la ventana.

Porque adivinar cuesta más tiempo que medir, y la gente nota cuando un color está casi bien. Si estás rehaciendo una maqueta a partir de una captura, igualando un color de marca sacado de un PDF que te enviaron, o extrayendo una paleta de una fotografía, el color ya está ahí. Solo necesitas tenerlo en un formato que puedas pegar. Un selector te da además todo lo que rodea a un color y es tedioso de calcular a mano: sus tonos, su relación de contraste con el blanco y el negro, y si sigue distinguiéndose de sus vecinos para alguien con una deficiencia de visión cromática.

Suelta tu imagen en el selector, pasa el cursor por la zona que quieras y haz clic. La lupa muestra el bloque de 13 × 13 píxeles bajo el cursor con la cuadrícula dibujada, así que ves qué píxel vas a tomar antes de tomarlo. Al hacer clic se deja un marcador numerado y el panel de al lado se rellena con nueve notaciones de ese píxel. Haz clic en cualquiera para copiarla. Cuando tiene que ser exacto, acércate con el zoom y usa las flechas, que mueven la muestra píxel a píxel y te ahorran depender del pulso.

Cualquiera que tu navegador sepa decodificar, lo que en la práctica cubre JPEG, PNG, WebP, AVIF, GIF y BMP, además de archivos SVG que lleven un ancho y un alto intrínsecos. El límite es de 40 MB por archivo; no hay límite de dimensiones. Puedes arrastrar un archivo, buscarlo, pegar una captura con Ctrl + V o pegar la URL de una imagen de la web. Las fotos hechas con el teléfono llegan bien orientadas, porque la orientación EXIF se aplica al decodificar la imagen en lugar de ignorarse.

Sí, de dos maneras distintas. Cada clic deja un marcador y no hay tope de cuántos coloques, así que puedes recorrer una imagen recogiendo colores, renombrar cada uno, reordenarlos y exportar el conjunto de una vez. Por otro lado, la pestaña de paleta describe la imagen entera de golpe: se reduce a 160 píxeles en su lado más largo, se divide con una pasada de corte por mediana y luego se refina con k-medias ponderadas en CIE LAB, para que los grupos coincidan con la forma en que la gente ve el color de verdad. Cada una de las ocho muestras indica la parte de la imagen que ocupa.

Sí. Toca para seleccionar, arrastra con un dedo para desplazarte y pellizca con dos para hacer zoom. Al elegir un archivo, el teléfono suele ofrecer la cámara como origen, así que puedes fotografiar algo y sacarle el color al momento. Lo único que se pierde en una pantalla táctil es el paso previo del cursor: no hay un puntero que vaya por delante, así que el toque confirma directamente. En detalles pequeños conviene pellizcar primero para acercarte y tocar después, igual que en un equipo de escritorio recurrirías a las flechas.

Sí, en Chrome, Edge y otros navegadores basados en Chromium. El botón «Tomar de la pantalla» usa la API nativa EyeDropper del navegador, que puede muestrear cualquier píxel de tu pantalla, incluida otra ventana, el fotograma de un vídeo o un PDF. Firefox y Safari no han implementado esa API, así que allí el botón no aparece. En esos navegadores, haz una captura y pégala con Ctrl + V. Tomar el color de una captura en PNG suele devolver el mismo valor que tendrías en la pantalla.

Nueve, en tiempo real, para cada color que tomes: HEX, RGB, HSL, HSV, CMYK, LAB, LCH, OKLCH y el nombre CSS más cercano. El nombre se calcula con CIEDE2000 en lugar de con la distancia RGB directa, así que acaba en el nombre que de verdad se parece más. HEX y RGB son los que más vas a pegar; con HSL y HSV es más fácil trabajar cuando quieres el mismo color un poco más claro, y OKLCH es perceptualmente uniforme, razón por la que las escalas y las armonías se calculan en él y no en HSL. El selector de color del sitio descompone un solo color en 34 códigos, entre ellos HWB, CIELUV, OKLab, CIE XYZ y sRGB lineal.

La lectura en sí es exacta: la herramienta devuelve los valores de byte de la imagen decodificada, sin interpolación y sin redondeos. La precisión se pierde en la imagen. En un JPEG guardado con calidad 95, un píxel de una zona plana queda a 0,37 delta-E del original (delta-E mide la diferencia de color visible; por debajo de 1 no se ve). Un píxel en un borde ya se desvía 6,91, y el color no vuelve a ser exacto hasta unos 3 píxeles de distancia de un borde duro. El suavizado de bordes hace un daño parecido sin compresión: el borde de un círculo de prueba produjo 77 colores que no están ni en la figura ni en el fondo. Medido el 25 de agosto de 2026 en Chromium 151.0.7922.34.

Sí. Cualquier valor suelto se copia con un clic, y la pestaña de exportación se lleva un conjunto entero de una vez, ya sean tus marcadores, la paleta extraída de la imagen, las armonías o una escala completa de 50 a 950. Hay seis formatos disponibles: propiedades personalizadas de CSS, un bloque @theme de Tailwind v4, variables SCSS con su mapa, JSON, una lista simple de códigos hexadecimales y una hoja de muestras SVG con las etiquetas dibujadas. Cada uno puede copiarse al portapapeles o descargarse como archivo. No hay exportación a PNG ni a muestrarios de Adobe; la hoja SVG es lo más parecido a una imagen compartible de una paleta.

No. En este sitio no hay ningún punto de subida: tu navegador abre el archivo y la herramienta lee los píxeles de un lienzo en la misma pestaña. No hay cuenta ni analíticas. Para comprobarlo, abre el panel de red de tu navegador y toma algunos colores: no aparece ninguna petición. La prueba de extremo a extremo del proyecto hace lo mismo y falla si alguna petición sale de la página. La única excepción es pegar la URL de una imagen, porque entonces tu navegador descarga esa dirección de quien la aloja.

Estás en uno. Este selector de color de imagen es gratuito, sin registro, sin marca de agua, sin tope diario y sin una versión de pago que se reserve funciones: todas las notaciones, la extracción de paleta y los seis formatos de exportación están abiertos a todo el mundo. Eso solo es posible porque el trabajo ocurre en tu dispositivo, así que no hay un gasto de servidor por imagen que recuperar. Puedes usarlo online en el equipo, la tableta o el teléfono, con cualquier navegador moderno y sin instalar nada. Guarda la página en favoritos si la quieres a mano; el enlace de tu barra de direcciones guarda además el último color que tomaste.

El que responda a la pregunta que tienes, y en realidad solo hay cuatro cosas que valga la pena comprobar. ¿Manda tu archivo a un servidor o lo lee en tu navegador? ¿Te da algo más que un código hexadecimal, como una paleta, una comprobación de contraste o una escala de tonos? ¿Puedes ampliar el área de muestra, que es lo que hace legible una foto con ruido? ¿Y puedes sacar el resultado en un formato que acepten tus herramientas? Este cumple las cuatro. Y, para ser claros con lo que no hace: el cuentagotas de pantalla solo funciona en navegadores basados en Chromium, y no hay exportación a muestrarios de Adobe ni a PNG.

Haz la captura, vuelve a esta página y presiona Ctrl + V (⌘ + V en Mac): la imagen se carga al instante. Haz clic en el píxel que necesitas y copia su código HEX. Las capturas suelen guardarse en PNG, sin compresión, así que el código normalmente coincide con lo que veías en pantalla.

Carga la imagen y abre la pestaña «Paleta de la imagen»: verás sus ocho colores dominantes y el porcentaje de la imagen que ocupa cada uno. Copia cualquiera con un clic o exporta la paleta completa como variables CSS, bloque de Tailwind, SCSS, JSON, lista de códigos HEX u hoja SVG.

Sí. Cada color que tomas muestra el nombre CSS más cercano, como «slateblue» o «tomato», elegido por lo parecidos que se ven los colores y no por la distancia entre números RGB, además de una descripción breve en palabras. El nombre es la coincidencia más cercana; el código HEX es el valor exacto.

No directamente. El selector de color de Google, que aparece al buscar «selector de color», te deja elegir un color de un espectro, pero no puede leer un píxel de tu imagen. Para obtener el código exacto de una foto o una captura, ábrela en un selector de color de imagen y haz clic en el píxel.

No. Este selector funciona en cualquier navegador moderno, en equipos de escritorio o en el teléfono, sin instalar nada. Para tomar un color de cualquier parte de la pantalla, usa el botón «Tomar de la pantalla», que funciona en Chrome y Edge. En otros navegadores, haz una captura y pégala aquí.