Por qué existe este selector de color de imagen

Las dos cosas que hicieron que valiera la pena

Selectores de color de imagen hay de sobra. La mayoría cae en uno de estos dos vicios.

El primero es subir tu archivo. Sueltas la captura de una página aún sin publicar en un sitio web y esa imagen viaja al servidor de alguien para que un script lea un único píxel: algo que tu propio navegador sabe hacer desde 2010. El archivo se lee, quizá se almacene, quizá se registre, y tú no tienes forma de saber qué ocurre.

El segundo es quedarse en el código hexadecimal. Querías ese color porque ibas a usarlo: meterlo en una hoja de estilos, construir una escala a su alrededor, comprobar si el texto blanco se lee bien encima. Una herramienta que te da #3F51B5 y un botón de copiar ha hecho la parte fácil y te ha dejado a ti todo lo demás.

Esta herramienta evita ambas cosas. El sitio son páginas estáticas y un pequeño script que lee píxeles de un lienzo en tu propia pestaña, así que no hay ningún servidor al que subir nada. Un solo clic te da nueve códigos de color, una paleta de ocho colores con la proporción que ocupa cada uno, seis armonías, una escala del 50 al 950, los resultados de contraste WCAG y una vista previa de visión cromática.

Quién lo hace

Soy Md. Delwar Hossen. Llevo más de ocho años desarrollando aplicaciones web, buena parte de ese tiempo en herramientas de productividad dentro de una consultora de software. Hoy soy director de Sistemas Web y Digitales en una empresa estadounidense, trabajando en remoto. Puedes encontrarme en LinkedIn.

Construí esta herramienta porque la necesitaba una y otra vez. Mi tarea más habitual era rehacer una interfaz a partir de una captura sin archivo de diseño, y cada selector que probaba o subía la captura o se quedaba en un código hexadecimal. La guía práctica lleva mi nombre por la misma razón que esta página: si una cifra de aquí está mal, sabes a quién decírselo.

Cómo está construido

Astro y Tailwind CSS, sin ningún framework de interfaz. El selector es TypeScript puro que gobierna dos lienzos.

Usar dos lienzos en vez de uno es la decisión sobre la que se sostiene la precisión. El primero es lo que ves: escalado, desplazado, ampliado y redibujado según te mueves. El segundo mantiene la imagen a su tamaño original, nunca se escala y es lo único que se mide. Esa separación es lo que hace que un color tomado a 12× sea idéntico al mismo color tomado con la imagen ajustada a la ventana, y está cubierta por una prueba de extremo a extremo precisamente porque es de esas cosas que se rompen sin hacer ruido.

Todas las matemáticas del color viven en una sola carpeta sin dependencias en tiempo de ejecución. Las conversiones van y vuelven sin pérdida para cada terna sRGB de 8 bits, un espacio lo bastante pequeño como para comprobarlo entero en lugar de muestrearlo. La rotación de tono y las escalas de luminosidad se calculan en OKLCH y no en HSL, porque HSL no es perceptualmente uniforme: una escala construida ahí parece regular en los números e irregular a la vista, con los amarillos desvaídos y los azules pesados.

Cómo se comprueba lo que se afirma aquí

Las cifras de precisión de este sitio las generan scripts. Así se comprueba cada tipo de afirmación.

• Las matemáticas del color tienen su batería de pruebas unitarias. Las conversiones se comprueban de ida y vuelta, la implementación de CIEDE2000 se contrasta con pares conocidos y las afirmaciones sobre visión cromática se verifican recorriendo el cubo RGB en lugar de darse por buenas.
• La promesa de privacidad está probada. Un script de extremo a extremo carga la herramienta real en Chromium sin interfaz, toma colores y falla si alguna petición sale de la página.
• Las cifras de precisión salen de un script. Cada número de desviación de la guía práctica lo produce un script que se ejecuta en un navegador real, así que la codificación y la decodificación JPEG son las del propio navegador. Mide cada diferencia con el mismo código delta-E que usa la herramienta. La paleta de la página de inicio se obtiene igual: el script ejecuta el código de paleta de la herramienta sobre la fotografía de ejemplo incluida.
• Los consejos desfasados se detectan. Si una nueva medición contradice el consejo escrito a su alrededor, la comprobación falla hasta que se reescribe el consejo.

Cada cifra medida de la guía práctica indica la fecha y el navegador en que se midió.

Lo que no hace, a propósito

Estos son los límites conocidos de la herramienta.

• El cuentagotas de pantalla usa una API de navegador que solo Chromium ha implementado. En Firefox y Safari el botón se oculta en lugar de mostrarse y no funcionar.
• No hay exportación a PNG, JPEG ni muestrarios de Adobe. La hoja de muestras en SVG es lo más parecido a una imagen compartible de una paleta.
• No se aplica gestión de color. Obtienes los bytes sRGB que pintaría un navegador, que es la respuesta correcta para la web y la equivocada si estás haciendo pruebas de impresión en una pantalla calibrada.
• No es una aplicación instalable sin conexión. Una vez cargada, la página no necesita red, pero no hay service worker: si la abres por primera vez sin conexión, no cargará.

Correcciones

Si aquí hay algo mal, prefiero corregirlo a defenderlo. Escribe a info@exacthex.com, o usa la página de contacto, que explica qué incluir para poder reproducir un problema de color. Las correcciones a las cifras medidas son especialmente bienvenidas: son las afirmaciones que más vergüenza daría tener mal.