Convertisseur de code couleur

Convertit un code couleur entre les notations HEX, RGB et HSL. Saisis une valeur hexadécimale comme #3498db et tu obtiens immédiatement les écritures rgb() et hsl() correspondantes, ainsi qu'un aperçu de la couleur. Pratique quand ton outil de design et ta feuille de style n'utilisent pas le même format.

Comment utiliser

1. Saisis le code hexadécimal dans le champ ci-dessus, par exemple #3498db. La forme courte à trois chiffres fonctionne aussi.
2. Les valeurs RGB et HSL ainsi que l'aperçu se mettent à jour immédiatement.
3. Copie la notation dont tu as besoin dans ton CSS ou ton outil graphique.
4. Change de couleur pour enchaîner une autre conversion.

Cas d'usage courants

• Une maquette te donne une couleur en hexadécimal et tu as besoin d'un rgba() pour y ajouter de la transparence.
• Tu veux décliner une teinte en plusieurs niveaux de clarté sans changer la nuance.
• La charte graphique fournit les couleurs en RGB et ton code attend de l'hexadécimal.
• Tu as relevé une couleur sur une capture d'écran et tu dois la reporter dans ton projet.

Ce que HEX, RGB et HSL ont en commun

HEX et RGB sont deux écritures d'une même information : #3498db correspond exactement à rgb(52, 152, 219), puisque 34, 98 et db sont les valeurs 52, 152 et 219 en hexadécimal. L'aller-retour entre ces deux formats est donc sans perte. HSL réorganise la même couleur selon trois axes — teinte, saturation, luminosité — bien plus intuitifs pour ajuster une couleur à la main, mais chaque conversion introduit un arrondi : repasser par HSL puis revenir en HEX peut décaler la valeur d'une unité. Utilise donc HSL pour raisonner et régler, puis fige la valeur définitive en HEX ou en RGB.

Outils associés

Questions fréquentes

Quels formats de couleur Convertisseur de code couleur prend-il en charge ?

Le HEX sous ses formes à trois, six et huit chiffres, le RGB et le RGBA, ainsi que le HSL et le HSLA. Les valeurs transitent par une représentation interne commune : passer d'un format à l'autre puis revenir n'introduit donc aucune dérive.

Quel rapport de contraste faut-il pour passer les tests d'accessibilité ?

Le niveau AA du WCAG 2.1 exige 4,5 pour 1 pour le texte courant et 3 pour 1 pour le grand texte, c'est-à-dire à partir de 18,66 pixels en gras ou 24 pixels en romain. Le niveau AAA porte ces seuils à 7 pour 1 et 4,5 pour 1.

Puis-je coller le résultat directement dans du CSS ?

Oui. Les valeurs générées sont une syntaxe de couleur CSS valide et se collent telles quelles dans une feuille de styles, un fichier de jetons de design ou le style en ligne d'un composant.