What is a color picker?

A color picker is a tool that lets you select a color visually and provides the corresponding color code in formats like HEX (#FF5733), RGB (255, 87, 51), and HSL (11, 100%, 60%). These codes are used in web design, graphic design, and programming.

What is the difference between HEX, RGB, and HSL?

HEX is a 6-digit hexadecimal code (#RRGGBB) commonly used in CSS. RGB defines color by Red, Green, Blue values (0-255). HSL uses Hue (0-360°), Saturation (0-100%), and Lightness (0-100%), making it easier to adjust colors intuitively.

Is this color picker free?

Yes. 100% free, no signup, runs entirely in your browser. No data is sent to any server.

Sélecteur de couleur

Choisissez n’importe quelle couleur et obtenez les valeurs HEX, RGB et HSL instantanément. Cliquez sur le spectre, ajustez la teinte, copiez le code.

HEX

RGB

HSL

CSS

Couleurs récentes

Comment utiliser le sélecteur de couleur

Choisir

Cliquez n’importe où sur le spectre de couleur pour sélectionner une couleur. Utilisez le curseur de teinte ci-dessous pour modifier la teinte de base.

Lire

Les valeurs HEX, RGB, HSL et CSS se mettent à jour instantanément. Vous pouvez également taper un code HEX directement dans le champ de saisie.

Copier

Cliquez sur le bouton de copie à côté de n’importe quelle valeur pour la copier dans votre presse-papiers. Les couleurs récentes sont enregistrées dans la bande d’historique.

Référence des formats de couleur

Format	Exemple	Utilisé dans	Avantage
HEX	#FF5733	CSS, HTML, outils de design	Compact, largement reconnu
RGB	rgb(255, 87, 51)	CSS, JavaScript, Photoshop	Correspond à la manière dont les écrans affichent la couleur
HSL	hsl(11, 100%, 60%)	CSS, systèmes de design modernes	Intuitif à ajuster (teinte, saturation, lumière)

Cas d’usage courants

Développement web

Choisissez les couleurs pour les feuilles de style CSS, les composants React et les tokens de design. Copiez les valeurs HEX ou HSL directement dans votre code.

Design graphique

Trouvez les valeurs de couleur exactes pour Figma, Photoshop, Illustrator ou Canva. Associez les couleurs de marque en entrant un code HEX connu.

Présentations

Choisissez des couleurs complémentaires pour PowerPoint ou Google Slides. Utilisez le spectre pour trouver des couleurs qui fonctionnent bien ensemble.

Réseaux sociaux

Associez les couleurs de marque pour les graphiques de réseaux sociaux, les bannières et les éléments de profil. Copiez les valeurs CSS pour les outils de design basés sur le web.

Questions fréquemment posées

Quelle est la différence entre HEX, RGB et HSL ?

HEX est un code hexadécimal à 6 chiffres (#RRGGBB) utilisé en CSS et HTML. RGB définit la couleur par les canaux Rouge, Vert et Bleu (0–255 chacun). HSL utilise la Teinte (0–360°), la Saturation (0–100%) et la Lumière (0–100%), ce qui le rend plus facile de créer des variations de couleur en ajustant une dimension à la fois.

Puis-je choisir une couleur à partir d’une image ?

Cet outil fournit un sélecteur de couleur basé sur le spectre. Pour choisir des couleurs à partir d’une image existante, essayez l’API EyeDropper intégrée du navigateur (Chrome 95+) ou prenez une capture d’écran et utilisez le spectre pour faire correspondre la couleur visuellement.

Ce sélecteur de couleur est-il gratuit ?

Oui. 100% gratuit, aucune inscription, aucune publicité. L’outil s’exécute entièrement dans votre navigateur — aucune donnée n’est envoyée à aucun serveur. Fonctionne hors ligne après le chargement de la page.

Outils associés

Image en Base64 Redimensionner une image Image en niveaux de gris Redimensionneur d’images OG