Trois descriptions sRGB
Une couleur HEX sur six chiffres range les canaux rouge, vert et bleu par paires hexadécimales. RGB écrit ces mêmes canaux avec des nombres décimaux de 0 à 255 dans les outils présentés. HSL réexprime la couleur sRGB en teinte, saturation et luminosité. Cette forme aide à raisonner sur une famille de couleurs, mais sa luminosité est un paramètre du modèle et non une mesure directe de la clarté perçue. HEX et RGB sont deux notations de canaux; HSL suppose un calcul. Les trois peuvent définir une couleur affichée équivalente si la conversion est cohérente. MultiVerto traite ici des couleurs opaques aux formats montrés, pas toutes les syntaxes CSS.
Un bleu modéré, étape par étape
Prenez #336699. Les paires 33, 66 et 99 en hexadécimal correspondent aux valeurs décimales 51, 102 et 153. Le convertisseur HEX vers RGB affiche donc rgb(51, 102, 153). Convertis en HSL, ces canaux donnent hsl(210, 50%, 40%) dans la sortie arrondie. Une teinte de 210 degrés se situe dans la famille des bleus; saturation et luminosité décrivent les coordonnées de cette couleur. Saisissez #336699 ci-dessous, puis collez le résultat dans l'outil RGB vers HSL lié. Parcourez ensuite le trajet inverse avec HSL vers RGB et RGB vers HEX. Cet exemple simple revient aux six chiffres du départ.
- HEX #336699 → canaux 33 66 99
- RGB rgb(51, 102, 153)
- HSL hsl(210, 50%, 40%)
Aller-retour et précision
Les paires HEX indiquent exactement des canaux entiers. Une représentation HSL d'autres canaux RGB peut demander davantage de décimales que n'en montre un affichage court. MultiVerto arrondit HSL à deux décimales et le convertisseur inverse arrondit les canaux RGB à l'entier. Le retour demeure souvent visuellement proche, mais un canal peut changer d'une unité. Gardez la valeur HEX ou RGB originale lorsqu'un jeton de design doit rester exact. Une notation HEX à trois chiffres répète chaque caractère: #369 devient #336699, et non trois nombres décimaux. Ces outils de démonstration ne gèrent pas non plus la transparence alpha; une couleur translucide demande un autre traitement.
Convertir ne teste pas l'accessibilité
Une même couleur paraît différente selon le fond ou l'écran. La luminosité HSL ne dit pas si un texte blanc ou noir respecte une exigence de contraste. Le contraste dépend de deux couleurs et d'une formule d'accessibilité, non du pourcentage HSL d'une seule couleur. Pour un texte, testez le véritable couple premier plan et arrière-plan selon le critère WCAG pertinent. Vérifiez aussi les états de survol, de focus et d'indisponibilité, où d'autres couleurs peuvent apparaître. Les convertisseurs aident à transporter une notation entre CSS, jetons de design et API; ils ne choisissent pas automatiquement une palette accessible. Une sortie isolée ne démontre pas la lisibilité.
Méthode pour les jetons de design
Choisissez une valeur canonique telle que #336699 et notez ses usages. Convertissez-la en RGB si une interface demande les canaux, ou en HSL pour modifier consciemment teinte et saturation. Après une retouche HSL, reconvertissez la nouvelle valeur en RGB ou HEX et enregistrez un nouveau jeton plutôt que de remplacer discrètement l'ancien. Comparez des échantillons rendus dans la vraie page, puis mesurez le contraste avec les couleurs voisines. Excluez alpha et gamuts étendus de cette simple comparaison à trois canaux, sauf prise en charge explicite du destinataire. Une source claire et des variantes testées simplifient la maintenance.