Selector de color de imagen
Sube una imagen y haz clic sobre ella para leer el color exacto de ese píxel en HEX, RGB y HSL.
Arrastra tu imagen aquí o haz clic para elegirla
Admite JPG, PNG, WebP y GIF
Cómo se lee el color de un píxel
Al subir la imagen se dibuja una sola vez en un lienzo oculto del tamaño original. Cuando haces clic, convertimos la posición del puntero dentro del elemento mostrado a coordenadas del lienzo y pedimos ese único píxel con getImageData.
HEX = #RRGGBB con cada canal en base 16
El navegador devuelve cuatro valores de 0 a 255 (rojo, verde, azul y alfa). El HEX es simplemente esos tres canales en hexadecimal, y el HSL se calcula a partir del canal máximo y mínimo.
L = (máx + mín) ÷ 2
El color mostrado es el del píxel exacto, sin promediar con los vecinos: en imágenes JPG con mucho ruido, dos píxeles contiguos pueden dar valores ligeramente distintos.
S = (máx − mín) ÷ (1 − |2L − 1|)
Ejemplo práctico
Al pinchar sobre un azul corporativo obtienes #3366FF, que equivale a rgb(51, 102, 255) y a hsl(225, 100%, 60%): el mismo color expresado de tres formas.
Preguntas frecuentes
- ¿Puedo usarlo con capturas de pantalla?
- Sí. Es la forma más rápida de sacar el color exacto de una marca a partir de una captura o de una foto de un cartel.
- ¿Por qué el color no coincide con el que veo en pantalla?
- Puede deberse al perfil de color de tu monitor o a que la imagen tenga un perfil incrustado. El valor que damos es el del píxel tal como lo decodifica el navegador.
- ¿Qué formato de color debo usar en CSS?
- HEX es el más común, RGB permite añadir transparencia con rgba() y HSL es el más cómodo para crear variaciones más claras u oscuras del mismo tono.
- ¿Funciona con imágenes con transparencia?
- Sí, y además te indicamos el valor del canal alfa del píxel que has elegido.
Calculadoras relacionadas
- Comprimir JPGReduce el peso de una foto JPG ajustando la calidad de compresión.
- Comprimir PNGReduce el peso de un PNG bajando el número de colores de la paleta.
- Comprimir WebPReduce el peso de una imagen WebP ajustando la calidad de compresión.
- JPG a WebPConvierte fotos JPG a WebP para que tu web cargue más rápido.
- PNG a WebPConvierte imágenes PNG a WebP conservando la transparencia.
- WebP a JPGConvierte imágenes WebP a JPG para abrirlas en cualquier programa.
- Redimensionar imagenCambia el ancho y el alto en píxeles de una imagen sin deformarla.
- Cambiar resoluciónAjusta los DPI de una imagen y su tamaño real de impresión.
- Recortar imagenSelecciona un área con el ratón y recorta la imagen a ese rectángulo.
- Convertir imagenConvierte entre JPG, PNG y WebP eligiendo el formato de salida.
- Generador de faviconCrea todos los tamaños de favicon y el archivo .ico desde una imagen.
- Imagen a Base64Convierte una imagen en una cadena Base64 o en un data URI listo para pegar.
- Extraer colores de una imagenObtén la paleta de colores dominantes de cualquier fotografía.
- Generador de imagen OGCrea una imagen de Open Graph de 1200 × 630 px con tu título y colores.