palette Convertisseur de couleur star

Comment ça fonctionne

Ces trois notations décrivent exactement la même couleur — elles ne font qu'encoder différemment les niveaux de lumière rouge, verte et bleue qu'un écran mélange pour la produire. RVB stocke chaque canal comme un nombre décimal de 0 à 255. HEX n'est que du RVB écrit en base 16 : chaque canal devient une paire hexadécimale à deux chiffres, donc rgb(255, 128, 0) devient #ff8000 (ff = 255, 80 = 128, 00 = 0). Aucune information de couleur n'est gagnée ou perdue dans cette traduction — c'est de la pure notation.

HSL est différent : il redérive la couleur selon trois axes perceptuels — teinte, saturation et luminosité — calculés mathématiquement à partir des canaux RVB. La teinte (0–360°) est l'angle sur une roue chromatique, calculé à partir du canal le plus grand et de l'écart entre les canaux : pour #ff8000, le rouge est maximal (255) et le bleu minimal (0), et la formule 60 × ((vert − bleu) / (max − min)) donne 60 × (128/255) ≈ 30°, ce qui la place dans la bande orange. La luminosité est la moyenne du canal le plus haut et du plus bas — ici (255 + 0) / 2 ≈ 50 %. La saturation mesure à quel point la couleur s'éloigne du gris à cette luminosité — 100 % ici, puisqu'un canal est à pleine intensité et un autre à zéro. Ensemble, cela se lit hsl(30, 100%, 50%) — le même orange que #ff8000, décrit différemment.

C'est exactement pour cela que les designers préfèrent HSL à RVB : pour rendre une couleur 20 % plus sombre tout en conservant sa teinte, HSL n'a besoin que d'abaisser la valeur de luminosité — RVB exigerait de recalculer les trois canaux proportionnellement. Choisissez une couleur avec le sélecteur ou saisissez n'importe quel code HEX, et cet outil convertit instantanément vers les deux notations.

Ce que vous devez savoir

Le HEX court à 3 chiffres (#f80) et les formes à 4/8 chiffres avec un canal alpha (#ff8000cc, rgba(255,128,0,0.8)) sont des variantes courantes ; cet outil fonctionne avec le HEX opaque standard à 6 chiffres et ses équivalents RVB/HSL. Les noms de couleur comme orange correspondent à des valeurs HEX fixes définies dans la spécification CSS, mais toutes les couleurs nommées n'ont pas un code HEX mémorable, ce qui est une autre raison pour laquelle les développeurs convertissent dans un sens puis dans l'autre. Deux couleurs identiques sur un écran peuvent s'afficher légèrement différemment sur un autre, car les écrans grand public varient en gamme de couleurs et en calibration — les valeurs HEX/RVB/HSL sont des nombres exacts, mais la lumière qu'elles produisent n'est pas garantie identique d'un écran à l'autre. Lors du choix des couleurs de texte et de fond, souvenez-vous que la valeur de luminosité de HSL n'équivaut pas au contraste perceptuel — un jaune saturé et un bleu saturé peuvent partager la même valeur L tout en paraissant très différents sur fond blanc ; les vérifications d'accessibilité doivent donc utiliser un véritable calcul de ratio de contraste, pas seulement le chiffre L.

CSS accepte aussi le RVB en pourcentage, comme rgb(100%, 50%, 0%), en tant qu'équivalent exact de rgb(255, 128, 0) — utile lorsqu'on travaille avec des outils de design qui expriment la couleur en pourcentages plutôt qu'en entiers 0–255. Les fonctions de couleur CSS plus récentes comme oklch() et lab() vont un cran plus loin que HSL : elles sont conçues pour être perceptuellement uniformes, c'est-à-dire que des pas numériques égaux en luminosité paraissent également différents à l'œil humain quelle que soit la teinte, ce que HSL ne garantit pas totalement. Pour le travail web et interface au quotidien, HEX, RVB et HSL restent néanmoins les trois formats que vous rencontrerez dans presque tous les codes, guides de style et outils de design.