Convertissez n'importe quelle couleur entre les formats HEX, RGB et HSL en une seule saisie. Entrez un code hexadécimal, une valeur rgb() ou une valeur hsl() et voyez les trois représentations ainsi qu'un aperçu de la couleur. Parfait pour les designers et les développeurs qui doivent passer d'un format de couleur à l'autre rapidement et sans erreur.
Saisissez vos valeurs pour voir le résultat.
#ff5733 → rgb(255, 87, 51) / hsl(12, 100%, 60%)
Un rouge-orange chaud converti du hex vers RGB et HSL.
rgb(0, 128, 255) → #0080ff / hsl(210, 100%, 50%)
Un bleu vif converti du RGB vers hex et HSL.
hsl(120, 100, 50) → #00ff00 / rgb(0, 255, 0)
Le vert pur exprimé dans les trois formats.
Les développeurs web, les designers et les artistes numériques ont fréquemment besoin de passer d'un format de couleur à l'autre. Le CSS prend en charge nativement le HEX, le RGB et le HSL, et différents outils et systèmes de design utilisent différents formats par défaut. Une couleur sélectionnée dans un outil de design peut vous donner une valeur HEX, mais votre bibliothèque CSS-in-JS peut attendre du RGB.
Ce convertisseur élimine les calculs manuels et vous permet de voir tous les formats en même temps.
Le format le plus compact. Un code hexadécimal à six chiffres comme #ff5733 encode les canaux rouge, vert et bleu sous forme de deux chiffres hexadécimaux chacun. La plage pour chaque canal va de 00 à FF (0 à 255 en décimal). Le HEX est le format par défaut dans la plupart des sélecteurs de couleurs et des outils de design.
Un modèle de couleur additif où chaque canal va de 0 à 255. Le RGB est intuitif pour penser aux couleurs d'écran car les écrans émettent littéralement de la lumière rouge, verte et bleue. Le format rgb(255, 87, 51) signifie maximum de rouge, un vert modéré et peu de bleu.
Une représentation plus conviviale pour les humains. La teinte est la position sur le cercle chromatique (0° = rouge, 120° = vert, 240° = bleu). La saturation contrôle l'intensité (0% = niveaux de gris, 100% = couleur pleine). La luminosité contrôle la clarté (0% = noir, 50% = couleur pure, 100% = blanc).
Le HSL facilite la création d'harmonies de couleurs — par exemple, faire pivoter la teinte de 120° vous donne un schéma de couleurs triadique.
L'outil analyse votre saisie pour identifier le format, extrait les valeurs de couleur brutes, puis convertit vers les deux autres formats en utilisant des algorithmes standard :
Toutes les conversions sont mathématiquement exactes pour les entrées entières, avec un arrondi appliqué uniquement pour les valeurs HSL.
Développement web — Basculez entre le HEX pour les propriétés CSS et le RGB pour les opérations canvas ou la manipulation de couleurs en JavaScript.
Systèmes de design — Documentez les couleurs en HSL pour des ajustements de thème plus faciles tout en fournissant le HEX pour l'implémentation.
Dégradés CSS — Utilisez le RGB avec des valeurs alpha pour des superpositions transparentes, en convertissant depuis la sortie HEX de votre outil de design.
Accessibilité — Ajustez la luminosité en HSL pour garantir des ratios de contraste suffisants tout en conservant la même teinte.
Toutes les conversions se déroulent dans votre navigateur. Aucune valeur de couleur n'est envoyée à un serveur. L'outil traite les saisies instantanément pendant la frappe, sans dépendances externes.
Les couleurs HEX utilisent un code hexadécimal à six chiffres précédé d'un signe dièse, comme #ff5733. Chaque paire de chiffres représente respectivement les composantes rouge, vert et bleu. Le format HEX est le plus couramment utilisé en design web et en CSS en raison de sa compacité et de sa compatibilité universelle avec tous les outils de développement et de design.
RGB signifie Red, Green, Blue (Rouge, Vert, Bleu). Chaque composante va de 0 à 255. Par exemple, rgb(255, 0, 0) est du rouge pur. Ce format est intuitif car il décrit directement l'intensité de chaque canal de couleur. C'est le format utilisé nativement par les écrans qui émettent littéralement de la lumière rouge, verte et bleue pour créer toutes les couleurs affichées.
HSL signifie Hue, Saturation, Lightness (Teinte, Saturation, Luminosité). La teinte est l'angle sur le cercle chromatique (0–360), la saturation est l'intensité de la couleur (0–100%) et la luminosité contrôle à quel point la couleur est claire ou foncée (0–100%). Le HSL est souvent plus intuitif pour les humains car vous pouvez raisonner sur les couleurs en termes de « quelle couleur, combien vive, combien brillante », ce qui facilite la création d'harmonies chromatiques.
Oui, les codes hexadécimaux à 3 chiffres comme #f00 sont entièrement pris en charge par cet outil. Ils sont automatiquement étendus à leurs équivalents à 6 chiffres en doublant chaque caractère, donc #f00 devient #ff0000 (rouge pur). C'est la notation abrégée standard utilisée en CSS et en design web, où chaque chiffre est répété pour former la valeur hexadécimale complète à six chiffres.
Non, toutes les conversions de couleurs se déroulent entièrement dans votre navigateur en utilisant du JavaScript côté client. Aucune valeur de couleur n'est transmise à un serveur, stockée dans une base de données ou enregistrée nulle part. L'outil s'exécute localement sur votre appareil et produit les résultats instantanément sans requête réseau, ce qui est sûr pour les couleurs de marque propriétaires et les travaux de design confidentiels.
Dernière mise à jour le 2026-09-26 · Rédigé par UtiliaTools