Sélecteur de couleur

Référence des formats de couleur

Comment fonctionne un sélecteur de couleur ?

Un sélecteur de couleur graphique, c’est en réalité trois commandes qui travaillent ensemble. Le grand carré dans lequel on fait glisser le pointeur est un champ saturation/valeur à deux dimensions : en se déplaçant de gauche à droite, on change l’intensité de la couleur (la saturation), et en montant ou en descendant, on change son degré de clarté (la valeur, c’est-à-dire la brillance). La bande étroite à côté — le curseur de teinte — choisit la couleur de base et traverse le rouge, l’orange, le jaune, le vert, le cyan, le bleu et le magenta avant de revenir au rouge à 360°. Un troisième curseur, facultatif, règle l’alpha (l’opacité), du tout transparent au tout opaque ; il est en général dessiné sur un damier pour qu’on voie vraiment ce que la couleur laisse passer.

Ce schéma « un carré plus des curseurs » s’appuie sur le modèle HSV (teinte, saturation, valeur) et sur son proche parent HSL (teinte, saturation, luminosité), et non sur le simple RGB — pour une raison très humaine. Le HSV correspond à la manière dont on pense la couleur : on décide d’abord quelle couleur on veut — la teinte — puis à quel point elle doit être vive et à quel point elle doit être claire. Bouger trois nombres séparés de 0 à 255 pour le rouge, le vert et le bleu jusqu’à tomber sur « un bleu ciel un peu moins soutenu » est bien plus difficile que de faire glisser un pointeur dans un seul carré. Comme le curseur fige la teinte pendant qu’on explore le carré, le sélecteur peut dessiner tout le plan saturation/valeur de cette teinte sous forme de dégradé continu : exactement le champ que vous voyez sur cette page.

Cette disposition a été popularisée par le sélecteur de couleur d’Adobe Photoshop, puis est devenue la norme de fait dans des logiciels comme Figma, Sketch ou GIMP, et dans la quasi-totalité des sélecteurs du web. Les habitudes sont si ancrées que presque tout le monde sait se servir d’un sélecteur jamais vu auparavant : les couleurs vives sont en haut à droite du carré, le blanc en haut à gauche, et le noir court le long du bord inférieur quelle que soit la teinte.

La pipette à couleur et les sélecteurs natifs du navigateur

Les navigateurs embarquent déjà quelques moyens de choisir une couleur, et il vaut la peine de savoir ce que fait chacun. L’élément HTML <input type="color"> affiche un petit carré qui, une fois cliqué, ouvre la fenêtre de couleurs du système d’exploitation. Sa valeur est depuis toujours une chaîne hex en minuscules de sept caractères, de la forme #rrggbb : historiquement sans canal alpha, et s’il n’est pas défini, il démarre sur #000000. C’est pour cela que beaucoup de « sélecteurs de couleur » simples ne renvoient que le code couleur hex. (Les navigateurs les plus récents commencent à proposer un attribut alpha facultatif et des espaces colorimétriques plus larges, mais la simple valeur hex reste le dénominateur commun sur lequel on peut compter partout.)

La pipette, elle, est une capacité différente et plus récente. L’EyeDropper API permet à une page web de prélever la couleur de n’importe quel pixel affiché à l’écran : pas seulement dans la page, mais partout où la personne peut voir quelque chose, autres fenêtres comprises. En appelant new EyeDropper().open(), le pointeur se transforme en loupe ; la promesse renvoyée ne se résout qu’après un clic volontaire sur un pixel, et rapporte un objet dont la propriété sRGBHex contient la couleur prélevée. Par respect de la vie privée, elle ne peut démarrer qu’à partir d’un vrai geste de l’utilisateur (comme le bouton pipette de cet outil), ne fonctionne que sur une connexion sécurisée HTTPS et ne lit jamais les pixels en douce : la touche Échap annule tout. Pour l’instant, seuls les navigateurs basés sur Chromium la prennent en charge (Chrome, Edge et Opera) ; Firefox et Safari ne l’ont pas encore, donc un outil bien fait éteint le bouton quand l’API manque, comme ici. Ce qui est prélevé n’est envoyé nulle part : la couleur est calculée entièrement sur votre appareil.

Comment l’œil voit-il vraiment la couleur ?

Si un écran arrive à imiter n’importe quelle couleur avec seulement trois lumières, c’est grâce à la biologie de l’œil. La vision humaine des couleurs est trichromatique : la rétine contient trois types de cônes, chacun sensible à une bande différente de longueurs d’onde. Les cônes L (longues) culminent autour de 560 nm et répondent surtout à la lumière rougeâtre, les cônes M (moyennes) culminent vers 530 nm pour la lumière verdâtre, et les cônes S (courtes) autour de 420 nm pour la lumière bleutée. Le cerveau ne mesure pas directement la longueur d’onde : il compare la fréquence à laquelle ces trois types de cônes s’activent et déduit une couleur de ce rapport.

De ce système fondé sur la comparaison découle une conséquence importante, le métamérisme : deux mélanges de longueurs d’onde complètement différents peuvent produire la même réponse dans les cônes, et donc paraître exactement de la même couleur. Un jaune pur du spectre et un mélange bien dosé de lumière rouge et de lumière verte sont physiquement deux choses distinctes, et pourtant l’œil ne les sépare pas. Les écrans exploitent ce fait sans retenue : en mélangeant seulement des sous-pixels rouges, verts et bleus, ils recréent un métamère de presque toutes les couleurs que l’œil sait reconnaître — et c’est précisément pour cela que le modèle RGB est à la base de tous les écrans et de tous les sélecteurs de couleur.

Avec 8 bits par canal, un écran offre 256 niveaux de rouge, 256 de vert et 256 de bleu : 256 × 256 × 256 ≈ 16,7 millions de combinaisons. L’œil distingue de l’ordre de dix millions de couleurs, donc pour le travail courant sur écran, cette profondeur dite « truecolor » va déjà au-delà de ce que presque tout le monde perçoit, et les bandes visibles sont rares. Une curiosité utile : l’œil est nettement plus sensible au vert qu’au rouge ou au bleu — les cônes L et M font l’essentiel du travail tandis que les cônes S ne représentent qu’une petite part du total — et c’est pour cela que le vert pèse davantage dans la brillance perçue, et que les verts moyens peuvent sembler si intenses dans le sélecteur.

Quel format de couleur faut-il copier ?

Un sélecteur n’est vraiment utile que s’il rend la couleur dans la notation attendue par la destination. Le hex (#rrggbb, ou #rrggbbaa avec l’alpha) est la monnaie courante du web — court, facile à copier-coller et accepté partout — mais il est difficile à lire : personne ne regarde #5b8cff en comprenant qu’il s’agit d’un bleu clair. rgb() / rgba() montrent les mêmes nombres en décimal et rendent service quand on mélange des couleurs ou qu’on écrit du code. hsl() / hsla() sont les plus commodes à retoucher à la main en CSS, car en ne changeant que la luminosité, la couleur s’éclaircit ou s’assombrit de façon prévisible sans abîmer sa teinte.

Au-delà de ces trois-là, le CSS moderne ajoute plusieurs fonctions plus récentes. hwb() (teinte, quantité de blanc, quantité de noir) décrit une couleur comme une teinte de base éclaircie d’un peu de blanc et assombrie d’un peu de noir : un modèle à la manière des peintres, qui reste toutefois dans l’espace sRGB comme HSL. Plus important encore, lab() et lch() utilisent l’espace CIELAB, qui ne dépend pas de l’appareil, et oklab() / oklch() utilisent l’espace Oklab. Le grand avantage d’Oklab et d’OkLCh est qu’ils sont uniformes pour la perception : un même écart numérique produit un changement qui paraît à peu près identique partout dans l’espace des couleurs. Ils sont donc excellents pour bâtir des palettes à pas réguliers, des dégradés sans « zones mortes » grisâtres et des échelles de luminosité prévisibles — d’où la recommandation de plus en plus fréquente d’oklch() pour les échelles de couleur des systèmes de design.

Pour presque tout le travail quotidien sur le web, copiez le hex ou rgb() ; passez à hsl() quand vous voulez retoucher à la main, et à oklch() ou lab() quand vous construisez une palette ordonnée et que les écarts doivent paraître égaux à l’œil. (Les trois premières lignes ci-dessus montrent la couleur actuelle de cette page ; les lignes suivantes montrent la notation des fonctions, pas la conversion exacte de la même valeur.)

Concevoir en pensant au daltonisme et au contraste

Choisir une couleur qui plaît n’est pas la même chose qu’en choisir une qui fonctionne pour tout le monde. Environ 8 % des hommes et 0,5 % des femmes d’origine nord-européenne ont une forme de difficulté de vision des couleurs, car les types les plus courants dépendent de gènes portés par le chromosome X. La grande majorité concerne le couple rouge–vert — la deutéranomalie, c’est-à-dire une réponse au vert décalée, est la forme isolée la plus fréquente — et rend faciles les confusions entre rouges, verts, bruns et oranges. La difficulté bleu–jaune (tritan) existe, mais elle est rare. La leçon pratique est la vieille règle d’accessibilité : « ne pas se reposer sur la couleur seule ». La couleur ne doit jamais être le seul moyen de transmettre un sens. Un message d’erreur rouge s’accompagne d’une icône ou d’un texte, les séries d’un graphique se distinguent aussi par des motifs ou des étiquettes, et les liens se soulignent en plus d’être colorés.

La lisibilité est l’autre moitié du problème, et là, les chiffres sont précis. Les Web Content Accessibility Guidelines (WCAG) définissent un rapport de contraste entre le texte et son fond et, au niveau AA retenu presque partout, exigent au moins 4,5:1 pour un texte de taille normale et 3:1 pour un texte de grande taille (environ 18pt, ou 14pt en gras), ainsi que pour les commandes de l’interface et les images porteuses de sens. Donc, quand ce sélecteur vous rend un code couleur hex destiné au texte d’un paragraphe, la vraie question n’est pas « est-il joli ? » mais « dépasse-t-il 4,5:1 par rapport au fond ? ». La bonne habitude est de choisir la couleur ici, puis de vérifier la paire dans un vérificateur de contraste dédié avant de l’adopter.

Une méthode de choix des couleurs qui tient dans la durée

Trouver une belle couleur est facile ; rester cohérent sur tout un projet est le moment où un sélecteur se rentabilise. Une méthode reproductible tient en quatre temps. D’abord, capturer : utilisez la pipette à couleur pour prendre la couleur exacte d’une marque sur un logo, une capture d’écran ou une image de référence, au lieu d’y aller à l’œil ; la valeur est ainsi juste au pixel près. Ensuite, fixer les points d’ancrage : choisissez un petit groupe de couleurs principales (une primaire, une secondaire, un neutre et une ou deux couleurs d’accent) et enregistrez-les avec Ajouter à la palette, pour ne pas avoir à les retrouver de mémoire à chaque fois. Puis, élargir : à partir de ces points d’ancrage, générez les teintes claires et les nuances foncées nécessaires aux états au survol, aux bordures et aux fonds, en gardant la teinte fixe pour que la famille reste cohérente. Enfin, exporter : sortez l’ensemble terminé en propriétés personnalisées CSS (--color-1, --color-2, …) ou en JSON, pour que les mêmes valeurs pilotent chaque page et chaque composant.

La transparence mérite un mot à part. Mieux vaut utiliser l’alpha plutôt qu’une couleur pleine mélangée à la main dès qu’il s’agit d’un voile, d’une légère nuance de couleur ou d’une teinte qui doit s’adapter à ce qu’il y a derrière : un voile rgba(0, 0, 0, 0.5) posé sur une image reste juste quelle que soit l’image, alors qu’un gris figé ne l’est pas. Comme cet outil garde l’historique et la palette dans la mémoire locale du navigateur, vous pouvez fermer l’onglet et retrouver plus tard le même groupe de couleurs, puis copier n’importe quel échantillon directement dans votre feuille de style. L’objectif est d’avoir une source de vérité unique pour la couleur, qui vit dans les jetons de design, au lieu de chaînes hex éparpillées et recopiées entre les fichiers.

Quelles erreurs reviennent le plus souvent dans le choix des couleurs ?

Quelques erreurs reviennent sans arrêt. La première est de traiter le hex comme s’il disait tout : un code couleur hex ne dit rien au premier coup d’œil sur la luminosité ou la teinte d’une couleur, donc le modifier directement en hex mène facilement à côté. Mieux vaut passer en HSL ou en HSV pour raisonner sur une couleur, et garder le hex pour la conserver. La deuxième est d’oublier l’alpha : oublier que #000000 et un noir à 50 % d’opacité se comportent tout autrement, ou figer en couleur pleine un effet qui était en réalité semi-transparent, et qui ne fonctionne plus sur un autre fond.

La troisième, et la plus lourde de conséquences, est de choisir des paires à faible contraste parce qu’elles paraissent élégantes sur un écran lumineux et bien réglé. Un texte gris clair sur blanc peut disparaître sur un téléphone au soleil et ne passe pas les WCAG : le rapport doit toujours être vérifié. La quatrième est de croire que la couleur à l’écran sera la même à l’impression : les écrans émettent de la lumière RGB, alors que l’impression mélange des encres CMJN sur du papier, et les deux gamuts ne coïncident pas. Un bleu vif ou un vert fluo d’écran est souvent impossible à reproduire à l’encre ; les couleurs destinées à l’impression se testent donc dans un flux CMJN plutôt qu’en se fiant à l’écran. Enfin, ne pas enregistrer ses couleurs fait perdre du temps : retrouver le même bleu de marque cinq fois par semaine garantit cinq bleus légèrement différents. Prenez-le une fois, enregistrez-le dans une palette, exportez-le en jetons et réutilisez-le partout.