Selector de color de imagen online

Suelta una imagen, pasa el cursor para previsualizar cualquier píxel, y haz clic para tomar su HEX, RGB y HSL, todo en tu navegador. La imagen nunca sale de tu dispositivo.

El Selector de color de imagen descodifica tu imagen a un lienzo y muestrea los píxeles por completo en tu navegador. La imagen que sueltas y los colores que eliges nunca salen de tu dispositivo y no se suben a ArrayKit.

Abre el Conversor de color CSS

Acerca de Selector de color de imagen

El Selector de color de imagen convierte cualquier imagen en un muestreador de color. Suelta o elige una foto, un logotipo, una captura de pantalla o una maqueta de diseño, luego mueve el cursor por ella para previsualizar el píxel bajo la cruz, y haz clic para fijar ese color exacto. Cada muestra se muestra como HEX, RGB y HSL junto a una muestra en vivo, para que la sueltes directamente en CSS, un token de diseño o un cubo de pintura. Una tira de colores recientes mantiene a mano tus últimas selecciones para construir una paleta, y cada valor tiene su propio botón de copiar. Los píxeles transparentes conservan su alfa, así que las superposiciones PNG se leen de vuelta como rgba y #rrggbbaa. Está pensado para diseñadores, desarrolladores front-end y cualquiera que iguale un color de marca desde una imagen. La imagen se descodifica a un lienzo y se muestrea en tu dispositivo: nunca se sube.

Características

Cómo usar Selector de color de imagen

  1. Haz clic en la zona de arrastre o arrastra un archivo de imagen sobre ella
  2. Mueve el cursor sobre la imagen para previsualizar el color del píxel
  3. Haz clic en un punto para fijar ese color y revelar su HEX, RGB y HSL
  4. Copia la notación que necesites, o reabre una selección anterior desde Colores recientes

Ejemplo

Entrada

Sampled pixel: R 37, G 99, B 235 (opaque)

Salida

HEX #2563eb
RGB rgb(37, 99, 235)
HSL hsl(221, 83%, 53%)

Un clic en un botón azul convierte el píxel en valores de color CSS listos para pegar.

Errores comunes y solución de problemas

Preguntas frecuentes

¿Cómo elijo un color de una imagen?
Suelta o elige la imagen, pasa el cursor sobre ella para previsualizar el color del píxel, luego haz clic en el punto exacto que quieras. El selector muestra al instante el HEX, RGB y HSL de ese píxel con una muestra, y cada valor tiene un botón de copiar.
¿Puedo obtener el código HEX de un color en una captura de pantalla?
Sí. Carga la captura como cualquier imagen, pasa el cursor para hallar el tono que quieras, y haz clic en él. El código HEX aparece junto a los valores RGB y HSL para que lo copies en CSS o en una herramienta de diseño.
¿El selector de color conserva la transparencia de las imágenes PNG?
Sí. Cuando un píxel muestreado no es totalmente opaco, el alfa se traslada: el RGB se muestra como rgba(...) y el HEX gana un octavo par de alfa (#rrggbbaa), coincidiendo con cómo se renderiza realmente el píxel.
¿De qué formatos de imagen puedo elegir colores?
De cualquiera que tu navegador pueda descodificar a un lienzo: PNG, JPEG, WebP, SVG, GIF, AVIF, BMP e ICO. Para colores de marca exactos prefiere un PNG sin pérdidas, ya que JPEG y WebP pueden desplazar un relleno plano en un tono.
¿Puedo guardar varios colores de una misma imagen?
Sí. Cada clic añade el color a la tira de Colores recientes, hasta una docena de selecciones. Haz clic en cualquier muestra de ahí para reabrirla, luego copia su HEX, RGB o HSL para armar una paleta a partir de la imagen.
¿Se sube mi imagen cuando elijo un color de ella?
No. El Selector de color de imagen dibuja tu imagen en un lienzo y lee los píxeles por completo en tu dispositivo. La imagen nunca se envía a ArrayKit ni a ningún servidor, así que las maquetas y fotos privadas permanecen locales.

Herramientas relacionadas

Todas las herramientas de ArrayKit