Pipette de couleur pour image

Puis-je poser du texte sur cette couleur ?

C’est presque toujours la vraie question, alors on y répond directement : chaque couleur prélevée est évaluée selon la formule WCAG pour son contraste avec un texte blanc et un texte noir, et à côté du rapport s’affiche si elle passe ou non.

• 4,5:1 est le minimum pour un texte normal (WCAG AA).
• 3:1 est le minimum pour un grand texte : environ 24 px, ou 19 px en gras.
• 7:1 est le niveau AAA, plus exigeant.

La formule n’est pas une simple comparaison de luminosité. Elle utilise la luminance relative, qui donne bien plus de poids au vert qu’au rouge et au bleu, et applique une courbe gamma. C’est pourquoi un bleu saturé qui semble « moyen » est bien plus sombre qu’il n’en a l’air, et un jaune qui paraît intense presque aussi clair que le blanc.

Il est impossible d’en juger de façon fiable à l’œil, et c’est pourquoi il vaut la peine d’afficher le chiffre.

Pourquoi la couleur obtenue peut différer de l’original

Deux réserves honnêtes :

• La compression JPEG modifie légèrement les couleurs. L’information de couleur est stockée à une résolution plus faible que la luminosité : la valeur exacte d’un petit détail coloré a donc pu glisser par rapport à ce qu’a capturé l’appareil. Viser une grande zone uniforme vous en rapproche.
• Les profils de couleur ne sont pas appliqués. Une image marquée Adobe RGB ou Display P3 est lue comme de simples nombres : une couleur saturée peut donc être lue autrement que ne l’affiche une application avec gestion des couleurs. Pour les images sRGB, soit presque tout le web, il n’y a aucune différence.

À quoi cela sert

• Retrouver une couleur de marque à partir d’un logo, quand personne ne retrouve la charte graphique.
• Créer une palette à partir d’une photo : une façon courante et vraiment efficace de choisir les couleurs d’un site ou d’une présentation.
• Examiner une capture d’écran pour trouver la couleur exacte d’un design.
• Obtenir des valeurs CSS à partir d’une maquette reçue sous forme d’image.
• Vérifier la lisibilité avant de poser du texte sur une photo ou un aplat.

Rien n’est envoyé

L’image est décodée et lue dans votre navigateur. Il ne pourrait pas en être autrement à cette vitesse, car toute l’interaction consiste à répondre à « qu’y a-t-il sous mon pointeur » aussi vite que vous le déplacez, ce qui signifie que le fichier ne quitte jamais votre appareil.

Cela mérite d’être dit, car les images que l’on analyse ne nous appartiennent souvent pas : un design non publié, les éléments de marque d’un client, la capture d’écran d’un concurrent.

Prélever sur une photo, pas sur un aplat

Un conseil pratique. Les photos n’ont pas de couleurs unies. Ce qui ressemble à un pull rouge uni, ce sont des centaines de rouges qui varient avec la lumière et l’ombre, et le pixel sur lequel vous cliquez est un échantillon de cette gamme, pas « la » couleur.

Sur une photo, la palette extraite est généralement plus utile que n’importe quel prélèvement isolé, car chaque entrée est la moyenne de tout un groupe et non un pixel arbitraire. Sur un logo, une capture d’écran ou un graphique en aplats, un seul prélèvement est exactement ce qu’il faut : ceux-là ont vraiment une seule valeur.

Obtenir une version plus sombre ou plus claire

Utilisez la HSL. Gardez la teinte et la saturation, et ne changez que la luminosité : de hsl(199, 55%, 50%) à hsl(199, 55%, 35%), c’est sans aucun doute la même couleur, en plus sombre. Faire la même chose en HEX oblige à ajuster trois valeurs à la fois en devinant, et c’est ainsi que les palettes finissent avec un « bleu foncé » qui a glissé vers le violet sans que personne ne s’en aperçoive.

Outils associés

Si vous analysez une image pour reproduire son style, la visionneuse de métadonnées indique avec quel appareil et quels réglages elle a été prise. Si vous allez créer quelque chose avec les couleurs trouvées, l’outil de filigrane accepte directement une valeur hexadécimale.