Convertisseur de couleurs

Comment l'utiliser

Une couleur sur le web s'écrit généralement dans l'un des trois formats : HEX, RGB ou HSL. HEX compacte une couleur en une seule chaîne — un # suivi de six chiffres hexadécimaux, pris par paires pour le rouge, le vert et le bleu, chaque paire allant de 00 (aucun) à FF (complet). RGB épelle les trois mêmes canaux sous forme de nombres simples au lieu de paires hexadécimales, avec le rouge, le vert et le bleu chacun allant de 0 à 255. HSL prend une approche différente : au lieu d'intensités de canal, il décrit la teinte comme une position autour d'une roue de couleurs 360°, puis la saturation et la luminosité sous forme de pourcentages, ce qui correspond bien plus naturellement à la façon dont les gens pensent réellement à la couleur. Chaque format persiste parce qu'il convient mieux à un travail différent, non pas parce que l'un a remplacé les autres. HEX est compact et facile à coller dans CSS ou un outil de conception — six caractères capturent une couleur exacte sans ambiguïté. RGB correspond directement à la façon dont les écrans produisent réellement la couleur, en mélangeant la lumière rouge, verte et bleue au niveau des pixels, et il s'étend facilement à rgba() en ajoutant un quatrième canal alpha pour la transparence. HSL est celui que les humains utilisent lorsqu'ils ajustent une couleur plutôt que de la spécifier à partir de zéro : augmenter ou diminuer la luminosité donne une teinte plus claire ou plus foncée prévisible, et faire glisser la teinte se déplace en douceur autour de la roue de couleurs pour construire une palette assortie. Un exemple concret rend la relation claire. Prenez un bleu moyen : en tant que HEX, c'est #3B82F6. Divisé en paires, 3B, 82 et F6 se convertissent de l'hexadécimal au décimal en 59, 130 et 246 — exactement la même couleur écrite en rgb(59, 130, 246). Convertissez ces mêmes valeurs rouge, vert et bleu en teinte, saturation et luminosité et vous obtenez hsl(217°, 91%, 60%) : une teinte de 217° se situe dans le segment bleu de la roue de couleurs, 91% de saturation signifie que c'est un bleu vif et saturé, et 60% de luminosité la place à peu près au milieu de la plage de luminosité du noir au blanc. Les trois chaînes décrivent la couleur de pixel identique. Pour utiliser le convertisseur, tapez une couleur dans l'entrée dans l'un des trois formats — un code HEX, une valeur rgb() ou une valeur hsl() — ou cliquez sur le sélecteur de couleur et choisissez visuellement. Dès qu'une couleur valide est reconnue, les deux autres formats se mettent à jour instantanément à côté d'une nuance d'aperçu en direct, vous pouvez donc confirmer que le résultat correspond à ce que vous attendez avant de le copier. Cliquez sur l'icône de copie à côté de n'importe quelle valeur pour la saisir dans ce format exact afin de la coller dans CSS, un outil de conception ou du code. La conversion entre les formats se produit constamment dans le travail réel : faire correspondre la couleur exacte d'une marque lorsqu'un client vous remet un code HEX mais que votre outil de conception veut des curseurs HSL, construire un thème CSS où vous avez besoin de valeurs RGB cohérentes pour les superpositions rgba(), ajuster la luminosité d'une couleur de base de quelques pour cent pour créer un état de survol convaincant, et vérifier que les couleurs du texte et de l'arrière-plan ont suffisamment de contraste pour l'accessibilité en comparant leurs valeurs de luminosité.

Questions fréquemment posées

Qu'est-ce qu'un code de couleur HEX ?

Un code de couleur HEX est un symbole # suivi de six chiffres hexadécimaux, comme #3B82F6. Les six chiffres forment trois paires, chaque paire définissant l'intensité du rouge, du vert et du bleu sur une échelle de 00 (aucun) à FF (complet, 255 en décimal). Parce qu'il est compact et sans ambiguïté, HEX est le moyen le plus courant de spécifier des couleurs exactes en CSS et dans les outils de conception.

Quelle est la différence entre RGB et HSL ?

RGB décrit une couleur comme trois intensités de canal — rouge, vert et bleu, chacun de 0 à 255 — correspondant à la façon dont les écrans mélangent la lumière pour produire la couleur. HSL décrit la même couleur comme teinte (sa position sur une roue de couleurs 360°), saturation (à quel point elle est vive ou estompée) et luminosité (à quel point elle se rapproche du noir ou du blanc). RGB est précis pour les écrans ; HSL est plus facile à ajuster intuitivement pour les humains.

Comment convertir HEX en RGB ?

Divisez les six chiffres HEX en trois paires — la première pour le rouge, la deuxième pour le vert, la troisième pour le bleu — et convertissez chaque paire de l'hexadécimal en décimal pour obtenir un nombre de 0 à 255. Par exemple, #3B82F6 se divise en 3B, 82 et F6, qui se convertissent en 59, 130 et 246, donnant rgb(59, 130, 246). Ce convertisseur fait le calcul instantanément au fur et à mesure de votre saisie.

Que fait le canal alpha ?

Le canal alpha contrôle la transparence, ajouté comme une quatrième valeur à côté du rouge, du vert et du bleu dans rgba() ou hsla(), allant de 0 (complètement transparent) à 1 (complètement opaque). Il permet à une couleur de se mélanger avec tout ce qui se trouve derrière — utile pour les superpositions, les bordures subtiles ou l'atténuation d'un élément sans changer sa couleur sous-jacente. HEX le supporte aussi, comme une quatrième ou huitième paire de chiffres optionnelle.