Calculatrices en ligne gratuites
Convertir couleurs : HEX ↔ RGB ↔ HSL avec aperçu et sélecteur
Dans le monde du design numérique et du développement web, les couleurs sont omniprésentes — mais elles ne se présentent pas toujours dans le format dont vous avez besoin. Notre convertisseur de couleurs gratuit vous permet de transformer instantanément vos valeurs entre les formats HEX, RGB et HSL, avec un aperçu en temps réel et un sélecteur de couleur intégré.
Pour tirer le meilleur parti de cet outil, il est utile de comprendre la spécificité de chaque format et son domaine d'application privilégié.
Le code couleur HEX (hexadécimal) est la notation la plus courante dans la conception web. Un code comme #FF6B6B est composé de six caractères regroupés en trois paires, chacune représentant l'intensité des canaux rouge, vert et bleu en base 16. Ce format est compact, universel et directement utilisable dans les feuilles de style CSS et les fichiers HTML. La quasi-totalité des outils de design l'intègrent nativement.
RGB (Rouge, Vert, Bleu) est le modèle colorimétrique additif utilisé par les écrans. Chaque canal accepte une valeur entière de 0 à 255. Par exemple, le vert pur s'exprime rgb(0, 255, 0). Le format RGB est particulièrement précieux lorsqu'on travaille avec la transparence via rgba() en CSS, ce qui en fait un incontournable pour les développeurs front-end.
HSL (Teinte, Saturation, Luminosité) est le format le plus intuitif pour les designers. La teinte (Hue) est exprimée en degrés sur le cercle chromatique (0° à 360°), la saturation en pourcentage d'intensité colorée, et la luminosité en pourcentage du noir au blanc. Exemple : hsl(348, 83%, 47%) produit un rouge vif. Ce format facilite grandement la création de palettes harmonieuses et de systèmes de design cohérents.
L'interface est pensée pour être rapide et accessible à tous, qu'on soit débutant ou expert :
Ce convertisseur répond aux besoins de nombreux profils différents :
Supposons que la couleur principale de votre marque soit définie comme #0077B6 dans votre guide de style. Le développeur CSS a besoin du code RGB, tandis que le designer mobile requiert le HSL. Entrez le code HEX une seule fois et obtenez immédiatement rgb(0, 119, 182) et hsl(201, 100%, 36%). Gain de temps assuré, erreurs évitées.
Le format HSL brille particulièrement lors de la création de palettes tonales. Fixez une teinte et une saturation, puis faites varier la luminosité pour générer des variantes claires et foncées d'une même couleur. Convertissez ensuite chaque valeur en HEX pour l'intégrer directement dans votre code CSS ou dans Figma.
Les normes d'accessibilité WCAG imposent des ratios de contraste minimaux entre le texte et l'arrière-plan. Pour effectuer ces calculs, les valeurs RGB sont souvent requises. Notre outil vous permet d'obtenir ces valeurs en quelques secondes, facilitant ainsi vos audits d'accessibilité.
Ces deux formats encodent la même information colorimétrique (intensité des canaux rouge, vert et bleu), mais dans des notations différentes. HEX utilise la base 16 (ex. : #29ABE2), tandis que RGB exprime les valeurs en décimal (ex. : rgb(41, 171, 226)). Ils sont mathématiquement équivalents et facilement interchangeables grâce à notre outil.
Le convertisseur prend en charge HEX, RGB et HSL dans leurs formes standard. Pour gérer la transparence, vous pouvez utiliser le résultat RGB et ajouter manuellement un canal alpha, par exemple rgba(41, 171, 226, 0.8), ou utiliser hsla() avec la valeur HSL obtenue.
Le format HSL est plus proche de la perception humaine des couleurs. Il est bien plus facile d'ajuster manuellement la luminosité ou la saturation que de modifier les trois canaux RGB en parallèle. C'est pourquoi les systèmes de design modernes, comme Material Design ou Tailwind CSS, privilegient de plus en plus HSL.
Absolument. Les conversions sont basées sur des formules mathématiques standardisées, identiques à celles utilisées par des outils professionnels comme Figma, Photoshop ou les DevTools de Chrome. De légères différences d'arrondi (±1) peuvent apparaître dans les valeurs HSL, sans aucun impact visuel perceptible.
Oui, le convertisseur est entièrement responsive et s'adapte parfaitement aux écrans de toutes tailles. Le sélecteur de couleur est également optimisé pour les interfaces tactiles, le rendant pratique en déplacement.