Selector de color de imagen

Sube una imagen y haz clic en cualquier píxel para obtener su HEX, RGB y HSL exactos — procesado por completo en tu dispositivo.

Cómo usar

  1. Elige una imagen o suéltala sobre el recuadro — PNG, JPG y WebP funcionan, y el archivo nunca sale de tu dispositivo.
  2. Mueve el puntero sobre la imagen para inspeccionar píxeles en la lupa y haz clic para capturar el color que hay bajo el cursor.
  3. Copia el valor HEX, RGB o HSL, reutiliza cualquiera de las últimas ocho capturas de la fila de muestras, o descárgalas todas en un archivo de texto.

Sobre esta herramienta

Un selector de color de imagen responde a una pregunta muy común: ¿qué color exacto es ese píxel? Un logotipo que te llegó en PNG, la captura de pantalla del sitio de otra persona, una foto cuyo cielo quieres reproducir en un degradado — en todos esos casos el color está ahí, en pantalla, pero el código no. Esta herramienta carga la imagen en un canvas en tu propia máquina y lee de vuelta los valores de píxel en bruto.

La mecánica es sencilla y merece la pena conocerla. El archivo se lee con FileReader como Data URI, se dibuja una vez en un canvas a su resolución nativa, y cada lectura es una llamada a getImageData sobre un único píxel — los mismos cuatro bytes (rojo, verde, azul y alfa) que el navegador ya tiene en memoria. Como el canvas conserva la resolución original mientras la página la muestra escalada, las coordenadas del puntero se convierten de nuevo a coordenadas de imagen antes de la lectura, así que el píxel en el que haces clic es el píxel que obtienes, incluso en una foto de 4000 píxeles de ancho. La lupa vuelve a dibujar un vecindario de once por once con el suavizado de imagen desactivado, y por eso ves cuadrados nítidos en lugar de un desenfoque, y el HSL se deriva del trío RGB con la fórmula estándar de sectores de tono. Si un píxel es totalmente transparente, la herramienta te lo dice, en lugar de informar de un negro sin sentido.

Más allá de las imágenes, los navegadores basados en Chromium exponen la API nativa EyeDropper, así que cuando tu navegador la admite aparece un segundo botón que te deja tomar cualquier píxel de toda tu pantalla — útil para colores atrapados en un vídeo, en un visor de PDF o en otra aplicación. Las últimas ocho capturas se quedan en una fila de muestras en la que puedes hacer clic para copiarlas, y el conjunto completo se puede descargar como un archivo de texto plano con el HEX, el RGB y el HSL de cada una. Tu imagen no se sube nunca: se lee localmente, se dibuja localmente y se descarta al cerrar la página.

Preguntas frecuentes

¿Mi imagen se sube a algún sitio?

No. Tu navegador lee el archivo con FileReader y lo dibuja en un canvas en tu dispositivo. Nunca se envía a un servidor y desaparece en el momento en que cierras la pestaña.

¿Qué formatos de imagen funcionan?

PNG, JPEG y WebP — cualquier cosa que tu navegador pueda decodificar. Se aceptan imágenes de hasta 8000 píxeles por lado; los archivos mayores se rechazan para que el canvas no agote la memoria de tu dispositivo.

¿Qué hace el botón "tomar color de la pantalla"?

Usa la API nativa EyeDropper del navegador para tomar cualquier píxel de tu pantalla, no solo dentro de la imagen cargada. Aparece en navegadores basados en Chromium como Chrome, Edge, Opera y Brave; Firefox y Safari todavía no la admiten, así que allí el botón simplemente no se muestra.

¿Por qué el color es ligeramente distinto al del archivo original?

Suele deberse a una de dos razones. La compresión JPEG altera los píxeles cerca de los bordes nítidos, y el navegador puede aplicar el perfil de color incrustado en la imagen al decodificarla. Para colores de marca planos guardados en PNG, el valor que obtienes es exacto.

¿Puedo extraer una paleta entera de una vez?

No de forma automática — esta herramienta captura un clic cada vez y guarda los últimos ocho colores, que puedes descargar como archivo de texto. Tomar muestras de las zonas dominantes de una imagen suele bastar para reconstruir la paleta de una marca.

Herramientas relacionadas

¿Enlaces largos? Acórtalos gratis

Vai.la convierte cualquier URL en un enlace corto con estadísticas de clics, código QR y tu propio biolink.

Vai.la no se hace responsable del uso de las herramientas ni de las decisiones tomadas a partir de sus resultados.