Convertisseur de couleurs
Convertissez des couleurs entre HEX, RGB et HSL avec aperçu, sélecteur et copie en un clic
Curseurs HSL
Harmonies de couleurs
Complémentaire
Analogues
Les trois formats de couleur
HEX (hexadécimal)
Une couleur HEX commence par # suivi de six chiffres hexadécimaux (ex. #3b82f6) ; chaque paire code le canal rouge, vert et bleu (de 00 à ff). La forme abrégée à trois chiffres est aussi acceptée (ex. #f00 équivaut à #ff0000). HEX est la notation la plus répandue en CSS et dans les outils de design, idéale à coller directement dans une feuille de style.
RGB (rouge, vert, bleu)
RGB décrit une couleur par trois entiers de 0 à 255 pour les canaux rouge, vert et bleu, écrit en CSS sous la forme rgb(59, 130, 246). Il reflète directement la façon dont les écrans émettent la lumière, ce qui le rend adapté au travail programmatique comme le dessin sur Canvas et le traitement d'images.
HSL (teinte, saturation, luminosité)
HSL décrit une couleur par sa teinte H (angle de 0 à 360° sur le cercle chromatique), sa saturation S (0-100 %) et sa luminosité L (0-100 %), écrite en CSS sous la forme hsl(217, 91%, 60%). Proche de la perception humaine, c'est le modèle le plus pratique pour composer des palettes : assombrir une teinte ou trouver sa complémentaire est une simple opération numérique.
Tableau des couleurs courantes
| Couleur | HEX | RGB | HSL |
|---|---|---|---|
| Noir | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| Blanc | #ffffff | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| Rouge | #ff0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| Vert | #00ff00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| Bleu | #0000ff | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| Jaune | #ffff00 | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| Cyan | #00ffff | rgb(0, 255, 255) | hsl(180, 100%, 50%) |
| Magenta | #ff00ff | rgb(255, 0, 255) | hsl(300, 100%, 50%) |
| Orange | #ffa500 | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| Gris | #808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) |
Mode d'emploi
Saisissez une couleur dans n'importe quel champ — HEX accepte la forme abrégée #rgb et l'omission du # ; RGB accepte la fonction rgb() comme les valeurs séparées par des virgules ; en HSL les signes % sont facultatifs — ou utilisez le sélecteur de couleur et les curseurs HSL : tous les autres formats se synchronisent en temps réel. Le bouton « Copier » à côté de chaque format copie la valeur dans le presse-papiers. La section des harmonies propose une couleur complémentaire et deux analogues ; cliquez sur un échantillon pour l'appliquer. Tous les calculs sont effectués localement dans votre navigateur.