Convertisseur de Couleurs
Convertissez entre HEX, RGB et HSL instantanément
Convertisseur de Couleurs : Trois Langues, Une Couleur
Le designer donne du HEX, CSS veut du RGB, vous pensez en HSL — les trois sur un écran.
La même couleur parle trois langues : HEX (#6366f1), compact et standard des outils de design ; RGB (rgb(99, 102, 241)), la langue de la programmation avec ses canaux rouge-vert-bleu ; HSL (hsl(239, 84%, 67%)), le plus proche de l'intuition humaine avec teinte-saturation-luminosité. Ce convertisseur bascule instantanément entre les trois : tapez n'importe quel format ou cliquez le sélecteur — les trois équivalents et un aperçu en direct se mettent à jour ensemble. Le HEX court (#f00), rgb() et hsl() sont reconnus ; chaque ligne se copie d'un clic. La force du HSL apparaît ici aussi : pour éclaircir, foncer ou adoucir la même teinte, il suffit de toucher S et L.
Fonctionnalités
Trois Formats
HEX, RGB et HSL ensemble, en direct.
Aperçu en Direct
La couleur s'affiche en grand pendant la saisie.
Sélecteur de Couleur
Choisissez visuellement sans connaître de code.
Copie par Ligne
Récupérez le format voulu en un clic.
Guide des Formats de Couleur
Quel format pour quoi ?
- HEX : compact, le classique du design et du web
- RGB : par canaux — pour les calculs de couleur programmatiques
- HSL : intuitif — réglez luminosité/saturation à teinte fixe
- Même couleur : #6366f1 = rgb(99,102,241) = hsl(239,84%,67%)
Astuces HSL pratiques
- Plus clair : augmentez L
- Adouci : diminuez S
- Couleur complémentaire : ajoutez 180 à H
- Palette harmonieuse : tournez H par pas de 30
Questions Fréquentes
Comment lire un code HEX ?
Après le #, deux chiffres pour le rouge, deux pour le vert, deux pour le bleu ; chaque paire va de 00 à FF (0-255). #6366f1 → rouge 99, vert 102, bleu 241. La forme courte #f00 abrège #ff0000.
Pourquoi le HSL est-il plus pratique en design ?
Parce qu'il pense comme un humain : H (teinte) est la couleur elle-même, S (saturation) sa vivacité, L (luminosité) son clair-obscur. Le hover d'un bouton, c'est juste L +10 % — en RGB, il faudrait changer les trois canaux.
Le A (alpha) de RGBA est-il pris en charge ?
L'outil se concentre sur la couleur elle-même ; en tapant rgba(), les canaux de couleur sont lus et la transparence ignorée. Pour la rétablir, étendez la sortie rgb() en rgba(r, g, b, 0.5) à la main.
Les noms de couleur (red, blue) fonctionnent-ils ?
L'outil se concentre sur les formats numériques (hex, rgb, hsl) ; pour les noms, utilisez le sélecteur — dès le choix, les trois équivalents numériques apparaissent.
Quel format utiliser en CSS ?
Tous sont valides ; c'est une question de lisibilité. HSL est populaire avec les variables de thème, RGB quand JavaScript calcule des couleurs, HEX pour les couleurs de marque fixes.
Y a-t-il une dérive de couleur à la conversion ?
HEX ↔ RGB est exactement sans perte. Vers HSL, les pourcentages sont arrondis à l'entier — des écarts invisibles à l'œil (au plus 1/255).