Sélecteur de couleur en ligne : hex, RGB et HSL en un clic

Qu’est-ce qu’un sélecteur de couleur ?

Un sélecteur de couleur est un petit outil visuel qui vous permet de choisir une teinte à l’œil, puis d’en récupérer le code exact — hexadécimal, RGB ou HSL — pour la réutiliser ailleurs. Plutôt que de deviner une valeur ou de fouiller un nuancier en ligne à la recherche d’une couleur approchante, vous cliquez directement sur la nuance qui vous plaît et l’outil fait la conversion à votre place.

Celui-ci tient dans une seule page : un carré pour régler la saturation et la luminosité, un curseur de teinte, un curseur d’opacité, et un aperçu qui affiche en direct le résultat. Dès que vous bougez un curseur, les trois codes couleur — hex, rgb() et hsl() — se mettent à jour, prêts à être copiés dans une feuille de style, un logiciel de design ou n’importe quel champ qui attend une couleur.

Comment l’utiliser

1. Choisissez la teinte et l’intensité. Faites glisser le curseur arc-en-ciel sous le carré pour choisir une famille de couleur (rouge, vert, bleu…), puis cliquez ou faites glisser dans le carré saturation/luminosité pour ajuster son intensité et sa clarté ; le fond du carré s’actualise selon la teinte choisie. Réglez ensuite l’opacité avec le curseur alpha si vous avez besoin de transparence — l’aperçu sur fond en damier montre exactement ce que ça donne.
2. Ou saisissez directement un code. Collez ou tapez un code hexadécimal à 3, 6 ou 8 chiffres (avec ou sans #) dans le champ hex : tout le sélecteur — carré, curseurs et aperçu — saute instantanément à cette couleur. Le bouton pipette permet aussi de prélever la couleur d’un pixel n’importe où à l’écran, dans les navigateurs qui prennent en charge cette fonction.
3. Copiez le code dont vous avez besoin. Cliquez sur le code hex, rgb()/rgba() ou hsl()/hsla() pour le copier tel quel — une coche confirme la copie pendant deux secondes. Les rangées de teintes claires et de teintes foncées sous l’aperçu proposent dix variantes de la couleur mêlées de blanc ou de noir, et l’étiquette en dessous indique la couleur nommée la plus proche parmi 220 couleurs.

À quoi servent les codes couleur

Le code hex reste le format le plus universel : c’est celui qu’on colle dans une propriété CSS (color, background-color), dans le champ couleur de Figma ou de Photoshop, ou dans n’importe quel outil de design qui accepte une couleur au clavier. Une charte graphique ou une palette de marque se transmet presque toujours sous cette forme — trois ou quatre codes hex qui garantissent que le bleu du logo est rigoureusement identique sur le site, l’application et les supports imprimés.

RGB et HSL ont chacun leur usage : rgba() et hsla() servent quand on veut aussi contrôler la transparence dans une feuille de style, tandis que HSL est souvent plus pratique pour ajuster une couleur à l’œil (éclaircir, assombrir, désaturer) sans recalculer un hex. En dehors du web, ces mêmes codes s’utilisent dans un tableur pour mettre en forme des cellules selon une charte, dans un document texte ou une présentation, ou dans un logiciel de dessin vectoriel — la plupart acceptent directement un code hex collé dans leur sélecteur.

Limites à connaître

Un code hex est une valeur exacte, mais la couleur que vous voyez à l’écran ne l’est jamais complètement : la même valeur s’affiche différemment selon le gamut et le calibrage de chaque écran, et l’impression en CMJN ne reproduit pas toutes les couleurs qu’un écran peut afficher. Le carré de l’outil travaille en TSV (teinte, saturation, valeur — HSB en anglais), alors que CSS raisonne en TSL (teinte, saturation, luminosité — HSL) : ce sont deux façons de décrire la même couleur avec des nombres différents, donc la lecture HSL ne correspond pas exactement, point par point, à la position dans le carré. Les valeurs RVB et HSL affichées sont en plus arrondies à l’entier pour rester lisibles : un aller-retour du hex vers le HSL puis retour au hex peut décaler la couleur d’une unité — le champ hex reste la valeur de référence, sans arrondi.

Le bouton pipette repose sur l’API EyeDropper du navigateur, disponible aujourd’hui uniquement dans les navigateurs à base de Chromium (Chrome, Edge, Opera) : sur Safari et Firefox, il n’apparaît tout simplement pas, et quand il fonctionne, il prélève la couleur affichée à l’écran en sRVB. Le hex à 8 chiffres (#RRGGBBAA) code lui aussi l’opacité et fonctionne dans tous les navigateurs actuels, mais rgba() et hsla() restent le choix le plus sûr pour un support très ancien. Enfin, la couleur nommée la plus proche est calculée par distance RVB, ce qui n’est pas une mesure perceptuelle : c’est un nom numériquement voisin, pas forcément celui qui ressemble le plus à la couleur pour l’œil.

Pourquoi est-ce gratuit ?

Ce sélecteur de couleur tourne entièrement dans votre navigateur : aucune couleur ni aucun code n’est envoyé à un serveur, il n’y a pas de compte à créer, pas de filigrane sur les codes copiés, et aucune version payante ne débloque une fonctionnalité cachée. FreeToGenerate.com propose ce genre d’outil parce qu’un besoin aussi simple que trouver un code hex ne devrait jamais nécessiter une inscription.