Extracción del código hexadecimal de un píxel desde una imagen
Esta página está diseñada para obtener el valor de color de un píxel concreto de una imagen en el formato más usado en desarrollo web: el código hexadecimal (hex). Mientras que otras herramientas hermanas de este mismo sitio se centran en la notación funcional RGB o en HSL, esta ofrece como salida principal el código hex de seis dígitos (por ejemplo, #1E90FF), sin paréntesis ni sintaxis adicional. Es la opción directa cuando necesitas un valor CSS que puedas pegar inmediatamente en propiedades como color, background-color o border-color.
A diferencia de las páginas que muestran RGB o HSL como valor principal, aquí el hex no incluye canal alfa. Cualquier transparencia que tenga el píxel se informa por separado como un porcentaje («Alpha ‹n›% – este píxel es parcialmente transparente»). Esto evita confusiones, ya que el hex de seis dígitos no soporta transparencia (para eso existe la notación hex de ocho dígitos, pero no se usa aquí). La herramienta se ciñe al estándar web más común.
Cómo funciona la herramienta paso a paso
Al cargar una imagen (formatos admitidos: PNG, JPG, WebP, GIF, AVIF, HEIC), el sistema muestra inmediatamente las dimensiones de la imagen (ancho × alto) y el color del píxel central, incluyendo su coordenada (x, y). Al mover el ratón sobre la imagen, se actualizan los valores de cada píxel por el que pasa el cursor. Además, una lupa ampliada facilita la selección exacta, fundamental en zonas con degradados o bordes.
Puedes hacer clic en cualquier píxel para guardar su color en el historial. El historial almacena hasta 12 colores, y cada color se guarda como una entrada independiente aunque tenga los mismos valores RGB pero diferente alfa. Al hacer clic sobre un color guardado (en los recuadros de muestra), ese color vuelve a cargarse en la pantalla principal.
Los valores mostrados son:
- HEX: código hexadecimal (seis dígitos, sin canal alfa).
- RGB: valores de rojo, verde y azul (0-255 cada uno).
- HSL: tono (0-360), saturación (0-100%) y luminosidad (0-100%).
- Alfa: solo si el píxel es semitransparente, se muestra como porcentaje.
Cada uno de estos valores es copiable al hacer clic sobre él. Si el navegador bloquea el acceso al portapapeles, aparece el mensaje «No se ha podido copiar: tu navegador ha bloqueado el acceso al portapapeles».
Formato hexadecimal frente a RGB y HSL
El código hex es una representación compacta del modelo RGB. Cada par de caracteres hexadecimales (00 a FF) corresponde a un canal de color (rojo, verde, azul). Por ejemplo, #FF6600 equivale a RGB(255, 102, 0). Esta notación es la más extendida en hojas de estilo CSS y en programas de diseño como Figma o Photoshop, porque ocupa menos espacio que rgb(255, 102, 0) y no requiere funciones.
La ventaja de esta página frente a sus versiones centradas en RGB o HSL es que no tienes que convertir el valor a hex manualmente. Si trabajas con CSS, el hex es el formato nativo. Además, al carecer de canal alfa, el valor es inequívoco: un #FF0000 siempre será rojo puro, sin ambigüedades por transparencia.
Sin embargo, el hex tiene limitaciones. No es intuitivo para ajustar la saturación o luminosidad, tarea para la que HSL es más cómodo. Por eso la herramienta muestra también esos valores, pero siempre priorizando el hex como salida principal.
Transparencia y canal alfa: limitaciones del hex
Una de las peculiaridades de esta página es que trata la transparencia de forma independiente. El código hex de seis dígitos no puede representar opacidad. Cuando un píxel tiene un valor alfa inferior a 255 (o 1.0 en formato decimal), la herramienta muestra el mensaje «Alpha ‹n›% – este píxel es parcialmente transparente». El porcentaje se calcula directamente del canal alfa de la imagen.
Es importante entender que la herramienta lee el píxel tal cual está almacenado en el archivo de imagen. No intenta adivinar qué hay detrás de un píxel semitransparente. Si la imagen es un PNG con transparencia, el color que se muestra es el del píxel con su alfa aplicado (por ejemplo, un píxel blanco con alfa 50% se vería como #FFFFFF con alfa 50%, no como el color del fondo). Esto puede sorprender a quienes esperan el color visual final sobre un fondo blanco. La herramienta es honesta: muestra el valor bruto del píxel.
Además, la compresión de JPEG y la interpolación de escalado pueden alterar los valores de los píxeles originales. En una imagen JPEG, cada píxel puede haber cambiado ligeramente respecto al original debido a la pérdida de calidad. Lo mismo ocurre con las capturas de pantalla, donde el anti-aliasing suaviza los bordes. Por eso, al seleccionar un píxel, la lupa ayuda a elegir el punto exacto, evitando zonas de transición.
Navegación por teclado y precisión en la selección
Para quienes prefieran no usar el ratón, o necesiten una precisión milimétrica, la herramienta permite mover un cursor en forma de cruz sobre la imagen mediante las teclas de flecha. Cada pulsación desplaza el cursor un píxel. Si se mantiene pulsada la tecla Mayús (Shift) mientras se usan las flechas, el salto es de 10 píxeles. Esto es útil para recorrer rápidamente la imagen.
Una vez situado el cursor sobre el píxel deseado, se puede guardar el color pulsando Intro o Espacio. Esta funcionalidad es especialmente relevante para usuarios con dificultades motoras o cuando se trabaja con imágenes muy pequeñas donde un clic preciso es difícil.
El historial de colores guardados se mantiene durante la sesión. Al hacer clic sobre una muestra guardada, no solo se carga ese color, sino que también se actualizan las coordenadas del píxel original? No, la herramienta solo carga el color, no la posición. Pero al guardar, se almacena el valor hex, RGB y HSL. Puedes usar esos valores posteriormente.
Casos límite y comportamiento esperado
La herramienta ha sido diseñada para manejar diversas situaciones sin romperse:
- Formato no soportado: si se arrastra un archivo que no está entre los tipos admitidos (PNG, JPG, WebP, GIF, AVIF, HEIC), aparece el mensaje «Ese tipo de archivo no es compatible. Prueba con una imagen PNG, JPG, WebP, GIF, AVIF o HEIC».
- Imagen corrupta: si el archivo no puede abrirse, se muestra «Esa imagen no ha podido abrirse. Puede estar dañada o tener un formato no compatible».
- Imágenes muy grandes: cuando el lado más largo de la imagen supera los 4096 píxeles, la imagen se reduce automáticamente para mantener el rendimiento. Esto puede afectar a la precisión al muestrear píxeles que han sido redimensionados, pero es necesario para evitar sobrecargar el navegador.
- Repetición de colores en el historial: si guardas un color con los mismos valores RGB pero diferente alfa, se guardan como entradas separadas. El límite es de 12 colores, independientemente de su canal alfa.
- Copia al portapapeles: al hacer clic en cualquier valor (HEX, RGB, HSL), se intenta copiar. Si el navegador bloquea la operación (por restricciones de seguridad), se notifica al usuario.
El botón «Empezar de nuevo» borra la imagen, vacía el historial y restablece el estado inicial. No hay forma de recuperar los colores guardados tras pulsarlo, salvo que los hayas copiado previamente.
Preguntas frecuentes (FAQ)
¿Por qué el código hex no incluye el valor alfa?
Porque el hex estándar de seis dígitos no tiene canal alfa. Para representar transparencia se usa la notación de ocho dígitos (#RRGGBBAA), pero aquí se ha optado por el formato más universal de seis dígitos. La transparencia se muestra por separado como porcentaje.
¿Qué ocurre si el píxel es completamente transparente (alfa 0%)?
El color se sigue mostrando con sus valores RGB, pero se indica «Alpha 0% – este píxel es completamente transparente». El código hex será el del color subyacente, aunque visualmente no se vea nada.
¿Puedo usar esta herramienta con imágenes desde la web (URL)?
No directamente. La herramienta requiere que subas una imagen desde tu dispositivo. No hay opción de pegar una URL. Esto se debe a que el procesamiento se realiza completamente en el lado del cliente, sin enviar datos a ningún servidor.
¿El historial de colores se guarda entre sesiones?
No. Al recargar la página o pulsar «Empezar de nuevo», el historial se pierde. Es recomendable copiar los valores importantes antes de cerrar la pestaña.
¿Qué hago si el color que obtengo no coincide con el que veo en pantalla?
Puede deberse al perfil de color del monitor o a la compresión de la imagen. La herramienta lee el valor exacto del píxel almacenado en el archivo. Si la imagen es JPEG, los píxeles pueden haber sido alterados por la compresión. Para obtener el color original de un elemento gráfico, usa un PNG sin pérdidas.
¿Sirve también para extraer colores de vídeos?
No. Solo se admiten imágenes estáticas en los formatos mencionados. Para vídeos necesitarías capturar un fotograma como imagen primero.