Convertisseur de couleurs

Cinq notations, une couleur

• HEX écrit les canaux rouge, vert et bleu en trois paires de chiffres hexadécimaux, de 00 à ff. Une quatrième paire, quand elle est là, donne l’opacité.
• RGB donne les trois mêmes canaux en nombres de 0 à 255. C’est ainsi qu’on s’adresse à un écran.
• HSL les traduit en un angle de teinte, une saturation et une luminosité, plus faciles à ajuster à la main.
• HSV, aussi appelé HSB, garde la teinte et la saturation mais mesure la valeur : la distance qui sépare la couleur du noir. C’est le modèle de la plupart des sélecteurs de couleur, celui-ci compris.
• OKLCH décrit la clarté, la chroma et la teinte telles que l’œil les perçoit. Elle fait partie de CSS et tous les navigateurs actuels la comprennent.

Pourquoi apprendre OKLCH

La luminosité de HSL est une affaire d’arithmétique, pas de vision : à 50 %, son jaune éblouit et son bleu est sombre. En OKLCH, deux couleurs de même clarté paraissent également claires, quelle que soit leur teinte. C’est la notation tout indiquée pour bâtir une palette : changez la teinte en gardant le contraste, ou échelonnez la clarté à pas égaux pour obtenir une gamme qui paraît égale.

Elle peut aussi nommer des couleurs que l’écran sRGB ordinaire ne sait pas afficher. Quand une valeur en sort, le convertisseur réduit sa chroma jusqu’à ce qu’elle y entre, en gardant la clarté et la teinte, et le signale. Les navigateurs font de même.

Ce que vous pouvez coller

Des codes hexadécimaux avec ou sans le #, de trois, quatre, six ou huit chiffres. rgb() et hsl() avec des virgules ou des espaces, des pourcentages, et une opacité après une virgule ou une barre oblique. hsv() ou hsb() comme les écrivent les outils de design. oklch() avec sa clarté en pourcentage ou en nombre.

Pour vérifier la lisibilité d’une paire de couleurs, portez-les au vérificateur de contraste.