Capturar el color de un píxel de imagen

¿Qué es un color picker de imagen?

Un color picker (en español cuentagotas de color o captura de color) es una herramienta que devuelve el valor exacto de un píxel elegido en una imagen. Carga una foto, hace clic en el punto que le interesa y la herramienta devuelve el color preciso en forma de HEX, RGB y HSL. Es el equivalente web del cuentagotas de los programas de diseño como Photoshop, GIMP o Figma.

Nuestra herramienta funciona directamente en su navegador. Sube su imagen, se muestra en la página y basta con que haga clic en un píxel para obtener su color. La lectura del píxel se realiza en el lado del cliente mediante la API canvas, sin idas y venidas al servidor, sin recompresión y sin envío de la imagen por la red para la selección.

Diferencia con un extractor de colores

Nuestro extractor de colores y nuestro color picker responden a dos necesidades distintas, que conviene diferenciar bien:

• El extractor analiza el conjunto de la imagen y devuelve la paleta dominante (los 5, 8 o 10 tonos más representados). Es la herramienta de elección para sintetizar la atmósfera cromática de una foto, crear un mood board o nutrir una carta.
• El color picker devuelve el color exacto de un píxel concreto que usted designe. Es la herramienta de elección cuando sabe dónde mirar: un logotipo en una captura, un matiz preciso de un degradado, un fondo de pantalla de referencia.

El extractor trabaja sobre millones de píxeles y aplica clustering para hacer emerger grupos de colores; el picker se limita a leer el valor RGB almacenado en la posición donde usted hace clic. El primero generaliza, el segundo es quirúrgico.

Cómo funciona, técnicamente

Una imagen digital es una rejilla de píxeles, cada píxel con tres canales RGB (rojo, verde, azul) codificados generalmente en 8 bits, es decir, 256 valores por canal. Cuando hace clic en un punto, la herramienta:

1. Dibuja su imagen en un elemento canvas, conservando sus dimensiones nativas (con un techo de 1500 píxeles de ancho para que resulte cómoda en pantalla).
2. Convierte la posición del clic en coordenadas de imagen nativa, compensando el redimensionado de visualización del navegador.
3. Lee el valor RGBA del píxel mediante la API canvas.getContext('2d').getImageData(x, y, 1, 1).
4. Muestra una vista previa del color elegido. Al enviar, el servidor lee la misma posición con PHP GD y calcula los códigos HEX, RGB y HSL definitivos.

El valor HSL se calcula mediante nuestro servicio de conversión de color, idéntico al que utiliza nuestro convertidor de colores. Coherencia de extremo a extremo: obtiene los mismos valores que si hubiera introducido el código HEX en el convertidor.

Casos de uso típicos

• Reproducir un color de captura de pantalla: tiene una captura de un sitio y quiere replicar exactamente el tono de un botón o de un fondo. El picker le da el código HEX preciso para pegarlo en su CSS.
• Identificar un color de carta sobre una foto: un PDF de presentación, una página de revista, una imagen de producto. Ya no hace falta pedir la carta, lee el color directamente.
• Ingeniería inversa de identidad visual: capturar el azul exacto de un logotipo, el rosa de un banner, el naranja de una llamada a la acción.
• Inspiración y observación de diseño: ve una foto que le gusta, recupera el tono exacto de una flor, de una pared, de un cartel.
• Depuración front-end: una captura de un bug muestra un color incorrecto, lee el valor real para compararlo con el esperado en el maquetado.
• Creación de paleta a partir de una referencia: hace pick de varios puntos de una misma imagen para reconstituir una paleta personalizada.

Cómo utilizar el color picker

1. Suba su imagen (PNG, JPG, GIF, BMP, WebP, hasta 20 MB).
2. Se muestra una vista previa en la página. Haga clic en un píxel para obtener su color.
3. Una mira marca la posición clicada y aparece una vista previa del color al lado.
4. Valide con el botón de envío para obtener el resultado final: cuadrado coloreado, código HEX, RGB y HSL.
5. Para transformar el valor entre formatos, pase por nuestro convertidor de colores.

Preguntas frecuentes

Ejemplo de solicitud

curl -X POST https://cdrn.fr/api/v1/tools/color-picker/execute \
  -F "image=@/path/to/file" \
  -F "x=..." \
  -F "y=..."

Esquema de entrada

esta herramienta espera un archivo - utiliza Content-Type multipart/form-data en lugar de application/json

Puntos de acceso

• GET https://cdrn.fr/api/v1/tools - lista todas las herramientas disponibles
• GET https://cdrn.fr/api/v1/tools/color-picker - recupera el esquema de esta herramienta
• POST https://cdrn.fr/api/v1/tools/color-picker/execute - ejecuta esta herramienta con un payload JSON