Convertisseur de Couleur — HEX, RGB et HSL
Convertissez toute couleur entre HEX, RGB et HSL et copiez le code instantanément — outil gratuit pour designers.
#6366f1rgb(99, 102, 241)hsl(239, 84%, 67%)rgba(99, 102, 241, 1)La conversion se fait en local
Sûr pour une identité non dévoilée
Sans compte
Connexion sécurisée
Comment ça marche
- 1
Saisissez une couleur
Collez un code HEX, tapez des valeurs RGB ou réglez le HSL — selon ce dont vous disposez.
- 2
Lisez les autres notations
Les deux restantes se mettent à jour instantanément, avec un nuancier de la couleur obtenue.
- 3
Copiez ce qu’il vous faut
Prenez la notation utilisée par votre feuille de style, votre outil de conception ou votre charte.
Pourquoi cet outil
Trois notations à la fois
HEX, RGB et HSL restent synchronisées quand vous modifiez l’une d’elles — inutile de reconvertir pour vérifier.
Retouchez en HSL, livrez en HEX
HSL est le modèle sur lequel on peut raisonner ; HEX est ce que réclament encore la plupart des feuilles de style et fichiers de conception.
Nuancier en direct
La couleur s’affiche à mesure que vous tapez : une coquille dans un code hexadécimal se voit aussitôt.
Copie en un clic
Récupérez la chaîne exacte qu’attend votre CSS, votre configuration Tailwind ou votre outil de conception, déjà formatée.
Rien n’est envoyé
La conversion est une arithmétique effectuée dans votre navigateur — aucune valeur ne part ailleurs.
Gratuit et sans compte
Aucune inscription, aucune limite de conversions, aucun filigrane sur quoi que ce soit.
HEX, RGB et HSL décrivent la même couleur autrement
Les trois notations désignent les mêmes couleurs d’écran ; elles diffèrent par la façon dont le nombre est organisé, et c’est cette organisation qui rend l’une plus commode que l’autre selon la tâche. HEX condense trois valeurs en une chaîne compacte : `#3B82F6` signifie rouge 59, vert 130, bleu 246 écrits en base 16. RGB énonce ces trois canaux directement. HSL restructure la même information en teinte (quelle couleur, sous forme d’angle de 0 à 360), saturation (à quel point elle est vive, de 0 à 100 %) et luminosité (à quel point elle est claire, de 0 à 100 %). La conversion ne perd rien : `#3B82F6`, `rgb(59, 130, 246)` et `hsl(217, 91%, 60%)` sont la même couleur écrite de trois manières.
Pourquoi HSL est celle qui mérite d’être apprise
HEX et RGB sont difficiles à manier parce que modifier une couleur suppose de changer trois nombres à la fois, sans rapport évident avec ce que vous voyez. Éclaircissez un bleu en RGB et il faut relever les trois canaux de quantités devinées. En HSL, la même retouche tient en un nombre : augmentez la luminosité. Vous voulez une version assourdie d’une couleur de marque ? Baissez la saturation et laissez le reste. Il vous faut un état survolé un peu plus sombre que la base ? Retranchez dix à la luminosité. C’est aussi pourquoi HSL est la voie pratique pour bâtir une échelle de couleurs : fixez teinte et saturation, faites varier la luminosité par paliers, et la famille reste cohérente par construction plutôt que par tâtonnement.
Où chaque notation sert réellement
HEX domine la livraison de conception : chartes graphiques, Figma et la plupart des feuilles de style spécifient encore les couleurs en codes à six chiffres, et c’est le format qu’un client ou un imprimeur vous enverra le plus probablement. RGB apparaît là où les canaux doivent être manipulés par programme, et sous la forme `rgba()` quand la transparence entre en jeu. HSL s’impose de plus en plus dans le CSS écrit à la main, précisément parce qu’un mainteneur lit `hsl(217, 91%, 60%)` et sait qu’il s’agit d’un bleu saturé de luminosité moyenne, alors que `#3B82F6` ne lui apprend rien avant affichage. Un flux courant consiste à raisonner en HSL pendant la conception puis à convertir en HEX pour le document de livraison — précisément la conversion que cet outil rend instantanée.
Lire un code HEX sans convertisseur
Un code HEX à six chiffres est fait de trois paires : rouge, vert, bleu, chacune de `00` à `FF` (0 à 255). Deux motifs valent d’être reconnus à l’œil. Quand les trois paires sont égales — `#333333`, `#CCCCCC` — la couleur est un gris neutre, et plus la valeur est haute, plus il est clair. Quand une paire domine nettement, ce canal est la couleur : `#CC3333` se lit rouge, `#33CC33` vert. Cela suffit à repérer une erreur évidente avant affichage, mais pas à juger si deux couleurs sont proches — et c’est exactement là que convertir en HSL puis comparer les trois composantes va plus vite que fixer des chaînes hexadécimales.
Convertir une couleur n’est pas vérifier qu’elle fonctionne
Un convertisseur vous dit quelle est la couleur, pas si elle est lisible sur son fond. Ce sont deux questions distinctes, et la seconde a un seuil plutôt qu’un avis : le WCAG exige un rapport de contraste d’au moins 4,5:1 pour un texte courant. Un couple de couleurs peut être parfaitement conforme à la charte et échouer malgré tout. Si la couleur que vous convertissez portera du texte — ou en est — passez le couple par le vérificateur de contraste avant de vous engager. De même, si vous construisez un ensemble de couleurs plutôt que d’en convertir une seule, le générateur de palettes travaille sur les relations entre teintes, ce que la conversion seule ne traite pas.
Alpha, transparence et la forme à huit chiffres
HEX comme RGB possèdent des variantes transparentes : le HEX à huit chiffres ajoute deux caractères d’alpha, et `rgba()` ajoute une quatrième valeur de 0 à 1. Cet outil convertit la forme opaque à six chiffres, celle qu’emploient les chartes, les fichiers de conception et l’écrasante majorité des déclarations de style. Si vous avez besoin de transparence, convertissez ici la couleur pleine et ajoutez le canal alpha dans votre feuille de style : la couleur de base reste ainsi une source unique de vérité et chaque usage fixe sa propre opacité, plutôt que d’enfermer dans la palette des dizaines de variantes semi-transparentes quasi identiques.
Erreurs courantes à éviter
- Ajuster une couleur en modifiant les canaux RGB. L’éclaircir ou l’assourdir en RGB oblige à toucher trois nombres de quantités devinées. Convertissez en HSL, changez la seule composante qui décrit ce que vous voulez, puis reconvertissez.
- Construire une échelle en choisissant les nuances à l’œil. Faire varier la luminosité en HSL à teinte et saturation constantes donne une famille cohérente ; choisir les codes hexadécimaux à la main donne une famille dont la teinte dérive et dont le milieu paraît terne.
- Supposer qu’une couleur convertie est accessible. La conversion est arithmétique et ne dit rien de la lisibilité — le couple doit toujours franchir 4,5:1 pour un texte courant, ce que seule une vérification de contraste indique.
- Coller un code hexadécimal sans le dièse, ou avec, dans un champ qui attend l’inverse. Les deux formes sont courantes et aucune n’est universellement acceptée ; vérifiez ce que réclame votre outil au lieu de le supposer.
- Attendre d’une couleur d’écran qu’elle s’imprime à l’identique. HEX, RGB et HSL décrivent une lumière émise par un écran ; l’impression emploie des encres CMJN, et les couleurs d’écran vives — surtout les bleus et verts saturés — n’ont pas d’équivalent exact en encre.
Comparaison
| KeroTools | Logiciels de conception | Convertisseurs de moteur de recherche | |
|---|---|---|---|
| HEX, RGB, HSL ensemble | Les trois, en direct | Oui | En général une à la fois |
| Valeurs envoyées à un serveur | Jamais | Non | Souvent |
| Nuancier en direct | Oui | Oui | Parfois |
| Compte ou licence | Ni l’un ni l’autre | Licence requise | Ni l’un ni l’autre |
| Fonctionne hors ligne | Après le premier chargement | Oui | Non |
| Coût | Gratuit | Payant | Gratuit |
Fonctionnalités
Entrée et sortie HEX
Notation à six chiffres, avec ou sans le dièse initial.
Entrée et sortie RGB
Trois canaux de 0 à 255, dans le format que le CSS accepte directement.
Entrée et sortie HSL
Teinte en degrés, saturation et luminosité en pourcentages — le modèle dans lequel les designers raisonnent réellement.
Aperçu couleur en direct
Un nuancier restitue la valeur courante : les erreurs se repèrent à l’œil.
Bidirectionnel
Modifiez l’une des trois et les deux autres suivent ; il n’y a pas de champ source figé.
Chaînes prêtes à coller
La sortie est formatée pour se coller directement dans le CSS, sans retouche.
Aucune installation
Rien à télécharger ni à installer : tout se passe sur la page web.
Compatible arabe et RTL
Interface complète en huit langues, dont l’arabe de droite à gauche.
Sécurisé par défaut
Servi en HTTPS, sans suivi de fichiers ni envoi à un tiers.
Qui l’utilise
Développeurs front-end
Transformer la livraison HEX d’un designer en valeurs HSL, plus faciles à maintenir dans une feuille de style.
Designers
Lire une couleur de marque en HSL pour bâtir teintes et ombres restant dans la même famille de teinte.
Marketing et responsables de marque
Obtenir la notation exacte réclamée par l’éditeur de thème de chaque plateforme, à partir d’une seule couleur de marque.
Toute personne éditant un thème
Faire correspondre une couleur issue d’un outil à un champ qui attend un autre format.
Questions Fréquentes
Non. Tout s’exécute localement dans votre navigateur — rien n’est envoyé, stocké ni partagé.
Oui — entièrement gratuit, sans compte et sans limite.