Convertisseur de couleur RVB vers TSL

La teinte (H) indique la position de votre couleur sur la roue chromatique, la saturation (S) montre a quel point elle est vive ou terne, et la luminosite (L) indique sa proximite avec le noir ou le blanc. Ensemble, ces trois valeurs s'utilisent directement en CSS sous la forme hsl(H, S%, L%).

R, G et B sont d'abord ramenes a une echelle de 0 a 1. La luminosite (L) est la moyenne du canal le plus eleve et du plus bas. La saturation (S) est la difference entre les canaux relative a la luminosite, et la teinte (H) est calculee sur une plage de 0 a 360 degres selon le canal dominant.

• Les valeurs R, G, B sont divisees par 255 pour les ramener a une echelle de 0 a 1.
• La plus grande (max) et la plus petite (min) des valeurs ramenees a l'echelle sont identifiees.
• La luminosite (L) est calculee comme la moyenne des valeurs max et min.
• La saturation (S) est obtenue en normalisant la difference max-min par rapport a la luminosite.
• La teinte (H) est calculee sur une plage de 0 a 360 degres selon le canal dominant (R, G ou B).

R=52, G=152, B=219 (un bleu vif) donne environ H=204 degres, S=70 %, L=53 %.

• Saisissez R, G et B sous forme de nombres entiers entre 0 et 255 ; toute valeur en dehors de cette plage ne represente pas une couleur valide.
• La teinte (H) est une position sur une roue chromatique de 0 a 360 degres : 0 signifie rouge, 120 vert, 240 bleu.
• La saturation et la luminosite se lisent en pourcentage ; 0 % de saturation donne une nuance de gris et 100 % de luminosite donne du blanc.

Le modele RVB (Rouge, Vert, Bleu) reproduit exactement la maniere dont les ecrans produisent de la couleur en emettant de la lumiere : chaque canal prend une valeur d'intensite de 0 a 255, et la combinaison des trois canaux produit des millions de couleurs distinctes. Ce modele n'est cependant pas intuitif lorsqu'on souhaite rendre une couleur 'plus claire' ou 'plus vive', car il faut alors ajuster les trois canaux simultanement.

Le modele TSL (Teinte, Saturation, Luminosite) decrit au contraire les couleurs comme l'oeil humain les percoit : la teinte identifie de quelle couleur il s'agit (rouge, vert, violet), la saturation indique son intensite, et la luminosite montre sa clarte ou son obscurite. C'est pourquoi les designers et developpeurs preferent souvent le TSL pour construire des palettes de couleurs.

Cet outil ramene votre entree RVB a une echelle de 0 a 1, puis identifie les valeurs de canal les plus hautes et les plus basses pour calculer la luminosite et la saturation. Il determine ensuite quel canal est dominant afin de trouver la position exacte de la teinte sur la roue chromatique.

Le grand avantage du format TSL est qu'il peut s'utiliser directement en CSS sous la forme hsl(teinte, saturation%, luminosite%). Par exemple, pour creer une variante plus foncee de la couleur principale d'une marque, il suffit de reduire la luminosite — en RVB, il faudrait recalculer separement les trois canaux.

Les conversions de couleur comme celle-ci sont courantes en design web, en creation de logos, en visualisation de donnees et dans les systemes de themes d'interface. Convertir le RVB en TSL est un point de depart pratique pour les developpeurs qui souhaitent creer des variantes de theme clair/sombre ou une palette de couleurs coherente.