Color Picker & Converter
Understand Color Picker & Converter
Convertit une couleur entre hexadécimal, RGB, HSL, HWB et OKLch, avec un sélecteur visuel et un aperçu en direct.
How it works
L'hexadécimal et le RGB décrivent la même chose dans deux notations : chaque paire de chiffres hexadécimaux est un canal de 0 à 255, si bien que #FF5733 vaut rgb(255, 87, 51). Le HSL est un réarrangement cylindrique de ces mêmes nombres sRGB — la teinte comme un angle sur la roue chromatique, la saturation et la luminosité en pourcentages — ce qui facilite la dérivation de teintes et de nuances mais ne change pas d'espace colorimétrique. L'OKLch est différent par nature : c'est un espace perceptuel, si bien que des pas égaux sur son canal de clarté paraissent égaux à l'œil, et c'est pourquoi une rampe OKLch produit une palette régulière là où une rampe HSL se tasse dans les jaunes.
When to use it
- Transformer une valeur hexadécimale issue d'un fichier de design en la forme rgb() ou hsl() qu'attend une feuille de style ou une API canvas
- Construire une échelle de teintes et de nuances à partir d'une couleur de marque, en fixant teinte et saturation et en faisant varier la luminosité
- Relever une couleur sur une capture d'écran ou une page rendue et obtenir d'un coup toutes ses notations
- Comparer deux couleurs qui se ressemblent par leurs nombres plutôt qu'à l'œil
Watch out for
- Il n'y a pas de canal alpha ici. L'hexadécimal à huit chiffres (#RRGGBBAA), rgba() et hsla() ne sont pas analysés, et la transparence est abandonnée plutôt que transmise.
- Un aller-retour peut décaler la valeur d'une unité. La sortie HSL est arrondie au degré et au pourcentage entiers, si bien que hexadécimal → HSL → hexadécimal ne rend pas toujours l'octet de départ.
- La luminosité HSL n'est pas la clarté perçue. hsl(60, 100%, 50%) est un jaune vif et hsl(240, 100%, 50%) un bleu foncé, bien que les deux annoncent 50 % de luminosité — utilisez OKLch quand la comparaison doit correspondre à ce que voit l'œil.
- Les noms de couleurs CSS ne sont pas acceptés. Saisissez `#FF0000` plutôt que `red`.
Frequently Asked Questions
Comment convertir de l'hexadécimal en RGB ?
Découpez le code hexadécimal à 6 chiffres en trois paires : #FF5733 → R=0xFF=255, G=0x57=87, B=0x33=51, soit rgb(255, 87, 51). Pour un hexadécimal abrégé comme #F73, doublez d'abord chaque chiffre (#FF7733). Collez n'importe quel code hexadécimal ici et les valeurs RGB, HSL et HWB apparaissent instantanément.
Comment convertir du RGB en hexadécimal ?
Convertissez chaque canal (0–255) en deux chiffres hexadécimaux : R=255 → FF, G=87 → 57, B=51 → 33, soit #FF5733. En JavaScript : "#" + [r, g, b].map(v => v.toString(16).padStart(2, "0")).join(""). Collez ici des valeurs rgb() pour obtenir automatiquement le code hexadécimal.
Quelle est la différence entre RGB et HSL ?
Le RGB définit les couleurs par l'intensité des lumières rouge, verte et bleue (0–255 chacune) — il correspond au fonctionnement des écrans. Le HSL utilise la teinte (Hue, 0–360° sur la roue chromatique), la saturation (0–100 % de vivacité) et la luminosité (Lightness, 0–100 %). Le HSL est plus intuitif pour créer des teintes, des nuances et des échelles de couleurs de systèmes de design.
How to Use Color Picker & Converter
- Paste or type your input in the input area above.
- The tool processes your input automatically or click Run.
- Copy or download the result using the action buttons.
- Use Ctrl+Enter to run quickly from the keyboard.