Selector de color de imagen

Cómo usar Selector de color de imagen

1. Carga una imagen desde tu equipo.
2. Haz clic en el punto cuyo color quieras.
3. Copia el valor o consulta la paleta dominante.

Todo ocurre en tu navegador

Vale la pena explicarlo, porque cambia lo que puedes hacer con esta herramienta.

La imagen se lee con la API Canvas del navegador y nunca se envía a ningún servidor.

Eso significa que puedes usarla con capturas de pantalla internas, con material de cliente bajo acuerdo de confidencialidad o con cualquier archivo que no debería salir de tu equipo.

También significa que funciona sin conexión una vez cargada la página, y que no hay límite de tamaño impuesto por ningún servicio: el límite es la memoria de tu navegador.

Y no queda copia en ninguna parte. Al cerrar la pestaña, la imagen desaparece.

Desde el punto de vista de protección de datos esto es relevante si trabajas con imágenes que contienen datos personales, porque no hay transferencia a un tercero que haya que documentar ni encargado del tratamiento al que dar cuenta.

Color exacto y color dominante

Son dos cosas distintas y suelen confundirse.

El color exacto es el del píxel que señalas. Es útil para reproducir un color concreto, pero está sujeto al ruido de la imagen: dos píxeles vecinos de un mismo "azul" pueden diferir bastante.

Por eso conviene tomar el color en una zona amplia y uniforme, no en un borde ni en una zona con sombra o brillo.

El color dominante se obtiene agrupando los píxeles parecidos y ordenando los grupos por frecuencia. Da una respuesta más estable y es lo que quieres para "sacar la paleta" de una fotografía.

Ten en cuenta que el color más frecuente no es el más característico: en una foto con cielo, el dominante será el azul del cielo aunque el motivo sea otro.

Y cuidado con las imágenes con compresión JPEG fuerte: los artefactos alteran los colores en los bordes de las zonas de color plano, y ahí el cuentagotas miente.

Perfiles de color y usos prácticos

Algunas cautelas antes de dar un color por bueno.

Si la imagen tiene un perfil de color incrustado distinto de sRGB, el navegador puede mostrarla convertida mientras que los datos del canvas están en otro espacio. El valor que obtengas puede no coincidir exactamente con lo que ves.

Para trabajo de diseño donde el color importe, verifica el resultado contra el archivo original en una aplicación con gestión de color.

En capturas de pantalla no suele haber problema, porque normalmente ya están en sRGB.

Usos habituales que funcionan bien: sacar el color de marca de un logotipo del que no tienes la guía de estilo, construir una paleta a partir de una fotografía de referencia, o comprobar qué color exacto está usando una web ajena en una captura.

Y si vas a usar los colores extraídos para texto, comprueba después el contraste. Una paleta sacada de una fotografía casi nunca cumple los niveles de accesibilidad tal cual.

Preguntas frecuentes