CodeKitHubEn quoi consiste cet outil ?
Un sélecteur de couleurs transforme un choix visuel — telle nuance de bleu, tel pixel précis dans un logo — en codes numériques compréhensibles par les logiciels. Une même couleur peut être exprimée de plusieurs façons équivalentes : le format HEX (#3b82f6) domine le CSS et les livraisons de projets graphiques ; le format RVB (59, 130, 246) correspond à la manière dont les écrans et le code représentent la couleur, tandis que le format HSL (217°, 91 %, 60 %) décrit la teinte, la saturation et la luminosité d’une manière compréhensible pour l’œil humain.
La deuxième partie de l'outil est une pipette d'image. Importez une capture d'écran, un logo ou une photo, puis cliquez n'importe où pour prélever la couleur située sous le curseur — c'est la méthode classique pour répondre à la question « de quelle couleur exacte s'agit-il ? ». Lorsque le navigateur prend en charge l’API EyeDropper, la loupe native est utilisée ; dans les autres navigateurs, l’outil lit la valeur des pixels à partir d’une copie de l’image stockée sur le canevas. Dans les deux cas, le traitement est local : l’image n’est jamais téléchargée.
Pourquoi l'utiliser ?
- Trois formats à la fois : chaque couleur sélectionnée s'affiche simultanément en HEX, RVB et HSL, avec pour chacun un bouton permettant de la copier d'un simple clic — aucune étape de conversion supplémentaire n'est nécessaire.
- Sélectionnez une image : importez n'importe quelle photo et cliquez pour prélever la couleur exacte d'un pixel — idéal pour extraire les couleurs d'une marque à partir d'un logo ou pour trouver la couleur correspondante à celle d'une capture d'écran.
- Utilise la pipette native du navigateur avec la loupe lorsqu'elle est disponible, et recourt à la lecture précise des pixels du canevas dans tous les autres cas.
- Un échantillon d'aperçu en temps réel vous permet de voir d'un seul coup d'œil la couleur actuelle, afin que vous puissiez vérifier votre choix avant de le copier.
- Gratuit, instantané et entièrement local : les couleurs sont calculées et les images sont lues directement dans votre navigateur — rien n'est envoyé, stocké ni enregistré.
Mode d'emploi
- Choisissez une couleur à l'aide du nuancier, ou collez/modifiez directement une valeur.
- Pour prélever une couleur à partir d'une image, téléchargez celle-ci, puis cliquez sur le point dont vous souhaitez sélectionner la couleur.
- Consultez les valeurs HEX, RVB et HSL, accompagnées d'un échantillon d'aperçu en temps réel.
- Cliquez sur le bouton « Copier » situé à côté du format dont vous avez besoin : HEX pour le CSS, RVB ou HSL pour le code.
Exemple
Entrée
Clicking the blue area of an uploaded logoRésultat
HEX #3b82f6 · RGB rgb(59, 130, 246) · HSL hsl(217, 91%, 60%)Ces trois formats désignent la même couleur. Utilisez le format HEX dans les feuilles de style et les outils de conception, le format RVB lorsque le code requiert des valeurs de canal, et le format HSL lorsque vous souhaitez obtenir des variantes plus claires ou plus foncées en modifiant uniquement le dernier chiffre.
Quel format de couleur pour quel travail ?
Le CSS moderne accepte ces trois formats partout où l'utilisation d'une couleur est autorisée ; le choix dépend donc davantage du processus de travail que de la compatibilité. Les équipes s'accordent généralement sur l'utilisation du format HEX dans les jetons de conception, puis recourent au format HSL pour explorer différentes variantes — en modifiant la luminosité de 10 à 15 points pour obtenir un état de survol exploitable sans modifier la teinte.
| Format | Exemple | Idéal pour |
|---|---|---|
| Hexadécimal | #3b82f6 | CSS, outils de conception, partage de couleurs dans le chat et spécifications |
| Rouge, vert, bleu | Rouge, vert, bleu (59, 130, 246) | Code permettant de manipuler les canaux, le dessin sur un canevas et la transparence avec la fonction rgba() |
| HSL | hsl(217, 91 %, 60 %) | Créer des variantes plus claires, plus foncées ou au survol, et constituer des palettes |
De la couleur choisie au code CSS final
Le choix d'une couleur constitue généralement la première étape d'un projet de mise en page. Si vous avez besoin de cette même couleur dans d'autres systèmes de notation — CMJN pour l'impression ou une valeur OKLCH pour le CSS à large gamme de couleurs —, le convertisseur de couleurs prend le relais là où ce sélecteur s'arrête.
La couleur choisie se traduit souvent directement par un effet visuel : le « Box Shadow Generator » utilise une valeur HEX pour créer des ombres réalistes, tandis que les cartes aux bords arrondis générées par le « Border Radius Generator » viennent parachever le rendu.
→ Convertisseur de couleurs · Générateur de Box Shadow · Générateur de Border Radius
Foire aux questions
Quelle est la différence entre les formats HEX, RVB et HSL ?
Il s’agit de trois notations désignant le même modèle de couleur. Le format HEX regroupe les canaux rouge, vert et bleu en six chiffres hexadécimaux (#3b82f6) ; c’est la forme la plus couramment utilisée en CSS et dans les outils de conception. Le format RGB présente ces trois canaux sous forme de nombres décimaux compris entre 0 et 255. Le format HSL exprime la couleur en termes de teinte (0–360°), de saturation et de luminosité — ce qui est bien plus intuitif lorsque l'on souhaite obtenir « la même couleur, mais plus claire ». La conversion entre ces formats ne modifie jamais la couleur.
Comment fonctionne la sélection d'une couleur à partir d'une image ?
L'image téléchargée est affichée sur une toile invisible dans votre navigateur. Lorsque vous cliquez, l'outil lit les valeurs de rouge, vert et bleu du pixel situé à cet emplacement précis et les convertit en HEX, RVB et HSL. Dans les navigateurs prenant en charge l'API EyeDropper (Chrome et Edge sur ordinateur), une loupe native s'ouvre à la place, ce qui vous permet de sélectionner n'importe quel point de l'écran avec une précision au pixel près.
Ma photo est-elle mise en ligne quelque part ?
Non. L'image est ouverte directement par votre navigateur et lue localement à partir d'un « canvas » ; aucun fichier ni aucune donnée de couleur n'est jamais transmis ou stocké. Vous pouvez charger la page, vous déconnecter d'Internet, et le sélecteur de couleurs ainsi que la pipette d'image continueront de fonctionner — ce qui garantit la sécurité des designs non encore publiés et des captures d'écran internes.
Pourquoi la couleur sélectionnée ne correspond-elle pas exactement à ce que je vois à l'écran ?
Deux raisons courantes. L’anti-aliasing : les pixels situés aux bords du texte et des formes se fondent dans l’arrière-plan ; ainsi, cliquer à un pixel de distance donne une couleur intermédiaire — prélevez plutôt un échantillon au centre d’une zone, là où la couleur est uniforme. Gestion des couleurs : les fichiers JPG/PNG présentant des profils de couleurs inhabituels peuvent s'afficher de manière légèrement différente selon les écrans ; l'outil indique la valeur du pixel telle qu'elle est enregistrée dans le fichier, ce qui correspond à la valeur dont vous avez besoin pour votre travail de conception.
Quel format dois-je utiliser pour le CSS ?
Le format HEX est le plus sûr par défaut : tous les navigateurs et outils le prennent en charge. Utilisez le format HSL lorsque vous prévoyez de créer des variantes pour le survol ou le mode sombre, car le fait de ne modifier que la composante de luminosité permet de conserver une teinte et une saturation cohérentes. Le format RVB est principalement utile lorsque le code génère des couleurs à partir de canaux numériques, ou lors de l'ajout de transparence, où rgba(59, 130, 246, 0,5) est plus lisible qu'un code hexadécimal à huit chiffres.