Le Convertisseur de couleur traduit une couleur entre les formats du web —HEX, RGB, HSL et les modernes OKLCH et OKLab— à la fois. Il accepte la couleur telle que tu la copies : avec des virgules ou des espaces, avec transparence, avec un nom (tomato) ou comme DevTools te la donne. Il donne aussi une échelle de teintes de la même couleur. Tout se passe dans ton navigateur.

1. Saisis ou colle une couleur : #1a2b3c, #1a2b3c80, rgb(26 43 60 / 50%), hsl(210deg 40% 17%), oklch(62.8% 0.258 29.2) ou un nom CSS.
2. Ou choisis-la avec le sélecteur de couleur à gauche.
3. L'aperçu et la couleur dans les cinq formats apparaissent ; l'icône copier place chacun dans le presse-papiers.
4. En dessous, l'échelle de teintes : clique sur une teinte pour en faire la couleur actuelle.

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.

OKLCH décrit la couleur avec L (luminosité, 0–100 %), C (chroma, la quantité de couleur) et H (teinte, 0–360°), comme HSL, mais avec une différence qui compte : son L est la clarté perçue par l'œil. En HSL, hsl(60 100% 50%) (jaune) et hsl(240 100% 50%) (bleu) ont le même L et le jaune paraît bien plus clair ; en OKLCH, même L = même clarté perçue. C'est pourquoi il sert à créer des palettes et des échelles cohérentes. Presque tous les navigateurs le comprennent déjà (oklch() en CSS). Certaines couleurs OKLCH ne rentrent pas dans le sRGB (le gamut d'un écran normal) : tu es prévenu et la plus proche est affichée.

Onze teintes de la même couleur, du très clair au très foncé, réparties par luminosité OKLCH et avec la même teinte. Si à une luminosité donnée la couleur ne rentre pas dans le sRGB, sa chroma est juste assez réduite plutôt que de couper les canaux (ce qui changerait la teinte). Celle marquée est la plus proche de ta couleur. Elles servent pour les fonds, les bordures et les états d'une même couleur de marque.

À 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.

Chaque valeur —HEX, RGB et HSL— a une icône de copie à sa droite. En cliquant dessus, la valeur complète déjà formatée (p. ex. rgb(26, 43, 60)) part dans le presse-papiers et l'icône affiche un ✓ un instant en confirmation.

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.