Hex, RVB et TSL
Saisissez la couleur dans le format que vous avez et les autres se remplissent. Les trois champs sont liés.
Voici à quoi ressemble la couleur
Texte sur blanc · 3,89
Texte sur noir · 5,39
- Hex#e0521f
- RVBrgb(224, 82, 31)
- TSLhsl(16, 76%, 50%)
Canaux
- Rouge224
- Vert82
- Bleu31
- Teinte16°
- Saturation76 %
- Luminosité50 %
Série de luminosités
Même teinte et même saturation, luminosité de 10 à 90 %. Appuyez sur une case pour la reprendre.
Comment ça marche
Hex, c’est la même chose que RVB, écrit seulement avec des chiffres hexadécimaux. Chaque paire de caractères vaut pour un canal, de 00 à ff, soit de 0 à 255.
La forme courte à trois caractères est une abréviation où chaque caractère est doublé. #f30 signifie donc #ff3300, si bien que seules 4 096 des 16,7 millions de couleurs s’écrivent ainsi.
TSL décrit les mêmes couleurs avec teinte, saturation et luminosité au lieu de trois sources de lumière. La teinte est un angle sur le cercle chromatique, où 0 est le rouge, 120 le vert et 240 le bleu.
On travaille mieux en TSL quand on veut des variantes d’une même couleur. Gardez la teinte et la saturation et ne changez que la luminosité : vous obtenez une série qui va ensemble.
La conversion entre RVB et TSL est exacte dans les deux sens, mais l’arrondi aux degrés et aux pourcentages entiers en TSL peut décaler un canal d’un pas quand on fait l’aller-retour.
Comment l’outil convertit
De RVB vers TSL, chaque canal est d’abord divisé par 255. La luminosité L est la moyenne du plus grand et du plus petit canal. La saturation S est leur différence divisée par 1 − |2L − 1|. La teinte T dépend du canal le plus grand et s’exprime en degrés. Le sens inverse utilise la même roue à six secteurs, et les canaux sont arrondis à l’entier. Les lignes hex, RVB et TSL affichent des entiers, mais les nuances du bas partent des valeurs non arrondies.
Exemple détaillé
#1e90ff vaut rouge 30, vert 144 et bleu 255, soit 0,118, 0,565 et 1. Le plus grand est 1 et le plus petit 0,118, donc L = (1 + 0,118) / 2 = 0,559, soit 55,9 %. La différence 0,882 divisée par 1 − |2 × 0,559 − 1| = 0,882 donne S = 1, soit 100 %. Le bleu est le plus grand, donc T = 60 × ((0,118 − 0,565) / 0,882 + 4) = 209,6 degrés.
L’outil écrit la couleur avec une teinte de 210, une saturation de 100 % et une luminosité de 56 %. Saisissez hsl(210deg 100 56) et vous obtenez #1f8fff, pas #1e90ff, car l’arrondi a décalé le rouge et le vert d’un pas.
La luminosité TSL n’est pas la clarté perçue
CSS Color 4 fait remarquer que le jaune et le bleu ont tous deux une luminosité TSL de 50 %, alors que le jaune paraît bien plus clair. Les rapports de contraste de l’outil le confirment : le jaune hsl(60deg 100 50) donne 1,07 contre le blanc, et le bleu hsl(240deg 100 50) 8,59. Les nuances sous la couleur ne changent que la luminosité, par pas de 10 points : elles vont ensemble par la teinte, mais les pas ne paraissent pas égaux.
Ce que l’outil lit
Les champs suivent CSS Color 4 : l’hexadécimal à trois, quatre, six ou huit caractères, rgb() avec des nombres ou des pourcentages, où 100 % vaut 255 et 50 % donne 128, et hsl() avec la teinte en degrés ou dans les unités deg, rad, grad et turn. Une teinte de 0.5turn vaut ainsi 180 degrés, et hsl(0.5turn 100 50) donne #00ffff.
La transparence, en hexadécimal à quatre ou huit caractères, en quatrième valeur ou après une barre oblique, est retirée, et l’outil indique combien il y en avait. Les valeurs hors limites, comme rgb(300, 0, 0), sont refusées, alors que CSS les ramènerait dans l’intervalle.