RVB vers TSL: le convertisseur qui traduit l’écran en perception humaine
Cette page convertit une couleur exprimée en RVB (trois nombres de 0 à 255) vers le modèle TSL – teinte, saturation, luminosité – et affiche simultanément les équivalents en HEX, TSV, CMJN et LAB. Contrairement au RVB, où modifier un canal modifie souvent la teinte perçue, le TSL permet d’ajuster la luminosité indépendamment tout en conservant la teinte constante. C’est le modèle de prédilection pour générer des palettes, des thèmes et des variantes accessibles. Les valeurs RVB sont des intensités brutes sur une échelle additive; le TSL exprime la teinte sur un cercle de 0° à 360°, la saturation et la luminosité en pourcentages.
L’originalité de cet outil tient à ce qu’il ne se contente pas d’afficher une conversion: il la rend immédiatement exploitable en modifiant un champ, tous les autres se mettent à jour. Aucune donnée n’est envoyée sur un serveur – tout le calcul s’effectue dans le navigateur.
Fonctionnement de l’outil: entrées, sorties et règles de validation
Entrée
Trois entiers entre 0 et 255, séparés par des virgules ou des espaces. Exemple: 79, 70, 229. Si la saisie est invalide, le message suivant apparaît:
« Saisissez trois nombres de 0 à 255, comme 79, 70, 229. »
Sorties
- TSL: teinte (0–360), saturation (%) et luminosité (%)
- HEX (code hexadécimal à six chiffres)
- TSV (teinte, saturation, valeur)
- CMJN (estimation écran, non destinée à l’impression professionnelle)
- LAB (espace CIE Lab*)
Règles et cas particuliers
- On peut aussi saisir directement une valeur TSL (par ex.
243°, 75%, 59%) pour revenir au RVB correspondant. Une saisie TSL invalide affiche:
« Saisissez la teinte (0–360) et deux pourcentages, comme 243, 75 %, 59 %. » - Si une valeur LAB ou CMJN sort du domaine visible du RVB, l’outil l’ajuste à la couleur affichable la plus proche. Une reconversion inverse peut alors introduire un léger décalage.
- Le CMJN fourni est une estimation à l’écran; pour une impression professionnelle, une vérification avec un profil ICC est nécessaire.
Le modèle RVB: comment l’écran fabrique la couleur
Le RVB (rouge, vert, bleu) est un modèle additif. Chaque pixel d’un écran est composé de trois sous-pixels qui émettent de la lumière rouge, verte et bleue. En combinant ces trois lumières à différentes intensités, on obtient la quasi-totalité des couleurs visibles sur un écran sRVB (l’espace de travail par défaut du web). Les intensités sont codées sur 8 bits par canal, soit 256 niveaux (0 à 255). 0 correspond à une éteinte, 255 au maximum d’émission.
Cette représentation est naturelle pour une machine, mais contre-intuitive pour un humain qui veut, par exemple, assombrir une couleur sans en changer la teinte. Si on réduit uniformément les trois canaux RVB d’un orange vif, on obtient un orange plus sombre… mais aussi un grisâtre si les proportions ne sont pas strictement conservées. Le modèle RVB ne permet pas de manipuler séparément la teinte, la saturation ou la luminosité.
Le modèle TSL: teinte, saturation, luminosité
Le TSL (hue, saturation, lightness) est une transformation du RVB conçue pour correspondre à la façon dont nous percevons les couleurs.
- Teinte (H): position sur le cercle chromatique, mesurée en degrés (0° = rouge, 120° = vert, 240° = bleu, 360° = rouge à nouveau).
- Saturation (S): pureté de la couleur, en pourcentage. 0 % = gris (achromatique), 100 % = couleur pleine.
- Luminosité (L): clarté perçue, en pourcentage. 0 % = noir, 100 % = blanc.
Contrairement au RVB, où un changement de valeur modifie souvent la teinte, le TSL permet de faire varier la luminosité seule tout en gardant la teinte identique. Cette propriété le rend indispensable pour créer des teintes, des ombres et des tons dérivés d’une couleur de base.
Pourquoi utiliser le TSL pour les palettes et l’accessibilité?
Palettes et thèmes
Un designer qui souhaite générer une palette monochromatique peut fixer la teinte d’une couleur‑clé, puis faire varier la saturation et la luminosité. Avec le RVB, il faudrait recalculer manuellement les trois canaux pour chaque nuance. En TSL, une simple modification du paramètre L produit instantanément une version plus claire ou plus foncée, sans risque de virer vers une teinte différente. C’est aussi le modèle utilisé par les systèmes de conception (Material Design, Fluent UI) pour dériver des variantes de couleurs.
Accessibilité (contraste WCAG)
Les critères WCAG (Web Content Accessibility Guidelines) exigent un rapport de contraste suffisant entre le texte et son fond. Avec le TSL, on peut augmenter la luminosité d’un fond ou diminuer celle d’un texte tout en conservant la teinte de la marque. En RVB, cette opération est hasardeuse: deux couleurs de même teinte peuvent avoir des contrastes très différents selon leurs canaux.
Exemple pratique
Prenons un bleu corporate: RVB(30, 80, 200). Pour un texte sur fond blanc, le contraste est insuffisant. En conservant la teinte (environ 222°), on peut réduire la luminosité de 45 % à 25 % pour obtenir un bleu plus foncé, tout en gardant la même identité visuelle. Avec le RVB, il faudrait tâtonner sur les trois canaux pour arriver au même résultat.
Mathématiques de la conversion RVB ↔ TSL
La conversion est standardisée. Voici les grandes étapes, sans formalisme excessif.
De RVB vers TSL (valeurs normalisées entre 0 et 1 pour chaque canal):
- Trouver le min et le max des trois canaux (R, V, B).
- La luminosité L est la moyenne du min et du max:
L = (max + min) / 2. - Si max = min, la couleur est grise → saturation = 0, teinte indéfinie.
- Sinon, la saturation dépend de L:
- Si L ≤ 0,5:
S = (max - min) / (max + min) - Si L > 0,5:
S = (max - min) / (2 - max - min)
- Si L ≤ 0,5:
- La teinte est calculée selon le canal dominant:
- Si max = R:
H = (G - B) / (max - min) - Si max = V:
H = 2 + (B - R) / (max - min) - Si max = B:
H = 4 + (R - G) / (max - min)
Puis H est multiplié par 60 pour obtenir des degrés (modulo 360).
- Si max = R:
De TSL vers RVB: opération inverse, plus complexe car elle nécessite de distinguer les six secteurs du cercle chromatique. L’algorithme classique (utilisé dans la spécification CSS) est disponible dans de nombreuses librairies.
Ces calculs sont exécutés en temps réel dans le navigateur via JavaScript. Aucune donnée ne quitte l’appareil.
Limites du TSL et alternatives (LAB)
Bien que très utile, le TSL n’est pas perceptuellement uniforme. Deux couleurs ayant la même luminosité TSL (par exemple un jaune pur et un bleu pur à L = 50 %) n’ont pas la même clarté perçue par l’œil humain: le jaune semble beaucoup plus lumineux. Ce défaut vient du fait que le TSL est une simple transformation mathématique du RVB, non calibrée sur la vision humaine.
Pour des travaux exigeant une uniformité perceptuelle (cartographie, science des couleurs), on utilise des espaces comme CIELAB (LAB). Le LAB sépare la clarté (L*) des axes a* (vert‑rouge) et b* (bleu‑jaune) de manière à ce qu’une même différence numérique corresponde à une différence perçue équivalente. Notre outil fournit d’ailleurs la valeur LAB de la couleur saisie.
Gamut et dépassements
Le RVB (sRVB) ne peut représenter qu’un sous‑ensemble des couleurs visibles. Si vous entrez une valeur LAB ou CMJN qui se situe en dehors de ce gamut, l’outil ramène la couleur au point le plus proche dans le domaine affichable. Ce ré‑échantillonnage peut entraîner une légère dérive lors d’une conversion retour. En pratique, cela concerne surtout les couleurs très saturées impossibles à reproduire sur un écran standard.
FAQ
1. Puis‑je entrer les valeurs RVB avec des virgules ou des espaces?
Oui, les deux séparateurs sont acceptés. Exemples: 79, 70, 229 ou 79 70 229. Les espaces superflus sont ignorés.
2. Pourquoi le CMJN donné est‑il qualifié d’« estimation »?
Le CMJN est calculé à partir du RVB via des formules simplifiées, sans utiliser de profil ICC d’imprimante. Il donne un ordre de grandeur, mais ne doit pas être utilisé pour une impression professionnelle sans vérification matérielle.
3. Que se passe‑t‑il si je saisis une teinte hors de la plage 0–360?
L’outil affiche le message d’erreur dédié. La teinte doit être un nombre (avec ou sans °), la saturation et la luminosité des pourcentages (ex: 380°, 100%, 50% sera refusé car 380 > 360). Notez que la teinte est normalisée modulo 360 en interne.
4. Puis‑je utiliser ce convertisseur hors ligne?
Oui. Toutes les opérations sont exécutées dans le navigateur, sans appel réseau. La page peut être sauvegardée et ouverte localement.
5. Pourquoi le LAB et le CMJN sont‑ils inclus si le TSL suffit pour les palettes?
Ils offrent des points de vue complémentaires. Le LAB est indispensable pour les applications nécessitant une uniformité perceptuelle (data viz, colorimétrie). Le CMJN permet d’anticiper un rendu en quadrichromie, même approximativement.
6. Existe‑t‑il un risque d’arrondi lors des conversions?
Oui, inévitable. Les valeurs TSL sont arrondies à un chiffre après la virgule pour la teinte, et à l’unité pour les pourcentages. Le RVB étant en entiers, une conversion aller‑retour peut donner un résultat très proche mais pas rigoureusement identique (écart de 1 au maximum sur un canal).