Selector de color de una imagen online gratis
Suelta una foto, apunta con la lupa y copia el HEX, el RGB o el HSL. En un logo plano basta un píxel. En una foto puedes promediar un recuadro. En el móvil, amplía y apunta por encima del dedo. El archivo se queda en esta pestaña.
Suelta una foto para sacar el color
JPG, PNG, WebP, GIF, BMP o AVIF. Un archivo de menos de 40 MB. Pega una captura con Ctrl+V o ⌘V.
100% privado: los píxeles se quedan en este navegador. No se sube nada.
Pasa por la foto. La lupa son los píxeles reales. Clic para fijar. En el móvil, apunta por encima del dedo.
Colores de este archivo
Colores fijados
Solo Chrome y Edge. Esto lee la pantalla, no el archivo de arriba.
100% local
El selector de color corre en este navegador. La foto no sale de la pestaña.
Sin subir
No se envía nada a un servidor para leer un píxel o armar la paleta.
Gratis, sin cuenta
Sin registro y sin marca de agua en el código. Copia HEX, RGB o HSL.
También en este sitio: Dividir imagen · Recortar imagen · Difuminar imagen · Pixelar imagen · Unir imágenes · Compresor de imágenes
Qué es un selector de color de una imagen
Un selector de color de una imagen lee el color de un punto en un archivo que ya tienes y te da el código. La gente también busca sacar el color de una imagen, código hex de una imagen, paleta de colores de una imagen, o color de una imagen en RGB. El trabajo es el mismo: una foto entra, un código sale. No es un buscador de fotos de colores, y no es un filtro que cambie la foto.
El cuentagotas de Photoshop, el de Canva, el de Word o el de Illustrator miran lo que hay en ese programa. En México y en Canva mucha gente dice gotero. En España y en Photoshop, cuentagotas. Las dos palabras piden el color de un punto. Esas herramientas no abren un PNG que está en Descargas si no lo metes antes en el programa, y un navegador sin API de pantalla no puede chupar el monitor. Esta página dibuja tu archivo en un lienzo y lee ese lienzo. Pega una captura o suelta el archivo. No se acepta una dirección web: la foto de otro sitio casi nunca se puede leer desde esta pestaña, y esta página no sube el archivo para rodear eso.
Un píxel es la lectura buena en un logo plano o en el relleno de un botón. En una fotografía suele ser la lectura mala. Los bloques del JPEG, el ruido de la cámara y el borde suavizado hacen que los píxeles de al lado no coincidan, mientras el ojo los promedia. 3×3 y 5×5 promedian ese recuadro para que el código se acerque al color que ves. La lupa dibuja esos píxeles de verdad, con la casilla del centro marcada, para que el puntero no tape el punto.
HEX, RGB y HSL son el mismo color
Copia la forma que espera el siguiente programa. Los tres códigos de abajo describen un píxel fijado.
| Format | Example | Use |
|---|---|---|
| HEX | #1A73E8 | CSS, HTML, Figma y la mayoría de herramientas de diseño. Seis cifras detrás de #. |
| RGB | rgb(26, 115, 232) | El mismo color en rojo, verde y azul, de 0 a 255. |
| HSL | hsl(214, 82%, 51%) | Tono, saturación y luminosidad. Más cómodo si luego quieres un paso más claro o más oscuro. |
Qué puedes hacer aquí
Un archivo, una lupa, un zoom, un tamaño de muestra y códigos para copiar. La paleta guarda las zonas grandes y también los colores más vivos.
Una lupa de los píxeles reales
La cuadrícula sigue al puntero y dibuja un bloque de 11 por 11 sacado del archivo, no un zoom borroso de la vista previa. La casilla del centro es el píxel que vas a fijar. Las flechas mueven un píxel. Mayús mueve diez.
Entera, 2× o 4×
Entera muestra el archivo completo. 2× y 4× lo agrandan para acertar una marca pequeña. Arrastra la foto ampliada para moverte, y luego haz clic o suelta para fijar. La lupa sigue leyendo los píxeles del archivo.
1 px, 3×3 o 5×5
1 px es el píxel solo, para logos y rellenos planos. 3×3 y 5×5 promedian el recuadro de alrededor, para fotos en las que los vecinos no coinciden. Los píxeles transparentes del recuadro se saltan.
HEX, RGB, HSL y un nombre cercano
Copia HEX, RGB o HSL del color fijado. El nombre es el nombre CSS en inglés más cercano por distancia RGB, por ejemplo steel blue o tomato. No es el nombre de una marca impreso en un envase, ni una traducción al español.
Una paleta de este archivo
Ocho muestras mezclan las zonas planas más grandes con los colores más vivos, para que un logo pequeño no quede enterrado bajo un fondo blanco. Pulsa una para fijarla. Los marrones casi iguales se saltan. Sigue sin ser una guía de marca, y no es una paleta hecha por una IA.
Cómo sacar el color de una imagen
Añade el archivo, apunta, fija, copia. La vista previa es el archivo. No hay un segundo paso de conversión.
Añade la foto
Suelta un JPG, PNG, WebP, GIF, BMP o AVIF, o pega una captura. Los píxeles se decodifican en esta pestaña.
Apunta y fija
Usa 1 px en un relleno plano, o 3×3 / 5×5 en una foto. Clic para fijar. En el móvil, amplía si la marca es pequeña. La muestra queda por encima del dedo. Suelta para fijar.
Copia el código
Copia HEX, RGB o HSL. Si necesitas un archivo y no solo un código, baja un PNG plano de esa muestra.
Por qué el color que ves y el píxel no coinciden
El desajuste está en el archivo, no en el clic. Estos son los casos que esta página te enseña.
El borde de una letra no es el relleno
El suavizado mezcla el relleno con el fondo en cada borde. Un clic en esa franja devuelve un tercer color. Apunta al centro de la zona plana y usa 1 px.
Un JPEG se guarda en bloques
El JPEG no guarda un cielo liso como un solo código. Los píxeles de al lado saltan. Una lectura de 1 px va a ir cambiando al moverte. Un promedio de 5×5 se queda más cerca del color que ve el ojo.
Una captura ya viene comprimida
Si la imagen la guardó un chat o la herramienta de capturas, el color de marca original puede haberse ido. Esta página informa del archivo que añadiste. No puede recuperar un código que ya no está en los píxeles.
El dedo tapa el píxel
En el móvil la muestra queda por encima del dedo, y la lupa enseña esos píxeles. Suelta para fijar. Si la marca es pequeña, usa 2× o 4× y arrastra la foto hasta que la lupa caiga encima. Las flechas mueven un píxel cuando el ratón es demasiado grueso.
Un perfil de color no es el número del píxel
Photoshop puede enseñar otro HEX para el mismo punto si el archivo trae Display P3 o un perfil de imprenta. Esta página lee los píxeles sRGB que decodificó el navegador, que es el número que se pega en CSS y en Figma. No puede convertir ese número en una prueba de imprenta, ni deshacer una captura que ya fotografió el monitor.
Antes de fiarte del código
- En un logo, pulsa el centro de una forma plana. El borde es una mezcla.
- En una foto, empieza en 5×5. Baja a 1 px solo cuando necesites un píxel exacto, como un LED suelto.
- Si dos clics en el mismo cielo dan dos códigos HEX, eso es el archivo. Promédialos con 5×5 en lugar de buscar un píxel que coincida con lo que recuerdas.
- El nombre más cercano puede decir “steel blue” para un azul de marca. Pega el HEX en la herramienta de diseño. No pegues ese nombre en CSS esperando el mismo color.
- Los GIF animados usan el primer fotograma. Un fotograma posterior puede ser otro color.
- El HEIC de un iPhone no se abre aquí. Exporta antes un JPG o un PNG.
- Esta página no inventa un valor CMYK de imprenta. Un píxel de pantalla pasado a tinta no es una prueba de imprenta.
- Si Photoshop enseña otro HEX, el archivo puede traer un perfil de color. Esta página informa de los píxeles sRGB que decodificó el navegador.
Tres trabajos que esta página sí termina
Cada tarjeta es un archivo que ya tienes, un ajuste de muestra y el límite de esa lectura.
Un logo para una hoja de estilos
Tienes un PNG de una marca y necesitas el relleno en CSS.
Archivo: Un PNG, o un SVG exportado a PNG, con una forma de marca plana.
Ajuste: 1 px, apuntando al centro del relleno.
Copias: HEX, pegado en CSS o en Figma.
Límite: El borde suavizado es otro código. No pulses el borde.
Una captura de una web
Ves el color de un botón y no puedes abrir la hoja de estilos.
Archivo: Una captura pegada desde el portapapeles.
Ajuste: 1 px en la parte plana del botón, no en el borde.
Copias: HEX o RGB.
Límite: La compresión de la captura, y el monitor donde se hizo, pueden haber movido ya el código.
Una foto de producto
Quieres un color usable para un fondo, no un píxel ruidoso.
Archivo: Un JPG del producto.
Ajuste: 5×5 sobre el material, lejos de brillos y sombras.
Copias: HSL, y luego un paso más claro en la herramienta de diseño.
Límite: El recuadro es un promedio de ese punto. No es una muestra medida de marca.
Esta página y un cuentagotas de escritorio
Esta página
Lee un archivo en el navegador
Suelta o pega una imagen fija. La lupa, el tamaño de muestra, el HEX y la paleta salen de ese archivo. Sin extensión, sin programa de Windows y sin cuenta. Chrome y Edge también pueden tomar un color de la pantalla con el cuentagotas del propio navegador. Ese control extra está marcado como lectura de pantalla. No lee el archivo.
Otro trabajo
Cuentagotas de pantalla, editores y filtros
Un selector de color de escritorio o una extensión mira el monitor. Photoshop también puede muestrear, dentro de un editor completo. Ninguno de los dos hace falta para leer un código de un archivo que ya guardaste. En este sitio, recortar, difuminar y pixelar cambian píxeles. No te entregan un código HEX. Dividir imagen parte una foto en piezas. Úsalas cuando el trabajo es una imagen nueva, no un código.
Preguntas para sacar el color de una imagen
¿Cómo sacar el color de una imagen? +
Suelta la foto en esta página o pega una captura. Mueve el puntero hasta que la lupa quede sobre el color, fija con un clic y copia HEX, RGB o HSL.
¿Cómo sacar el código hex de una imagen? +
Fija un píxel y pulsa Copiar HEX. El código tiene esta forma: #1A73E8. Copiar RGB y Copiar HSL son el mismo color escrito de las otras dos maneras. En una foto ruidosa, pon 5×5 antes de copiar, o el hex va a saltar de un píxel al de al lado.
¿Cómo sacar la paleta de colores de una imagen? +
Al abrir el archivo, la página arma hasta ocho muestras: las zonas planas grandes y los colores más vivos, para que un logo pequeño no desaparezca bajo el blanco. Pulsa una muestra para fijarla y copiar su código. No es una paleta de una IA, ni la guía de estilo de una marca.
¿El selector de color de una imagen es gratis? +
Sí. No hay cuenta, ni prueba, ni marca de agua en el código. La lectura ocurre en la pestaña que ya tienes abierta.
¿Hace falta una extensión de Chrome o un programa de Windows? +
No. Las extensiones y los selectores de escritorio leen la pantalla. Esta página lee un archivo o una captura pegada en el navegador. En Chrome y Edge también puedes usar Tomar de la pantalla, que es el cuentagotas del propio navegador y solo ve el monitor.
¿Esto sustituye al cuentagotas de Photoshop, Canva, Word o Illustrator? +
No. Esas herramientas muestrean dentro de su propio documento. Aquí lees un archivo que ya guardaste, sin abrir el editor. Si en Canva lo llamas gotero y en Photoshop cuentagotas, el pedido es el mismo, pero el programa sigue haciendo falta para pintar. Esta página solo te da el código.
¿Puedo cambiar el color de una imagen aquí? +
No. Este selector no recolorea la foto, no invierte los colores y no sustituye un color por otro. Para eso está Cambiar color de imagen, en este mismo sitio. Aquí solo sacas el código del punto que señalas.
¿Por qué dos clics en la misma zona dan dos códigos? +
Las fotos y los JPEG no guardan un solo código plano para un cielo o una camiseta. Los píxeles vecinos difieren. Usa 3×3 o 5×5 para promediar un recuadro pequeño. En un logo, quédate en 1 px y pulsa el centro del relleno plano, no la orilla.
¿Me dice el nombre del color? +
La página muestra el nombre CSS en inglés más cercano, como steel blue o tomato. Es un parecido, no el nombre de una marca, y no está traducido. Si lo escribes en CSS no vuelve al mismo HEX. Pega el código.
¿Se sube la foto? +
No. El navegador decodifica el archivo y lee los píxeles en este aparato. Al cerrar la pestaña se borra. La lectura no va unida a ninguna cuenta.
¿Puedo pegar una captura de pantalla? +
Sí. Copia la captura, entra en esta página y pega. En el móvil, si no aparece pegar, usa el selector de archivos.
¿Puedo pegar una dirección web y sacar el color de esa foto? +
No. Una foto alojada en otro sitio normalmente no se puede leer desde esta pestaña, y esta página no sube tu archivo a un servidor para ir a buscarla. Guarda la imagen y suelta ese archivo.
¿Me das el color en CMYK para imprimir? +
No. Pasar un píxel de pantalla a CMYK no es una prueba de imprenta. Copia el HEX o el RGB y haz la conversión en el programa que conoce el papel y el perfil. El selector de color CMYK de un editor no se sustituye aquí.
¿Funciona en el móvil? +
Sí. La muestra queda por encima del dedo, y el color se fija al soltar. Usa 2× o 4× cuando la marca es pequeña, y arrastra la foto para moverte. Las fotos muy grandes se muestrean desde una copia de 2.000 px para que la pestaña aguante, y la página lo dice cuando pasa.
¿Por qué Photoshop muestra otro HEX? +
El archivo puede traer un perfil de color. Photoshop puede mostrar el número dentro de ese perfil. Esta página lee los píxeles sRGB después de que el navegador decodifica el archivo, que es el valor para pegar en CSS o en Figma. Una captura va un paso más allá: ya son los píxeles del monitor. Ninguna de las dos lecturas es una prueba CMYK.
¿El selector de color en pantalla es lo mismo? +
No. Tomar de la pantalla, en Chrome y Edge, lee el monitor con el cuentagotas del navegador. El resto de la página lee el archivo que soltaste. Si el monitor ya alteró la foto, la lectura de pantalla no recupera el archivo original.
Saca el color de tu imagen
Suelta una foto o pega una captura. Fija un píxel. Copia el código. El archivo se queda en este aparato.
Sacar el color