Convertisseur de couleurs (HEX, RVB, TSL)
Données
| Format de saisie | HEX |
|---|---|
| Couleur HEX | #3B82F6 |
| Rouge | 59 |
| Vert | 130 |
| Bleu | 246 |
| Teinte | 217 |
| Saturation | 91 |
| Luminosité | 60 |
Convertisseur de couleurs (HEX, RVB, TSL)
Convertissez une couleur entre les formats HEX, RVB et TSL. Saisissez une valeur dans l'un des trois formats pour obtenir les codes équivalents dans les deux autres, prêts à coller dans une feuille de style.
Données
Couleur saisie
Résultats
Saisissez une valeur pour afficher les résultats.
Valeurs converties
Conversion de couleurs (HEX, RVB, TSL)
Un convertisseur de couleurs traduit une couleur entre les trois notations les plus utilisées sur le web : HEX, RVB et TSL. Chacune décrit la même couleur différemment, et les développeurs front-end, les designers et toute personne qui modifie une feuille de style passent régulièrement d'un format à l'autre — en collant un code HEX provenant d'un outil de conception dans une fonction RVB, ou en ajustant une couleur en TSL parce que ce modèle est plus intuitif pour les modifications.
Trois manières de décrire une couleur
Le modèle RVB (rouge, vert, bleu) définit une couleur par la quantité de lumière rouge, verte et bleue qu'elle mélange, chaque composante étant un entier de 0 à 255. Le format HEX représente ces mêmes trois composantes en base 16 : deux chiffres hexadécimaux par composante, regroupés en un code à six caractères tel que #3B82F6. Les deux formats stockant exactement huit bits par composante, la conversion entre HEX et RVB est exacte — aucune information n'est perdue ni gagnée.
Le modèle TSL (teinte, saturation, luminosité) adopte une approche différente. Au lieu de mélanger des couleurs primaires, il décrit une couleur par sa teinte (un angle de 0 à 360 degrés sur le cercle chromatique), sa saturation (de 0 à 100 %, du gris au plus vif) et sa luminosité (de 0 à 100 %, du noir à travers la teinte pure jusqu'au blanc). Le modèle TSL correspond davantage à la façon dont on décrit intuitivement une couleur — « un bleu légèrement plus clair et moins intense » — ce qui le rend pratique pour les ajustements.
Déroulement de la conversion
Décomposer un code HEX en valeurs RVB relève de l'arithmétique sur les chiffres : chaque paire de chiffres hexadécimaux se lit comme un nombre de 00 à FF, soit 0 à 255. La conversion de RVB vers TSL commence par ramener les composantes à l'intervalle unitaire, puis calcule la luminosité à partir du point médian entre la composante la plus grande et la plus petite, la saturation à partir de leur écart, et la teinte à partir de la composante dominante.
Exemple de calcul
Prenons #3B82F6. Les trois paires sont 3B, 82 et F6 — soit 59, 130 et 246 — ce qui donne rgb(59, 130, 246). En ramenant chaque composante à l'intervalle unitaire, on obtient environ 0,231, 0,510 et 0,965. La composante dominante est le bleu et la plus petite est le rouge, donc
avec une teinte d'environ 217 degrés, ce qui donne hsl(217, 91 %, 60 %).
RVB stockant 256 niveaux discrets tandis que TSL arrondit aux degrés et pourcentages entiers, un aller-retour peut décaler une valeur d'un pas — imperceptible à l'œil, mais à garder à l'esprit lors de la comparaison de codes. Pour explorer l'arithmétique en base 16 derrière les codes HEX, voir le Convertisseur de base numérique.
Questions fréquentes (FAQ)
Comment un code HEX correspond-il aux valeurs RVB ?
Un code hexadécimal à six chiffres est composé de trois paires de chiffres hex, une paire par composante : rouge, puis vert, puis bleu. Chaque paire représente un nombre de 00 à FF, soit 0 à 255 en décimal. Par exemple, #3B82F6 se décompose en 3B, 82 et F6 — soit 59, 130 et 246 — ce qui donne rgb(59, 130, 246). La conversion est exacte dans les deux sens, car chaque composante stocke les mêmes huit bits.
Que signifient les valeurs TSL ?
Le modèle TSL décrit une couleur par sa teinte, sa saturation et sa luminosité, plutôt que par le mélange de couleurs primaires. La teinte est un angle de 0 à 360 degrés sur le cercle chromatique (0 est le rouge, 120 le vert, 240 le bleu). La saturation va de 0 %, un gris neutre, à 100 %, la version la plus vive de la teinte. La luminosité va de 0 % (noir) à 50 % (teinte pure) puis à 100 % (blanc).
Le modèle TSL facilite souvent les ajustements intuitifs — éclaircir une couleur ou la désaturer — sans manipuler directement les valeurs de composantes.
Les codes HEX à trois chiffres sont-ils pris en charge ?
Oui. Un code à trois chiffres est une notation abrégée dans laquelle chaque chiffre est doublé pour former la valeur à six chiffres : #ABC correspond à #AABBCC. Cette abréviation ne permet d'atteindre que les 4 096 couleurs dont les composantes sont des chiffres répétés ; le convertisseur affiche donc toujours le code complet à six chiffres.
Pourquoi les valeurs changent-elles légèrement lors des conversions aller-retour ?
RVB stocke 256 niveaux discrets par composante, tandis que TSL utilise des degrés entiers et des pourcentages entiers. Convertir de RVB vers TSL puis revenir à RVB peut aboutir sur un niveau adjacent, car chaque format arrondit à sa propre grille. La différence est d'un pas au maximum et imperceptible à l'œil, mais elle explique pourquoi un aller-retour peut renvoyer une valeur décalée d'une unité.