Selector de color de imagen gratis

Haz clic en un punto de una imagen para leer ese píxel como HEX en mayúsculas y rgb(r, g, b). Ejemplo: rgb(200, 100, 50) es #C86432.

La imagen se analiza en tu navegador.

o suelta una imagen en cualquier lugar de esta página

Elige una imagen.

Selector de color y extractor de paleta

Lo que conviene saber

Haz clic en cualquier lugar de la imagen cargada y la herramienta lee exactamente un píxel. La posición del clic se traslada desde la vista previa a la imagen en su resolución real, de modo que una foto de 4000 px de ancho mostrada a 800 px sigue devolviendo el valor del píxel concreto bajo el puntero y no un promedio de su entorno. El resultado aparece como código HEX en mayúsculas y como cadena rgb(r, g, b), cada uno con su botón de copiar.

La conversión es simple base 16. Para rgb(200, 100, 50), el rojo 200 es C8, el verde 100 es 64 y el azul 50 es 32, lo que da #C86432. A la inversa, #C86432 se lee como 200, 100 y 50. Cada canal es un número entero de 0 a 255, así que el código siempre tiene seis dígitos hexadecimales y conserva los ceros iniciales, por ejemplo #0A0B0C.

Ten en cuenta a qué apuntas. Las fotografías tienen ruido y bloques JPG, de modo que un clic en un cielo puede devolver un valor algo distinto del que está a su lado; haz clic tres o cuatro veces y quédate con el del medio. Los bordes suavizados de texto y logos mezclan dos colores, así que muestrea el interior sólido de una letra o forma. Los píxeles transparentes de un PNG se leen como su color de fondo sin el alfa, así que fíjate también en el fondo de la vista previa.

Esta página lee puntos sueltos. Para un resumen rápido de colores dominantes, la página hermana del extractor de paleta resume toda la imagen en ocho muestras; sus valores están agrupados, por lo que pueden diferir ligeramente de lo que obtienes aquí al hacer clic.

Elige una tarea 12
Herramientas relacionadas 13
Cómo usar Selector de color de imagen gratis
  1. Carga una captura o un archivo de logo, por ejemplo un PNG con un botón morado.
  2. Haz clic en el centro de la zona sólida, lejos de bordes y degradados.
  3. Lee las líneas HEX y rgb, por ejemplo #C86432 y rgb(200, 100, 50).
  4. Pulsa el botón de copiar junto al formato que necesite tu CSS o tu herramienta de diseño.

Respuestas rápidas

¿El color obtenido es un promedio o un píxel exacto?

Un píxel exacto en la resolución real de la imagen, aunque la vista previa esté reducida. No se aplica ningún promedio.

¿Qué código HEX es rgb(200, 100, 50)?

#C86432. En hexadecimal, el rojo 200 es C8, el verde 100 es 64 y el azul 50 es 32.

¿Por qué dos clics en el mismo cielo dan códigos ligeramente distintos?

El ruido del sensor y la compresión JPG varían de un píxel a otro. Muestrea varios puntos y usa el valor del medio.

¿Por qué un píxel del borde tiene un color turbio?

El suavizado mezcla el borde entre dos colores. Haz clic en el interior sólido de la forma.