Aller au contenu
ToolNest

Convertisseur de couleurs HEX, RGB, HSL

Convertissez une couleur entre HEX, RGB, RGBA, HSL et HSLA, avec aperçu, opacité, contraste et copie en un clic.

#EA580C

Collez une couleur dans n’importe quel format : HEX, RGB, RGBA, HSL ou HSLA.

Aa Contraste sur blanc : —
Aa Contraste sur noir : —

Conversion instantanée dans votre navigateur. Astuce : modifiez directement n’importe quel format, les autres se mettent à jour.

Convertir une couleur en un instant

Collez une couleur dans le format de votre choix, par exemple #3B82F6, rgb(59, 130, 246) ou hsl(217, 91%, 60%), et l'outil affiche aussitôt toutes ses écritures. Vous pouvez aussi partir du nuancier ou modifier directement l'un des champs : les autres suivent. Chaque valeur se copie en un clic, prête à être collée dans une feuille de style, un logiciel de design ou une charte graphique.

Les formats de couleur expliqués

  • HEX (hexadécimal) : trois paires de chiffres de 00 à FF pour le rouge, le vert et le bleu. #FF0000 est un rouge pur. La forme courte #F00 est équivalente : chaque chiffre est doublé.
  • HEX avec transparence : une quatrième paire, de 00 (invisible) à FF (opaque), indique l'opacité. #3B82F680 est le même bleu à environ 50 %.
  • RGB : les mêmes trois composantes écrites en décimal, de 0 à 255. rgb(59, 130, 246) correspond exactement à #3B82F6.
  • RGBA : RGB avec une quatrième valeur, l'opacité, de 0 (transparent) à 1 (opaque).
  • HSL : teinte (angle de 0 à 360° sur le cercle chromatique), saturation et luminosité en pourcentage. Ce format est le plus intuitif pour créer des variantes : garder la teinte et changer la luminosité donne une version plus claire ou plus foncée de la même couleur.
  • HSLA : HSL avec opacité.

L'outil accepte aussi la syntaxe CSS moderne, sans virgules : rgb(59 130 246 / 50%) ou hsl(217deg 91% 60% / .5).

Lire le contraste

Sous le tableau, l'outil calcule le rapport de contraste de la couleur sur fond blanc et sur fond noir, selon la méthode des règles d'accessibilité WCAG :

  • 4,5 : 1 ou plus (niveau AA) : lisible pour un texte courant ;
  • 3 : 1 ou plus : acceptable seulement pour les grands textes (titres, boutons en gros caractères) ;
  • 7 : 1 ou plus (niveau AAA) : lisibilité renforcée.

Une couleur semi-transparente est d'abord mélangée au fond avant le calcul, comme à l'écran.

Bon à savoir

La conversion entre HEX, RGB et HSL est exacte, à l'arrondi près : HSL est affiché au dixième de pour cent, ce qui peut faire varier une composante RGB d'une unité lors d'un aller-retour. Pour un usage web, HEX et RGB décrivent exactement la même couleur ; choisissez simplement le format attendu par votre outil. Tout se passe dans votre navigateur : aucune donnée n'est envoyée.

Questions fréquentes

Quelle est la différence entre RGB et HEX ?

Aucune sur le fond : ce sont deux écritures des trois mêmes composantes rouge, vert, bleu, en décimal (0 à 255) ou en hexadécimal (00 à FF).

Comment rendre une couleur transparente ?

Réglez l'opacité : l'outil fournit alors les écritures RGBA, HSLA et HEX à 8 chiffres, comprises par tous les navigateurs récents.

Comment obtenir une version plus claire d'une couleur ?

Modifiez la luminosité (le troisième nombre) dans le champ HSL : la teinte reste la même.

Pour aller plus loin