Sélecteur de couleurs HEX, RGB et HSL
Choisissez n'importe quelle couleur et lisez instantanément ses valeurs HEX, RGB et HSL.
Trois façons de choisir la couleur
Tous les champs du sélecteur de couleurs décrivent une seule et même couleur : modifier l'un met à jour les autres.
- Le sélecteur. Cliquez sur la barre de couleur sous Choisissez une couleur pour ouvrir la palette de votre navigateur et choisir à l'œil.
- La case HEX. Tapez ou collez un code hexadécimal, avec ou sans
#, à 3 ou 6 chiffres. - Les cases R, G et B. Saisissez chaque canal de 0 à 255 pour ajuster un canal à la fois.
La page démarre sur #4f46e5, un indigo qui correspond à rgb(79, 70, 229) et hsl(243, 75%, 59%). Chaque format a son propre bouton de copie. HSL est parfois appelé TSL en français (teinte, saturation, luminosité) : c'est le même système, l'outil l'écrit à l'anglaise, comme le CSS.
Une couleur dans chaque format
Quelques couleurs de référence, telles que la page les affiche :
| HEX | RGB | HSL |
|---|---|---|
| #ff0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| #ffcc00 | rgb(255, 204, 0) | hsl(48, 100%, 50%) |
| #2e7d32 | rgb(46, 125, 50) | hsl(123, 46%, 34%) |
| #1e90ff | rgb(30, 144, 255) | hsl(210, 100%, 56%) |
| #808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) |
Le format à copier dépend de la destination. HEX est la forme compacte des feuilles de style, des maquettes et des chartes graphiques. RGB convient au code qui manipule des canaux séparés, comme le dessin sur un canvas. HSL est le plus simple à ajuster : gardez la teinte et la saturation, changez la luminosité, et vous obtenez une nuance plus claire ou plus foncée de la même couleur.
HSL est arrondi, HEX et RGB sont exacts
Les valeurs HSL sont arrondies à l'entier, donc deux couleurs voisines peuvent afficher le même texte HSL. #808080 et #7f7f7f sont deux gris différents, mais tous deux s'affichent hsl(0, 0%, 50%). Si vous copiez le HSL puis le reconvertissez, vous pouvez tomber un cran à côté du point de départ.
Quand la couleur exacte compte, par exemple pour reproduire un logo ou une charte, copiez la valeur HEX ou RGB. Gardez HSL pour les couleurs que vous comptez de toute façon retoucher.
Ce que le sélecteur ne gère pas
- La transparence. Il n'y a pas de canal alpha : les codes à 8 chiffres comme
#4f46e580et les codes à 4 chiffres sont refusés. - Les noms de couleurs. Taper
redourougene fonctionne pas. Saisissez le code hexadécimal. - Les codes invalides. Tant que la case HEX contient un code illisible, l'aperçu devient gris, un message apparaît sous les cases, et les champs RGB et HSL reprennent les valeurs de l'indigo par défaut au lieu de votre couleur. Corrigez le code avant de copier quoi que ce soit.
- La copie de ce que vous avez tapé. Le bouton de copie HEX copie la case telle quelle. Si vous avez tapé
f80, c'est ce que vous obtenez, sans le #. Déplacez le sélecteur ou modifiez une case RGB, et le code est réécrit en entier :#ff8800.
Questions fréquentes
Comment convertir un code HEX en RGB ?+
Collez le code dans la case HEX : les valeurs RGB et HSL s'affichent aussitôt. Chaque paire de chiffres hexadécimaux donne un canal, de 00 à ff, soit 0 à 255 : #1e90ff donne rgb(30, 144, 255).
Peut-on prélever une couleur ailleurs sur l'écran ?+
Cela dépend de la palette de votre navigateur, qui s'ouvre quand vous cliquez sur la barre de couleur. Si elle propose une pipette, vous pouvez prélever une couleur hors de la page, et les valeurs HEX, RGB et HSL se mettent à jour.
#fff est-il la même couleur que #ffffff ?+
Oui. Un code à 3 chiffres est une abréviation où chaque chiffre est doublé : #fff vaut #ffffff, le blanc, et #f80 vaut #ff8800.
Pourquoi le code passe-t-il en minuscules ?+
Le sélecteur et les cases RGB écrivent le code en minuscules. La casse ne change pas la couleur, et le CSS comme les logiciels de design acceptent les deux.