Sélecteur de code couleur
Tous les formats, une seule couleur

Une couleur, écrite de six façons

Une couleur n’a pas d’écriture unique. Le même bleu vaut #1B5FD1 dans une feuille de style, rgb(27, 95, 209) dans un appel canvas et hsl(217, 77%, 46%) dans un jeton de design.

Tous désignent les mêmes pixels. Convertir hex en rgb ne change donc rien à la couleur, seulement à qui peut la lire.

Le problème, c’est que chaque format convient à une tâche différente. Par conséquent, une page qui en montre un et cache les autres vous envoie chercher une autre page.

Ce sélecteur de code couleur les affiche tous à la fois, et réécrit chaque champ dès que vous modifiez l’un d’eux.

L’usage de chaque notation de couleur

D’abord, le hex est court et se colle proprement. C’est le format que vous donne un designer et celui que contiennent la plupart des feuilles de style.

RGB nomme clairement les trois canaux. Il convient donc à tout ce qui calcule avec une couleur : un canvas, un dégradé, un shader.

HSL sépare la teinte de la luminosité. C’est lui qu’il faut choisir quand vous voulez la même couleur un cran plus sombre, car vous changez un seul nombre.

L’opacité relève de rgba et hsla plutôt que du hex, même si un hex à huit chiffres la porte aussi. Cette page écrit la forme qu’il vous faut.

Convertir hex en RGB à la main

Une couleur hex compte trois paires, et chaque paire est un canal écrit en base seize. Ainsi, #1B est le canal rouge.

Chaque paire devient un nombre de 0 à 255. Les lettres de a à f continuent simplement de compter après 9, donc 1B signifie une fois seize plus onze, soit 27.

Un hex à trois caractères double chaque chiffre. Par conséquent, #abc signifie #aabbcc, un raccourci utile quand on lit la feuille de style de quelqu’un d’autre.

Dans l’autre sens, de rgb en hex, chaque canal redevient deux chiffres hex. La référence MDN sur les valeurs de couleur liste toutes les syntaxes qu’accepte un navigateur.

Pourquoi la mesure de contraste est ici

La question qui suit "quelle est cette couleur" est presque toujours "puis-je mettre du texte dessus". C’est pourquoi la réponse se trouve à côté de la couleur, et non sur une autre page.

Les deux mesures comparent votre couleur au blanc et au noir. Un rapport de 4.5:1 valide AA pour le texte courant, tandis que 3:1 ne vaut que pour le grand texte.

Ces seuils viennent de WCAG, et chaque vérificateur les calcule de la même façon. Celui-ci suit la formule exactement au lieu de l’arrondir.

Une couleur qui échoue comme texte peut encore servir de fond, de bordure ou de remplissage de graphique. La note sous les mesures dit dans quel cas vous êtes.

Lire HSL sans mathématiques

Tout d’abord, la teinte est un angle sur un cercle chromatique. Zéro, c’est le rouge, 120 le vert, 240 le bleu, et les nombres intermédiaires les mélangent.

Ensuite, la saturation, c’est la quantité de couleur. À 0 %, toute teinte devient grise, et à 100 % elle est aussi vive que l’écran le permet.

Enfin, la luminosité va du noir à 0 % au blanc à 100 %. Votre couleur se situe à 50 %, c’est pourquoi une couleur de marque tombe souvent autour de là.

Un bouton plus sombre garde donc la même teinte et la même saturation avec une luminosité plus basse. C’est un seul nombre, et la famille reste cohérente.

Quand deux couleurs ne devraient pas se rencontrer

Certaines paires se lisent mal même quand la mesure de contraste passe. Le rouge sur vert est l’exemple classique, car le rapport ignore le daltonisme.

Environ un homme sur douze perçoit le rouge et le vert autrement. Par conséquent, un graphique qui distingue ses courbes par la seule teinte les perd.

Ajoutez plutôt un second signal. Une étiquette, un motif de tirets ou une forme porte le sens quand la couleur ne le fait pas.

Testez aussi en niveaux de gris. Si l’image se lit encore sans couleur, elle se lit pour tout le monde.

Une autre paire piège souvent : un gris moyen sur une couleur moyenne. Les deux se trouvent au milieu de l’échelle, donc le rapport passe sous trois et les mots se fondent dans le panneau derrière.

Où finit chaque code

Le CSS accepte les trois formes, donc prenez celle qui se lit le mieux dans le fichier. La plupart des équipes écrivent du hex pour les couleurs fixes et du hsl dans un calcul.

De plus, les outils de design penchent vers le hex. C’est ce que contient un fichier de livraison, et ce qu’un développeur collera en premier.

Le mobile est différent. Swift veut chaque canal de 0 à 1, et Android veut un hex à huit chiffres avec l’opacité en tête.

Cette page écrit toutes ces formes, donc une couleur passe d’un fichier de design à une application sans que personne ne calcule.

Le nuancier mélange, il ne devine pas

Chaque cran mélange votre couleur vers le blanc ou vers le noir selon une quantité fixe. Ainsi, la teinte reste stable pendant que la luminosité change, ce que doit faire une série de teintes.