Convertisseur RGB en HSL

La page de conversion RVB vers TSL: ce qu’elle fait et pourquoi elle existe

La page de conversion RVB vers TSL vous permet de saisir une couleur dans le modèle RVB (rouge, vert, bleu) — trois nombres entiers entre 0 et 255 qui indiquent comment un écran mélange ces lumières — et d’obtenir instantanément son équivalent dans le modèle TSL (teinte en degrés, saturation et luminosité en pourcentages). L’outil affiche aussi la couleur dans d’autres formats courants: HEX (hexadécimal), HSV, CMJN (cyan, magenta, jaune, noir) et LAB. Vous pouvez ainsi copier la valeur qui correspond à votre projet, que vous travailliez dans un éditeur graphique, une feuille de style CSS ou un logiciel d’illustration.

Toutes les conversions se font entièrement dans votre navigateur. Aucune donnée n’est téléversée vers un serveur. Vous pouvez donc entrer les couleurs de votre maquette en toute confidentialité, même sans connexion internet.

Ce qui rend cette page différente

Ce n’est pas un simple calculateur de plus entre formats de couleur. La particularité de cette page est de relier deux modèles fondamentalement différents. Le RVB est le langage natif des écrans: il décrit l’intensité de trois projecteurs lumineux. Le TSL, lui, est construit pour la perception humaine. Contrairement au RVB, où modifier une seule composante (par exemple augmenter le rouge) change souvent la teinte perçue de la couleur, le modèle TSL vous permet d’ajuster la luminosité de façon indépendante tout en conservant la teinte constante. Cette propriété en fait l’outil privilégié pour générer des palettes de couleurs, des thèmes et des variations de contraste accessibles.

Concrètement, si vous voulez créer une version plus pâle d’un violet vif, vous n’avez qu’à réduire la saturation ou augmenter la luminosité dans TSL. En RVB, vous seriez obligé de tâtonner entre les trois canaux, sans garantie de préserver la teinte d’origine. Cette différence explique pourquoi les designers d’interfaces et les développeurs front‑end préfèrent souvent le TSL pour travailler les jeux de couleurs.

Comment utiliser l’outil: entrées, sorties et règles de base

Entrées

• RVB: trois nombres entiers entre 0 et 255, séparés par des virgules ou des espaces. Exemple: 79, 70, 229.
• TSL: teinte entre 0 et 360, saturation et luminosité exprimées en pourcentages. Exemple: 243, 75%, 59%.
• Les autres champs (HEX, HSV, CMJN, LAB) acceptent aussi la saisie directe; la conversion inverse s’effectue immédiatement.

Sorties

Lorsque vous entrez une valeur valide dans n’importe quel champ, tous les autres champs sont mis à jour en temps réel. Les sorties sont:

Règles et messages d’erreur

• Si vous saisissez une valeur RVB invalide (par exemple des nombres hors plage ou un format incorrect), l’outil affiche:
  « Veuillez entrer le RVB sous forme de trois nombres entre 0 et 255, comme 79, 70, 229. »

• Si vous saisissez une valeur TSL invalide, le message est:
  « Veuillez entrer le TSL sous forme d’une teinte entre 0 et 360 et de deux pourcentages, comme 243, 75%, 59%. »

• Cas des conversions LAB et CMJN: ces espaces colorimétriques peuvent décrire des couleurs qui ne sont pas reproductibles sur un écran RVB standard (elles sont dites « hors gamme »). L’outil ajuste alors automatiquement la couleur à la plus proche couleur affichable. Si vous reconvertissez cette couleur ajustée vers le format original, une légère différence peut apparaître. C’est un comportement normal, inhérent aux limites du modèle sRGB.

• CMJN: l’affichage en CMJN fourni par l’outil est une estimation à l’écran. Il ne doit pas être utilisé directement pour une impression professionnelle sans vérification préalable sur une charte colorimétrique certifiée.

Comprendre les modèles de couleur: RVB, TSL et les autres

Le RVB: la lumière additive

Le RVB est le modèle de base de tous les écrans. Trois faisceaux lumineux (rouge, vert, bleu) s’additionnent pour produire la couleur finale. En mélangeant les trois à pleine intensité (255, 255, 255), on obtient du blanc. En les éteignant tous (0, 0, 0), on obtient du noir. Les valeurs intermédiaires couvrent le spectre dans l’espace sRGB, l’espace de travail standard pour le Web et la plupart des applications bureautiques.

La conversion mathématique du RVB vers le TSL normalise d’abord les valeurs sur une échelle de 0 à 1 (en divisant chaque canal par 255). Ensuite, on calcule le maximum (M) et le minimum (m) des trois canaux. La luminosité (L) est la moyenne de M et m: L = (M + m) / 2. La saturation (S) dépend de L: si M = m (couleur grise), S = 0. Sinon, S = (M – m) / (1 – |2L – 1|). Enfin, la teinte (H) est déterminée par le canal dominant:

• Si M = rouge, H = 60 × ((vert – bleu) / (M – m) mod 6)
• Si M = vert, H = 60 × ((bleu – rouge) / (M – m) + 2)
• Si M = bleu, H = 60 × ((rouge – vert) / (M – m) + 4)

Le résultat est ramené dans l’intervalle 0–360°. Par exemple, pour (79, 70, 229):

• M = 229 (bleu), m = 70 (vert), M – m = 159
• H = 60 × ((79 – 70) / 159 + 4) = 60 × (0,0566 + 4) = 60 × 4,0566 = 243,4° → arrondi à 243°
• L = (229/255 + 70/255) / 2 = (0,898 + 0,2745) / 2 = 0,586 → 59%
• S = (0,898 – 0,2745) / (1 – |2×0,586 – 1|) = 0,6235 / (1 – 0,172) = 0,6235 / 0,828 = 0,753 → 75%

Le TSL: construire pour l’œil humain

Le modèle TSL est une déformation cylindrique du RVB. La teinte (H) est un angle sur un cercle chromatique: 0° pour le rouge, 120° pour le vert, 240° pour le bleu, et on revient à 360° = 0°. La saturation (S) représente la pureté de la couleur: 0 % donne un gris neutre, 100 % donne la couleur la plus vive possible à cette luminosité. La luminosité (L) indique le niveau de clarté perçu, de 0 % (noir) à 100 % (blanc).

Contrairement à une idée reçue, TSL n’est pas perceptuellement uniforme: deux couleurs ayant la même luminosité calculée peuvent sembler différentes à l’œil (par exemple, un jaune pur paraît plus clair qu’un bleu pur de même L). C’est pourquoi les modèles plus récents comme LAB ou OKLAB sont préférés pour les analyses de contraste précis. Cela dit, pour la majorité des travaux de design et de développement Web, TSL reste très pratique.

Les autres formats affichés

• HEX: notation hexadécimale sur six chiffres (par exemple #4F46E5). C’est la forme la plus courante en CSS.
• HSV (hue, saturation, value): proche du TSL, mais la valeur (V) correspond au maximum des canaux RVB plutôt qu’à une moyenne. Utile pour les logiciels de retouche d’image.
• CMJN: utilisé en imprimerie. La conversion depuis le RVB est une approximation car les espaces colorimétriques ne coïncident pas parfaitement.
• LAB: espace indépendant du périphérique, conçu pour correspondre à la vision humaine. L’outil utilise une variante D50 standard.

Pour qui cet outil est-il conçu?

• Designers d’interfaces et UI/UX: pour créer des palettes accessibles où la luminosité doit être ajustée indépendamment de la teinte (par exemple, pour respecter les ratios de contraste WCAG).
• Développeurs front‑end: pour traduire les valeurs RVB venues d’un logiciel de maquette (Figma, Sketch) en fonctions CSS hsl() et hsla(), qui permettent des animations et des manipulations dynamiques plus simples.
• Créateurs de thèmes: pour générer des variantes claires et foncées d’une couleur de marque tout en conservant la teinte d’origine.
• Concepteurs de visualisations de données: le canal luminosité du TSL est intuitif pour construire des échelles séquentielles (du clair au foncé) afin de représenter des valeurs quantitatives sans distorsion perceptuelle trop forte (bien que pour un travail très précis, LAB reste recommandé).
• Enseignants et étudiants en infographie: pour comprendre visuellement les relations entre les modèles colorimétriques.

Cas limites, erreurs fréquentes et précautions

Erreurs de saisie

Le séparateur doit être une virgule ou un espace. Les points‑virgules, les lettres ou les nombres décimaux (sauf en CMJN/LAB) provoquent le message d’erreur. Entrez par exemple 45, 200, 10 ou 45 200 10, mais pas 45;200;10 ni 45.5, 200, 10.

Valeurs hors gamme

En LAB ou CMJN, vous pouvez entrer des coordonnées qui n’existent pas dans l’espace sRGB. Par exemple, un LAB (L=50, a=100, b=0) est plus saturé en magenta que ce qu’un écran standard peut afficher. L’outil ramène alors la couleur à la frontière du gamut. C’est un ajustement raisonnable, mais sachez qu’en reconvertissant cette valeur vers le LAB original, vous obtiendrez un résultat légèrement différent. Pour des travaux de calibration professionnelle, utilisez un logiciel dédié avec un profil ICC adapté à votre périphérique.

TSL et perception humaine

Rappel: le TSL n’est pas un espace perceptuellement uniforme. Si vous devez évaluer des différences de couleur subjectives (par exemple pour du design inclusif), préférez des outils utilisant CIELAB ou CIEDE2000. L’outil ici vous donne une première approximation fiable, mais ne remplace pas un algorithme de différence colorimétrique.

Questions fréquentes (FAQ)

Puis‑je entrer des valeurs RVB avec des décimales comme 128,5?

Non. Le RVB attend des entiers entre 0 et 255. Les valeurs décimales sont rejetées par le message d’erreur. Si vous avez besoin d’une interpolation, convertissez d’abord au format TSL, qui accepte des pourcentages à une décimale.

La page fonctionne‑t‑elle sans connexion Internet?

Oui. Toutes les conversions sont exécutées localement dans votre navigateur avec du code JavaScript. Aucune donnée n’est envoyée à un serveur. Vous pouvez même enregistrer la page pour une utilisation hors ligne.

Pourquoi le CMJN affiché est‑il une estimation?

Le CMJN dépend du profil d’imprimante, du papier et des encres. L’outil effectue une conversion générique du sRGB vers l’espace CMJN standard (SWOP ou ISO Coated). Pour une impression réelle, faites toujours valider vos couleurs par un laboratoire professionnel.

Quelle est la différence entre TSL et HSV?

Le TSL (HSL en anglais) utilise la luminosité comme moyenne du max et min des canaux. Le HSV (également appelé TSV) utilise la valeur = max des canaux. En pratique, le HSV est souvent utilisé pour les sélecteurs de couleur dans les logiciels (Photoshop, GIMP), tandis que le TSL est plus naturel pour le CSS car on peut y raisonner en « plus clair » ou « plus foncé ».

Puis‑je entrer une couleur HEX sans le signe #?

Oui, l’outil accepte les six caractères hexadécimaux avec ou sans le #. Par exemple, 4F46E5 ou #4F46E5 tous deux fonctionnent. Il accepte aussi la forme abrégée à trois chiffres (par exemple F0A pour #FF00AA) et la forme avec transparence sur huit chiffres (#4F46E5FF), mais la transparence n’est pas conservée dans les autres champs.

Que faire si la couleur LAB que je saisis ne correspond à rien?

L’outil l’ajuste automatiquement à la couleur sRGB la plus proche. Si vous avez besoin de connaître la couleur théorique exacte (même si elle n’est pas affichable), utilisez un logiciel de conversion colorimétrique avec gestion des profils ICC. Pour la grande majorité des usages (écrans, Web), l’ajustement est parfaitement acceptable.