Le Convertisseur de couleur traduit une même couleur entre les trois formats utilisés sur le web —HEX, RVB et TSL— à la fois. Vous écrivez la couleur dans l'un d'eux (ou la choisissez avec le sélecteur) et obtenez instantanément ses équivalences exactes, avec un aperçu et un bouton pour copier chaque valeur. Tout se passe dans votre navigateur : rien n'est envoyé à un serveur.

1. Écrivez une couleur dans le champ « Couleur » au format #rrggbb, rgb(r,g,b) ou hsl(h,s%,l%).
2. Ou cliquez sur le carré de couleur à gauche pour la choisir visuellement avec le sélecteur de votre système.
3. Le résultat apparaît seulement après une brève pause : l'aperçu et les trois valeurs équivalentes.
4. Cliquez sur l'icône copier à côté de n'importe quelle valeur pour l'envoyer dans le presse-papiers.
5. Si le format n'est pas reconnu, le champ est marqué en rouge avec une indication des formats valides.

HEX (hexadécimal) est le format standard du CSS et du design web. Il commence par # et comporte trois paires de chiffres hexadécimaux (0-9, a-f) pour rouge, vert et bleu, chaque paire allant de 00 à ff (0 à 255 en décimal). Exemple : #1a2b3c. Accepte aussi la forme courte à 3 chiffres #abc, qui se développe en dupliquant chacun (#abc équivaut à #aabbcc). Le # est facultatif à la saisie.

RVB décrit la couleur par ses trois composantes de lumière : Rouge, Vert et Bleu, chacune de 0 à 255. Il s'écrit rgb(r,g,b). Exemple : rgb(26, 43, 60). C'est le modèle additif des écrans : rgb(0,0,0) est noir et rgb(255,255,255) est blanc.

TSL (HSL) décrit la couleur de façon plus intuitive pour l'œil : Teinte (Hue, 0-360° sur la roue chromatique : 0 rouge, 120 vert, 240 bleu), Saturation (0-100 %, du gris à la couleur pure) et Luminosité (Lightness, 0-100 %, du noir au blanc). Il s'écrit hsl(h,s%,l%). Exemple : hsl(210, 40%, 17%). Idéal pour éclaircir, assombrir ou désaturer une couleur sans changer sa teinte. Le symbole % est facultatif à la saisie.

À gauche du champ se trouve un sélecteur de couleur natif de votre système : cliquez dessus pour choisir une couleur avec la roue ou la palette de votre navigateur, et le champ se remplit tout seul au format HEX. Le cadre d'aperçu au-dessus des résultats affiche la couleur finale telle quelle, pour vérifier d'un coup d'œil que c'est celle que vous cherchez.

Cliquez sur l'icône de copie à côté de chaque valeur pour l'envoyer dans le presse-papiers.

Dans la barre d'outils, vous avez Réinitialiser (vide le champ), Exporter (télécharge un .json avec la couleur et ses équivalences) et Importer (récupère une couleur enregistrée). De plus, la dernière couleur saisie est mémorisée automatiquement et réapparaît la prochaine fois que vous ouvrirez l'outil.