Pourquoi cette pipette couleur existe

Deux défauts qui méritaient un nouvel outil

Ce ne sont pas les sélecteurs de couleurs d'image qui manquent. La plupart font l'une de ces deux choses agaçantes.

La première : ils envoient votre fichier. Vous déposez la capture d'une page encore confidentielle sur un site web, et elle part sur le serveur de quelqu'un pour qu'un script y lise un pixel, alors que votre propre navigateur sait le faire depuis 2010. Le fichier est lu, peut-être stocké, peut-être journalisé, et vous n'avez aucun moyen de savoir ce qu'il en est.

La seconde : ils s'arrêtent au code hexadécimal. Vous vouliez cette couleur pour vous en servir : la mettre dans une feuille de style, bâtir une échelle autour, vérifier qu'un texte blanc y reste lisible. Un outil qui vous tend #3F51B5 et un bouton Copier a fait le plus facile et vous laisse le reste du travail.

Cet outil évite les deux. Le site se compose de pages statiques et d'un petit script qui lit les pixels sur un canvas, dans votre propre onglet : il n'y a donc aucun serveur où envoyer quoi que ce soit. Un seul clic vous donne neuf codes couleur, une palette de huit couleurs avec la part de l'image qu'occupe chacune, six harmonies, une échelle de 50 à 950, les résultats de contraste WCAG et un aperçu de la vision des couleurs.

Qui le développe

Je suis Md. Delwar Hossen. Je construis des applications web depuis plus de huit ans, dont une bonne partie sur des outils de productivité dans une société de conseil en logiciel. Je suis aujourd'hui directeur des systèmes web et numériques dans une entreprise américaine, en télétravail. Vous me trouverez sur LinkedIn.

J'ai créé cet outil parce que j'en avais sans cesse besoin. Mon travail le plus fréquent consistait à reconstruire une interface à partir d'une capture d'écran sans fichier de design, et chaque sélecteur que j'essayais soit envoyait la capture sur un serveur, soit s'arrêtait à un code hexadécimal. Le guide pratique porte mon nom pour la même raison que cette page : si un chiffre est faux ici, vous savez à qui le dire.

Comment il est construit

Astro et Tailwind CSS, sans framework d'interface. La pipette est écrite en TypeScript pur et pilote deux canvas.

Deux canvas plutôt qu'un : c'est la décision sur laquelle repose toute la précision. Le premier est ce que vous voyez : mis à l'échelle, déplacé, zoomé, redessiné à chacun de vos gestes. Le second conserve l'image à sa taille d'origine, n'est jamais redimensionné, et c'est le seul à être mesuré. C'est cette séparation qui rend une couleur prélevée au zoom ×12 identique à la même couleur prélevée en vue ajustée, et elle est couverte par un test de bout en bout précisément parce que c'est le genre de chose qui casse en silence.

Tous les calculs colorimétriques sont regroupés dans un seul dossier, sans dépendance d'exécution. Les conversions sont testées en aller-retour sur tous les triplets sRGB 8 bits, un espace assez petit pour être vérifié de façon exhaustive plutôt que par échantillonnage. Les rotations de teinte et les échelles de clarté sont calculées en OKLCH plutôt qu'en HSL, car HSL n'est pas perceptuellement uniforme : une échelle construite en HSL paraît régulière sur le papier et irrégulière à l'œil, les jaunes se délavant pendant que les bleus restent lourds.

Comment les affirmations de ce site sont vérifiées

Les chiffres de précision de ce site sont produits par des scripts. Voici comment chaque type d'affirmation est vérifié.

• Les calculs colorimétriques ont leur suite de tests unitaires. Les conversions sont testées en aller-retour, l'implémentation de CIEDE2000 est vérifiée sur des paires de référence, et ce qui est avancé sur la vision des couleurs est contrôlé sur tout le cube RGB au lieu d'être simplement affirmé.
• La promesse de confidentialité est testée. Un script de bout en bout charge le véritable outil dans Chromium sans interface, prélève des couleurs et échoue si une requête quitte la page.
• Les chiffres de précision viennent d'un script. Chaque valeur de dérive du guide pratique est produite par un script qui tourne dans un vrai navigateur : l'encodage et le décodage JPEG sont donc ceux du navigateur lui-même. Il mesure chaque écart avec le même code delta-E que l'outil. La palette de la page d'accueil est obtenue de la même façon : le script fait tourner le code de palette de l'outil sur la photo d'exemple fournie.
• Un conseil périmé est détecté. Si une nouvelle mesure contredit le conseil écrit autour d'elle, la vérification échoue tant que le conseil n'est pas réécrit.

Chaque valeur mesurée du guide pratique indique la date et le navigateur de la mesure.

Ce qu'il ne fait pas, et c'est voulu

Voici les limites connues de l'outil.

• La pipette d'écran repose sur une API que seul Chromium prend en charge. Dans Firefox et Safari, le bouton est masqué plutôt qu'affiché mais inopérant.
• Il n'y a ni export PNG, ni export JPEG, ni nuancier Adobe. Le nuancier SVG est ce qui se rapproche le plus d'une image de palette partageable.
• La gestion des couleurs n'est pas appliquée. Vous obtenez les octets sRGB qu'un navigateur peindrait, ce qui est la bonne réponse pour le web, et la mauvaise si vous faites un épreuvage écran sur un moniteur calibré.
• Ce n'est pas une application hors ligne installable. Une fois la page chargée, elle n'a plus besoin du réseau, mais il n'y a pas de service worker : un démarrage à froid sans connexion ne fonctionnera pas.

Corrections

Si quelque chose est faux ici, je préfère le corriger plutôt que le défendre. Écrivez à info@exacthex.com, ou passez par la page de contact, qui précise les informations à joindre pour qu'un problème de couleur soit reproductible. Les corrections sur les valeurs mesurées sont particulièrement bienvenues : ce sont les affirmations sur lesquelles il serait le plus gênant de se tromper.