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
- Pasa el cursor por una imagen para previsualizar el color del píxel en vivo, luego haz clic para fijarlo
- Muestra HEX, RGB y HSL de cada píxel muestreado junto a una muestra en vivo
- Botones de copiar por valor para la notación HEX, RGB y HSL que necesites
- La tira de colores recientes recuerda tus últimas selecciones para construir una paleta
- El alfa se conserva: los píxeles PNG translúcidos se leen de vuelta como rgba y #rrggbbaa
- Acepta imágenes PNG, JPEG, WebP, SVG, GIF, AVIF, BMP e ICO
- El cursor de cruz y un fondo de cuadros hacen obvias las zonas transparentes
- Funciona por completo en tu navegador: la imagen se muestrea en tu dispositivo
Cómo usar Selector de color de imagen
- Haz clic en la zona de arrastre o arrastra un archivo de imagen sobre ella
- Mueve el cursor sobre la imagen para previsualizar el color del píxel
- Haz clic en un punto para fijar ese color y revelar su HEX, RGB y HSL
- 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
- El color elegido se ve ligeramente distinto de la imagen fuente. — JPEG y WebP usan compresión con pérdidas, así que los rellenos planos pueden variar en un tono entre píxeles vecinos. Muestrea unos puntos cercanos, o usa una exportación PNG del diseño para colores de marca exactos.
- Una zona transparente devuelve rgba(0, 0, 0, 0) en lugar de un color. — Ese píxel es totalmente transparente, así que no hay color que leer. Pasa el cursor por una parte rellena del arte; el fondo de cuadros marca las regiones translúcidas.
- Un SVG o una imagen de alta resolución muestra un color de un punto equivocado. — El selector muestrea el píxel bajo la cruz a la propia resolución de la imagen. Amplía tu navegador para un control más fino, o haz clic con precisión en el borde que quieras.
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