Comprendre les formats de couleur : HEX, RGB, HSL et au-delà
Ce que fait ce convertisseur
Une même couleur peut s'écrire de bien des façons, et cet outil la traduit dans six d'entre elles en même temps. Saisissez une valeur en HEX, RGB ou HSL — ou choisissez-la avec le sélecteur visuel — et vous obtenez aussitôt son équivalent en HEX, RGB, HSL, HSV, CMYK et LAB. Les curseurs HSL permettent d'ajuster la teinte, la saturation et la luminosité pendant que tous les autres formats se mettent à jour en même temps.
Comme les six formats découlent de la même couleur et non d'un tableau figé, déplacer le sélecteur ou un curseur recalcule l'ensemble en temps réel : ce que vous copiez correspond toujours à l'échantillon exact affiché à l'écran.
Quand privilégier chaque format
Chaque tâche appelle une notation différente. HEX et RGB sont ceux que l'on colle dans le CSS et la plupart des outils de design ; HSL est plus commode lorsqu'on veut une version un peu plus sombre ou moins saturée d'une couleur ; CMYK intervient dès qu'une maquette part à l'impression ; et LAB est utile quand il faut des couleurs perçues à distances régulières par l'œil humain. Avoir les six sous les yeux, c'est prendre celui qu'attend la tâche du moment, sans chercher un second convertisseur. Ces valeurs restent rarement seules : une chaîne rgba() est exactement ce qu'attend le générateur d'ombres CSS pour une ombre douce, et un simple code HEX est ce que la balise theme-color du générateur de balises meta utilise pour colorer la barre d'adresse du navigateur.
Exemple : convertir #FF5733
Prenons l'orange #FF5733. En RGB c'est rgb(255, 87, 51) : rouge au maximum, un peu de vert et moins de bleu. En HSL cela donne environ hsl(11, 100%, 60%), une teinte proche du rouge sur la roue chromatique, pleinement saturée, à 60% de luminosité. Pour l'impression, elle correspond à peu près à cmyk(0%, 66%, 80%, 0%). Chaque notation désigne le même échantillon ; elle le décrit simplement avec d'autres chiffres, et le bouton de copie près de chaque valeur l'envoie directement dans votre code ou votre fichier de design.
Remarques sur les formats et cas particuliers
HEX et RGB portent la même information — #FF5733 et rgb(255, 87, 51) sont la même couleur sous une autre écriture — donc passer de l'un à l'autre ne perd rien. HSL et HSV, eux, réorganisent cette information autour de l'intuition humaine, ce qui les rend plus pratiques pour retoucher une couleur que pour la stocker. CMYK est un modèle d'impression dont la gamme est plus étroite que celle de votre écran : ses valeurs sont une approximation fidèle plutôt qu'une correspondance parfaite, tandis que LAB est indépendant du périphérique et perceptuellement uniforme. Les résultats en HEX, RGB et HSL se collent tels quels dans le CSS.