Averiguar el color de los píxeles en línea

Los diseñadores, webmasters y otros usuarios pueden necesitar averiguar el código de color de un elemento o de un píxel concreto de la imagen y averiguar su código de color RGB o HEX.

En este artículo veremos cómo averiguar el color del píxel con la ayuda de algunas herramientas, servicios y programas sencillos pero eficaces.

Definir el color en tu navegador

Si el objeto cuya combinación de colores quieres conocer se encuentra en Internet y no en tu ordenador local, la forma más fácil y rápida de averiguar de qué color es un píxel es utilizar la herramienta de desarrollo integrada en tu navegador.

Definir el color en el navegador:

1. Haz clic con el botón derecho en cualquier parte de la página web;
2. Selecciona «Ver código» en el menú contextual («Ver código del elemento»). También puedes pulsar las siguientes combinaciones de teclas Ctrl + Shift + I o Ctrl + Shift + C, entonces se abrirá el código HTML y CSS del sitio web;
3. Es necesario encontrar en una columna con un código CSS cualquier elemento que tenga el color establecido. No es difícil encontrarlo, los cuadros de colores deben servir de guía. Ver la captura de pantalla de abajo;
4. Si haces clic en este cuadrado, se mostrará un selector de color en el mismo lugar. Si mueves el ratón a la página del sitio, el cursor cambiará su apariencia para parecerse a un catalejo, y junto a él habrá un círculo que mostrará píxeles ampliados muchas veces, golpeando el mismo catalejo.
5. Lo único que tienes que hacer es situar el cursor sobre el píxel deseado y hacer clic con el botón izquierdo. Entonces se selecciona el color que quieres en la ventana de la paleta. Se mostrará en un círculo. También se muestra la información del código de color en HEX. Si haces clic en las flechas de la derecha del código de color, puedes seleccionar otro sistema de codificación del color, por ejemplo, RGB, RGBA, HSV.

Así de fácil es averiguar y obtener el código de color de un píxel en una página web en línea utilizando tu navegador. Ahora puedes determinar fácilmente el color de cualquier elemento de la interfaz de una página web: el fondo, el texto o un punto de la imagen.

Moviendo el cursor por la paleta puedes cambiar el color del elemento seleccionado (no funciona con imágenes y fotos).

Si necesitas determinar el color de un píxel en una imagen de tu ordenador, también puedes utilizar esta herramienta.

Simplemente haz lo siguiente:

1. Abre el navegador;
2. Haz clic con el botón izquierdo del ratón en el archivo de imagen;
3. Sin soltarlo, arrástralo a la ventana del navegador;
4. Una vez que la imagen está abierta en el navegador, puedes utilizar la herramienta con seguridad.

Cómo determinar el color de un píxel en una imagen online

Si el método anterior no te convence, o si por alguna razón no has podido averiguar las herramientas del desarrollador, es posible determinar el color de los píxeles de una imagen en línea utilizando servicios.

Hay un gran número de estos servicios en línea. Sólo añadiré enlaces a 3:

Todos son muy fáciles de usar. Se necesita:

1. Abre cualquier servicio online en el enlace anterior;
2. Descarga una imagen de tu ordenador;
3. Haz clic en la imagen y se mostrará el color exacto del píxel y su código en varios formatos.

Photoshop y Paint: cómo averiguar el color con un cuentagotas

Los métodos anteriores son mucho más sencillos, porque no requieren que instales y ejecutes ningún software para realizar la tarea. Pero para los que trabajan activamente con gráficos, sólo hay que saber utilizar los editores de gráficos. Por lo tanto, vamos a ver cómo definir el color mediante un cuentagotas en Paint y Photoshop.

Definir el color mediante una paleta en Pintura:

1. Deberías abrir el Paint;
2. Carga la imagen deseada;
3. Selecciona la herramienta «Paleta» en el menú superior, y luego aparece el icono del cuentagotas;
4. Sólo tienes que hacer clic en la zona deseada de la imagen;
5. El color que quieres aparece en «Colores»;
6. A continuación, ve a «Cambiar colores», donde el código de color RGB de la imagen aparecerá en la parte inferior derecha de la ventana.

Definir un color mediante un cuentagotas en El Photoshop:

1. Necesidad de empezar con Photoshop;
2. Carga la foto o imagen deseada;
3. Pulsa la herramienta cuentagotas;
4. Haz clic en la parte deseada de la imagen (si te resulta difícil hacer clic en el píxel deseado, puedes hacer un zoom hasta un tamaño aceptable);
5. El color que deseas se muestra en la parte derecha de la pantalla;
6. Si haces clic en el pequeño icono de color, se abre una ventana con información detallada sobre el color del píxel seleccionado.

Aplicaciones de detección de color para Google Chrome

Puedes utilizar extensiones auxiliares (plugins) para determinar rápidamente los colores en línea.

Todos son muy fáciles de usar. Necesitas:

1. Instala cualquier extensión;
2. Ejecútalo de la forma habitual, haciendo clic en el icono de la extensión en la esquina superior derecha de la pantalla del navegador.

Lista de extensiones:

Por supuesto, hay plugins similares no sólo para Google Chrome, sino también para Mozilla Firefox, Opera y el navegador Yandex. Para encontrarlos, tienes que introducir «Color Picker» en la tienda de extensiones de tu navegador en el campo de búsqueda.

Selector de color de la pantalla

Para la tarea que nos ocupa, es posible utilizar programas para determinar el color en la pantalla.

Pixie es un programa muy fácil de usar que puede determinar fácilmente de qué color es un píxel en tu pantalla.