Convertisseur de couleurs

Ce convertisseur de couleurs transforme un code HEX en RGB et en HSL, et fonctionne dans tous les autres sens. Tapez #22c55e : les champs RGB affichent 34, 197, 94 et les champs HSL 142, 71, 45. Modifiez n'importe laquelle des trois notations, les deux autres suivent, et un aperçu montre la couleur obtenue. Le calcul s'exécute dans un module Rust compilé en WebAssembly, directement dans votre onglet.

Convertir un code HEX en RGB, étape par étape

1. Saisissez ou collez un code HEX à 6 chiffres dans le champ Hex. Le # initial est facultatif (22c55e et #22c55e fonctionnent), majuscules comprises.
2. Dès que les six chiffres sont présents, les champs R, G et B affichent les canaux rouge, vert et bleu (0 à 255), et les champs H, S et L la teinte (0 à 360), la saturation et la luminosité (0 à 100).
3. Pour la conversion inverse, tapez des valeurs dans les champs RGB : le code HEX et les valeurs HSL se recalculent à chaque frappe. Même principe depuis les champs HSL.
4. Copiez la valeur voulue depuis son champ. L'aperçu en haut reflète toujours la couleur courante.

HEX, RGB ou HSL : quelle notation pour quel usage ?

Les trois notations décrivent la même couleur sRGB. Elles diffèrent par ce qu'elles rendent facile.

Notation	Exemple	Usage typique
HEX	#22c55e	Passation design, variables CSS, charte graphique, valeurs copiées depuis Figma
RGB	34, 197, 94	Code qui attend des canaux numériques (canvas, traitement d'image, constructeurs de couleur Android ou iOS), écriture d'un rgba()
HSL	142, 71%, 45%	Déclinaisons claires et foncées : on garde teinte et saturation, on fait varier la luminosité

HSL est la notation la plus pratique pour construire une palette. L'état survol d'un bouton, un peu plus sombre, c'est la même teinte et la même saturation avec quelques points de luminosité en moins. En HEX, il faudrait deviner trois canaux à la fois. Ici, collez le HEX de la charte, ajustez L dans le champ HSL et relisez le nouveau HEX.

Précision et cas particuliers

• HSL arrondi à l'entier : teinte, saturation et luminosité sont affichées en nombres entiers. Un aller-retour par HSL peut donc décaler un canal d'une unité. Exemple : #22c55e donne 142, 71, 45, et ces valeurs HSL ressaisies donnent #21c45d. Quand la valeur exacte compte, gardez HEX ou RGB comme référence.
• HEX en minuscules : après une saisie RGB ou HSL, le champ HEX est écrit au format #rrggbb en minuscules.
• HEX à 6 chiffres uniquement : la notation courte #fff et le HEX à 8 chiffres avec canal alpha ne sont pas convertis. Pour la forme courte, doublez chaque chiffre (#fff devient #ffffff).
• Pas de canal alpha : l'outil travaille sur des couleurs opaques. La transparence s'ajoute ensuite dans votre CSS, en quatrième valeur d'un rgba() ou hsla().
• Valeurs hors plage : un canal RGB supérieur à 255 ou une valeur HSL hors limites est ramené dans la plage valide avant conversion. Un caractère HEX invalide affiche une erreur plutôt qu'une couleur fausse.
• Gris sans teinte : quand R, G et B sont égaux, la saturation vaut 0 et la teinte est indiquée à 0, car elle n'est pas définie pour une couleur neutre.

Cas d'usage concrets

• De la maquette au code : la charte fournit #0f172a, le code attend des triplets RGB. Un collage, trois nombres à copier.
• Tokens de thème : dérivez les variantes survol, actif et désactivé en modifiant la luminosité en HSL.
• Accessibilité : récupérez les canaux RGB exacts avant de calculer un rapport de contraste RGAA ou WCAG.
• Débogage CSS : les DevTools affichent rgb(9, 9, 11) et vous cherchez le HEX correspondant dans la feuille de style.

Et avec un logiciel ou en ligne de commande ?

Figma, Photoshop ou GIMP affichent HEX et RGB dans leur sélecteur de couleur, ce qui suffit quand le fichier est déjà ouvert. Dans les DevTools de Chrome, un Maj+clic sur la pastille de couleur fait défiler les formats. En terminal, printf "%d %d %d" 0x22 0xc5 0x5e convertit un HEX en RGB, mais le HSL demande un script. Cette page évite d'ouvrir une application ou de retenir une formule, avec les trois notations visibles en même temps.

Vos couleurs restent sur votre appareil

Une palette de marque non publiée ou les spécifications couleur d'un client sont confidentielles jusqu'au lancement. Les fonctions de conversion tournent en WebAssembly dans votre onglet : les valeurs saisies ne sont ni envoyées à un serveur, ni journalisées, ni stockées. Aucun traitement de données côté serveur, donc rien à déclarer au titre du RGPD. Une fois la page chargée, l'outil fonctionne même hors ligne, ce que vous pouvez vérifier dans l'onglet Réseau des outils de développement.

Questions fréquentes

Comment convertir un code HEX en RGB ?

Découpez les six chiffres en trois paires et lisez chacune en base 16 : 22 vaut 34, c5 vaut 197, 5e vaut 94. L'outil le fait pendant la saisie et donne aussi l'équivalent HSL.

Peut-on convertir du RGB en HEX ?

Oui. Saisissez des valeurs de 0 à 255 dans les champs R, G et B : le champ HEX affiche le code correspondant, en minuscules.

Pourquoi ma couleur change-t-elle légèrement après une saisie HSL ?

Les valeurs HSL sont arrondies à l'entier, donc la conversion HSL vers RGB peut différer d'une unité par canal de la couleur d'origine. Modifiez HEX ou RGB pour un résultat exact.

Les codes HEX à 3 ou 8 chiffres sont-ils acceptés ?

Non, seulement les codes à 6 chiffres. Développez #abc en #aabbcc, et retirez les deux derniers chiffres d'un code à 8 chiffres (ils portent l'alpha).

L'outil gère-t-il la transparence ?

Non, il convertit des couleurs opaques. Ajoutez l'alpha dans votre CSS, par exemple rgba(34, 197, 94, 0.5).

Quel espace colorimétrique est utilisé ?

L'espace sRGB standard du CSS. Le HSL affiché est la représentation teinte, saturation, luminosité de cette même couleur sRGB.

Mes couleurs sont-elles envoyées quelque part ?

Non. Tout est calculé localement en WebAssembly, aucune requête ne transporte les valeurs saisies.

Outils connexes : pour récupérer les couleurs dominantes d'une capture ou d'une photo, utilisez l'extracteur de palette de couleurs, puis convertissez chaque teinte ici. Le générateur de favicon produit les fichiers favicon et icônes d'application à partir d'une seule image, et le workflow local pour designers regroupe les autres outils utiles lors d'une passation.