Sélecteur et convertisseur de couleurs — RGB, HEX, HSL
Prélevez n’importe quelle couleur sur votre écran, ou convertissez instantanément entre HEX, RGB et HSL.
Astuce : dans Chrome ou Edge, une pipette « Prélever une couleur à l’écran » apparaît ici ; elle peut prélever n’importe quel pixel de votre écran, même hors du navigateur.
#071E93rgb(7, 30, 147)hsl(230, 91%, 30%)HEX (#RGB ou #RRGGBB), rgb(), hsl() ou un simple « r, g, b » — jusqu’à 500 lignes. Chaque ligne est affichée en HEX, RGB et HSL ; les lignes qui ne sont pas des couleurs sont signalées et les autres sont tout de même converties.
Un problème, ou quelque chose à améliorer ? Nous lisons chaque message et corrigeons vite.
Convertissez n’importe quelle couleur entre HEX, RGB et HSL instantanément. Choisissez une couleur visuellement, collez un code HEX, saisissez des valeurs RGB ou HSL, ou utilisez la pipette d’écran pour prélever n’importe quel pixel de votre affichage, même dans une autre application. Tous les formats restent synchronisés, avec pour chacun une chaîne CSS prête à copier.
Une palette entière ? Collez une liste de couleurs, une par ligne, dans le champ de conversion par lot : chaque ligne est convertie en HEX, RGB et HSL dans un tableau téléchargeable en CSV.
Mode d’emploi
- Choisissez une couleur avec le sélecteur visuel, saisissez une valeur dans n’importe quel champ (HEX, RGB ou HSL), ou cliquez sur « Prélever une couleur à l’écran » puis sur n’importe quel pixel de votre affichage, y compris hors du navigateur.
- Tous les autres formats se mettent à jour instantanément.
- Cliquez sur Copier à côté du format voulu : les valeurs sont prêtes à coller dans votre CSS.
- Pour convertir de nombreuses couleurs, collez-les une par ligne dans le champ de conversion par lot sous le convertisseur et téléchargez le tableau en CSV.
Questions fréquentes
Quelle est la différence entre HEX, RGB et HSL ?
Ils décrivent les mêmes couleurs de façons différentes. Le HEX (#071E93) est compact et c’est la notation la plus courante sur le web. Le RGB (rgb(7, 30, 147)) exprime les composantes rouge, verte et bleue, pratique pour ajouter de la transparence avec rgba(). Le HSL (hsl(229, 91%, 30%)) exprime la teinte, la saturation et la luminosité : le plus intuitif pour ajuster une couleur, par exemple l’éclaircir ou l’adoucir.
Quand utiliser le HSL en CSS ?
Utilisez le HSL quand vous avez besoin de variantes : en gardant la teinte et la saturation fixes et en modifiant la luminosité, vous obtenez des nuances claires et foncées cohérentes d’une couleur de marque, bien plus facilement qu’en devinant des valeurs HEX.
Les codes HEX à 3 chiffres sont-ils pris en charge ?
Oui : une forme abrégée comme #fff ou #1a9 est automatiquement développée en forme complète à 6 chiffres (#ffffff, #11aa99).
Les conversions RGB vers HEX sont-elles exactes ?
Oui : le HEX n’est que du RGB écrit en base 16, la conversion est donc exacte dans les deux sens. Un aller-retour par le HSL peut décaler une valeur de ±1 à cause des arrondis, ce qui est imperceptible en pratique.
Puis-je convertir plusieurs couleurs à la fois ?
Oui. Collez jusqu’à 500 couleurs dans le champ « Conversion par lot », une par ligne : HEX (#fff ou #071E93), rgb(), hsl() ou un simple triplet « r, g, b » fonctionnent tous. Chaque ligne apparaît dans un tableau avec ses valeurs HEX, RGB et HSL et une pastille ; les lignes qui ne sont pas une couleur sont signalées sans bloquer les autres, et « Télécharger le CSV » enregistre tout le tableau.
Comment fonctionne la pipette d’écran ?
Elle utilise l’API EyeDropper native du navigateur : cliquez sur le bouton, votre curseur devient une loupe, et un clic sur n’importe quel pixel (dans cette page, un autre onglet ou une tout autre application) capture cette couleur exacte. Rien n’est enregistré ni envoyé ; l’API ne renvoie que la couleur sur laquelle vous avez cliqué. Prise en charge par Chrome et Edge ; Firefox et Safari ne l’ont pas encore intégrée.
Aide-mémoire : les trois notations de couleur
• HEX (#071E93) : six chiffres hexadécimaux, deux par canal. La notation la plus compacte et celle par défaut dans la plupart des outils de design et des bases de code CSS.
• RGB (rgb(7, 30, 147)) : chaque canal de 0 à 255. Utilisez rgba() ou la syntaxe moderne rgb(r g b / a) quand vous avez besoin de transparence alpha.
• HSL (hsl(229, 91%, 30%)) : teinte sur le cercle chromatique (0–360°), saturation et luminosité. La notation la plus facile à modifier à la main : changez un seul nombre pour obtenir une version plus claire, plus foncée ou plus douce de la même teinte.
Une méthode pratique : définissez les couleurs de marque en HEX, déclinez-les en HSL (nuances claires et foncées en jouant sur la luminosité) et utilisez le RGB quand une bibliothèque ou l’API canvas exige des canaux numériques.
Outils gratuits similaires
- Convertisseur d’images — Convertissez entre AVIF, HEIC, TIFF, PNG, JPG, WebP, GIF, BMP et SVG. La plupart des conversions ne quittent jamais votre navigateur.
- Recadrer une image — Recadrez vos images à n’importe quelle taille ou proportion dans votre navigateur : carré, 16:9, 4:3 ou forme libre.