HEX, RGB, HSL, CMYK et contraste du texte expliqués

Un code couleur est une même couleur écrite dans une notation différente. HEX, RGB et HSL décrivent la même lumière sur un écran : elles se convertissent donc l'une dans l'autre de façon exacte, à l'arrondi près. Le CMYK décrit l'encre sur le papier, si bien que sa conversion à partir des valeurs écran n'est qu'une estimation. Le ratio de contraste WCAG est un autre nombre, qui compare la luminosité de deux couleurs et indique si un texte est lisible. Collez une couleur dans le convertisseur de couleurs pour voir tous les formats en même temps.

Convertisseur de couleursBesoin d’une couleur dans un autre formatEssayer gratuitement

Si la couleur qui vous intéresse se trouve dans une photo, un logo ou une capture d'écran, relevez-la d'abord sur le pixel avec la pipette couleur d'image, puis collez le code HEX ici. Comment prélever une couleur exacte dans une image détaille les étapes.

HEX et RGB, ce sont les mêmes nombres

Un code HEX se compose de trois paires de chiffres hexadécimaux. #34D6A0 contient une valeur de rouge, de vert et de bleu. Chaque paire est un nombre allant de 00 à FF, soit de 0 à 255 en décimal. Ainsi, 34 vaut 52, D6 vaut 214 et A0 vaut 160 : la forme RGB est rgb(52, 214, 160).

Écrire le nombre en hexadécimal ne change que son apparence. La forme abrégée #abc équivaut à #aabbcc, chaque chiffre étant doublé. Un code à huit chiffres ajoute à la fin une paire d'opacité, de 00 (entièrement transparent) à FF (entièrement opaque) : #34D6A080 est donc transparent à peu près à moitié. Le RGBA exprime la même opacité sous forme d'un nombre compris entre 0 et 1.

Le CSS accepte aussi les noms de couleurs. rebeccapurple correspond à #663399. Le convertisseur lit les noms par l'intermédiaire du navigateur lui-même : tout nom connu de celui-ci fonctionne.

HSL décrit une couleur comme on la décrit à l'oral

HSL signifie teinte, saturation et luminosité. La teinte est un angle sur le cercle chromatique : le rouge est à 0 degré, le vert à 120 et le bleu à 240. La saturation indique à quel point la couleur s'éloigne du gris, et la luminosité, à quel point elle s'éloigne du noir ou du blanc.

Le même #34D6A0 correspond à hsl(160, 66%, 52%). Sa teinte se situe entre le vert et le bleu, sa saturation est élevée et sa luminosité est juste au-dessus du milieu. Le HSL est la forme la plus facile à retoucher à la main : vous gardez la teinte et ne modifiez que la luminosité pour obtenir une nuance plus claire ou plus foncée.

Le HSV est proche du HSL, mais il utilise la valeur, c'est-à-dire la luminosité du canal le plus fort, à la place de la luminosité. Certaines pipettes l'emploient, vous pourriez donc le rencontrer dans d'autres outils. Le convertisseur l'affiche à côté du HSL pour que vous puissiez comparer les deux.

Le CMYK sert à l'encre, c'est donc une estimation

Les écrans ajoutent de la lumière : le rouge, le vert et le bleu réunis donnent du blanc. Les imprimantes retirent de la lumière avec de l'encre : cyan, magenta, jaune et noir sur papier blanc. Les deux systèmes ne peuvent pas correspondre exactement, si bien qu'une valeur CMYK est toujours une traduction.

Le convertisseur utilise la formule simple. Le noir est K, soit un moins la plus grande des valeurs de rouge, de vert et de bleu, sur une échelle de 0 à 1. Le cyan, le magenta et le jaune sont ensuite calculés à partir de ce que laisse K. La formule ignore l'encre, le papier et le profil colorimétrique utilisés par l'imprimeur. Le résultat imprimé sera donc différent, et les couleurs très vives peuvent sortir complètement de la gamme que les encres CMJN savent reproduire. Utilisez la valeur CMYK pour amorcer la discussion avec un imprimeur, et demandez une épreuve avant un gros tirage.

Le contraste dépend de la luminosité, pas de la teinte

Le ratio de contraste WCAG compare deux couleurs selon leur luminance relative. La luminance est calculée à partir des valeurs de rouge, de vert et de bleu après correction gamma, et le vert compte le plus, car l'œil humain y est le plus sensible. Chaque canal est d'abord converti depuis l'échelle de 0 à 255, puis la luminance vaut 0,2126 × rouge, plus 0,7152 × vert, plus 0,0722 × bleu.

Le ratio est égal à la luminance la plus claire plus 0,05, divisée par la luminance la plus sombre plus 0,05. Noir sur blanc donne 21 pour 1, le maximum possible. Deux couleurs peuvent être très différentes par la teinte et présenter tout de même un ratio faible si elles ont la même luminosité, et c'est précisément le cas que ce contrôle sert à repérer. Le même contraste insuffisant explique pourquoi les codes QR ne se scannent pas.

Les seuils

Le WCAG 2.x définit deux niveaux, et le ratio exigé dépend de la taille du texte.

• Niveau AA : 4,5 pour 1 pour le texte normal, et 3 pour 1 pour le grand texte.
• Niveau AAA : 7 pour 1 pour le texte normal, et 4,5 pour 1 pour le grand texte.

Le grand texte mesure 24 pixels ou plus, ou 18,66 pixels en gras. Tout ce qui est plus petit est considéré comme normal. Le gris sur blanc est un échec fréquent : un gris moyen comme #777777 sur blanc donne environ 4,48 pour 1. Il ne passe pas le niveau AA pour le texte normal, d'une courte marge, mais il passe ce niveau pour les grands titres.

Le convertisseur affiche le ratio arrondi à deux décimales, mais chaque validation ou échec repose sur la valeur exacte. Une valeur affichée à 4,50 peut donc échouer si elle est légèrement inférieure. Le contrôle ne mesure qu'une chose. Il ne tient pas compte de l'épaisseur de la police, de l'interligne ni de la façon dont les personnes daltoniennes perçoivent un design : testez donc aussi la page réelle, aux tailles réelles.

Teintes et nuances

La bande située sous le convertisseur affiche neuf paliers autour de la couleur : quatre teintes obtenues par mélange avec du blanc, la couleur elle-même, et quatre nuances obtenues par mélange avec du noir. Un clic sur l'un d'eux copie son code HEX. C'est utile lorsqu'il vous faut un ensemble de couleurs apparentées, par exemple un fond clair, un état au survol et une couleur de texte foncée, tirées toutes d'une même couleur de marque. Vérifiez chaque couple choisi avec la section sur le contraste avant de l'utiliser.

Comment procéder avec fixmint

1. Collez une couleur dans la zone Couleur au format HEX, RGB, HSL ou sous forme de nom CSS comme rebeccapurple.
2. Lisez les lignes HEX, RGB, HSL, HSV et CMYK. Appuyez sur Copier à côté de celle dont vous avez besoin. Le CMYK est indiqué comme approximatif.
3. Saisissez votre couleur de fond dans Arrière-plan, ou utilisez son échantillon, puis lisez le ratio sous Sur blanc, Sur noir et Sur votre arrière-plan.
4. Contrôlez les quatre mentions sous chaque ratio : AA et AAA, chacune pour le texte normal et le grand texte.
5. Sous Teintes et nuances, touchez un échantillon pour le copier.

Réponses rapides

La valeur CMYK est-elle exacte ?

Non. Il s'agit d'une simple conversion arithmétique qui ignore l'imprimeur, le papier et le profil colorimétrique. Considérez-la comme un point de départ et demandez une épreuve.

Un ratio de contraste suffisant rend-il un design accessible ?

Cela signifie que les couleurs du texte atteignent un seuil mesurable. L'accessibilité dépend aussi de la taille, de l'interlignage, des animations et de la construction de la page : le ratio est un repère, pas un audit complet.

Quel format faut-il enregistrer dans une feuille de style ?

Celui que vous lisez et modifiez le plus facilement. Le HEX est compact et très répandu. Le HSL est plus simple à ajuster à la main, car vous modifiez la luminosité sans changer la teinte.