La herramienta Selector de color de imagen permite cargar un archivo gráfico local para analizar y extraer los valores cromáticos exactos de cualquier píxel. El sistema integra una vista ampliada que actúa como lupa para facilitar la selección precisa de las coordenadas deseadas. Al interactuar con la imagen, se obtienen de forma simultánea las equivalencias en los modelos de color HEX, RGB y HSL.
Funcionamiento técnico y formatos compatibles
El procesamiento de la imagen se realiza de manera local. El archivo seleccionado no se transfiere a ningún servidor externo, sino que se procesa directamente en el navegador del usuario, garantizando que la información no salga de su dispositivo.
La herramienta admite una gama específica de formatos de imagen y tipos MIME:
- PNG (
image/png) - JPG / JPEG (
image/jpeg) - WebP (
image/webp) - GIF (
image/gif) - AVIF (
image/avif) - HEIC / HEIF (
image/heic,image/heif)
Si se intenta cargar un formato no admitido, la interfaz muestra el mensaje de error: "Ese tipo de archivo no es compatible. Prueba con una imagen PNG, JPG, WebP, GIF, AVIF o HEIC.". En caso de que el archivo esté corrupto o el navegador no pueda procesar sus datos, se presenta la advertencia: "No se pudo abrir esa imagen. Puede estar dañada o en un formato no compatible.".
Para asegurar un rendimiento óptimo del navegador durante el renderizado y el análisis de píxeles, las imágenes que superen los 4096 píxeles en su lado más largo se escalan hacia abajo de forma automática.
Interacción y control de precisión
Al cargar un archivo, la herramienta muestra inmediatamente los valores cromáticos y las coordenadas correspondientes al píxel central de la imagen. A partir de ese momento, el usuario dispone de dos métodos para muestrear la superficie:
Control con puntero
Al desplazar el cursor sobre el lienzo, el sistema lee dinámicamente el color del píxel situado bajo el puntero. La interfaz muestra el texto informativo "Imagen lista: pasa por encima para muestrear y haz clic para guardar un color.". Un clic izquierdo sobre el píxel seleccionado almacena de forma definitiva ese color en el historial de muestras.
Navegación por teclado
Para un control minucioso que requiera precisión de un solo píxel, es posible utilizar el teclado:
- Teclas de dirección (flechas): Mueven la mira de muestreo un píxel en la dirección seleccionada.
- Mayús (Shift) + Flechas: Desplazan la mira en pasos de 10 píxeles para acelerar el movimiento por el lienzo.
- Enter o Barra espaciadora: Guardan el color activo en el historial de muestras.
Modelos de color y gestión del historial
Cada punto muestreado se descompone en tres sistemas de codificación estándar, facilitando su integración en hojas de estilo CSS o aplicaciones de edición gráfica:
- HEX: Representación hexadecimal de base 16 (por ejemplo, #3a86f0).
- RGB: Valores decimales de intensidad para los canales Rojo (Red), Verde (Green) y Azul (Blue) en una escala de 0 a 255.
- HSL: Definición del color mediante Matiz (Hue) en grados de 0° a 360°, Saturación (Saturation) en porcentaje y Luminosidad (Lightness) en porcentaje.
Cualquiera de estos valores se puede copiar directamente al portapapeles del sistema operativo haciendo clic sobre el dato correspondiente. Si el navegador restringe esta acción debido a políticas de seguridad, se muestra el aviso: "No se pudo copiar: tu navegador bloqueó el acceso al portapapeles.".
Historial de muestras
El sistema permite almacenar un máximo de 12 colores de forma simultánea. Al guardar un tono, se muestra la confirmación "Se guardó {hex} en tus muestras.". Si el historial está vacío, se visualiza la indicación "Los colores que guardes aparecen aquí; haz clic en una muestra para volver a cargarla.".
Para reiniciar por completo el espacio de trabajo, el botón "Empezar de nuevo" elimina la imagen activa, limpia el historial de muestras y restablece todos los parámetros a su estado inicial.
Factores físicos del píxel: compresión y transparencia
El selector lee el valor de color real almacenado en la matriz de píxeles del archivo. Al analizar imágenes, se deben considerar dos factores técnicos que alteran los valores esperados:
Compresión y suavizado (Anti-aliasing)
En formatos con pérdida como JPEG, los algoritmos de compresión agrupan bloques de píxeles y promedian sus colores para reducir el tamaño del archivo. Esto genera artefactos de compresión que modifican levemente los valores originales. Asimismo, el suavizado de bordes (anti-aliasing) introduce píxeles de transición con tonos intermedios en los límites de las figuras para evitar el efecto de pixelado, lo que altera el color puro del diseño original.
Tratamiento del canal alfa
Cuando un píxel presenta transparencia, la herramienta analiza el valor de color intrínseco de ese píxel de forma aislada, ignorando por completo el fondo del lienzo o los elementos que se sitúen detrás de él. Si el píxel es parcialmente transparente, se añade la advertencia "Alfa {n}%: este píxel es parcialmente transparente.". Dos muestras con idénticos valores RGB pero diferente porcentaje de transparencia se guardarán como elementos independientes en el historial.
Preguntas frecuentes
¿Cómo tomo un color de la imagen?
Mueve el puntero sobre la imagen y el panel muestra el color que hay debajo; una lupa amplía la zona para que aciertes con el píxel exacto. Haz clic para guardar ese color en tus muestras. También puedes enfocar la imagen, mover la mira con las flechas y pulsar Enter.
¿Qué formatos de color obtengo?
Cada píxel que tomas se muestra a la vez en HEX, RGB y HSL. Haz clic en cualquier valor para copiarlo, listo para pegar en CSS o en una herramienta de diseño.
¿Por qué el color tomado no siempre coincide con lo que esperaba?
Obtienes el valor exacto del píxel guardado en la imagen. Si es un JPEG o una captura, la compresión y el suavizado ya pueden haber cambiado un poco los píxeles cercanos; y un píxel semitransparente se lee por sí solo, sin lo que haya detrás.
¿Dónde se procesan las imágenes que subo a la herramienta?
La imagen se lee directamente desde tu dispositivo y nunca sale de tu navegador. No se sube nada a BroBroGo, garantizando que el análisis de los archivos se realice de forma estrictamente local.