À quoi sert cet outil
Ce sélecteur de couleurs en ligne vous permet de prélever une couleur et d'en consulter les valeurs dans des formats comme hex, rgb, hsl, hwb, lch, device-cmyk et les noms de couleurs CSS standard. Vous pouvez également saisir manuellement une valeur de couleur prise en charge et laisser la page la convertir automatiquement.
Il est utile pour le développement frontend, le design d'interface, le prélèvement de couleurs dans une capture d'écran, la vérification de couleurs de marque et la préparation de valeurs CSS. Lorsque vous voyez une couleur sans connaître son code, ou que vous devez convertir une valeur existante vers une autre notation CSS, cette page centralise le flux de travail.
Cas d'utilisation courants
- Prélever la couleur d'un pixel depuis une page web, une capture d'écran, une maquette de design, une application de bureau ou une interface système.
- Convertir une couleur vers des formats pratiques pour le frontend comme hex, rgb, hsl, hwb, lch ou cmyk.
- Rechercher des noms de couleurs CSS standard lorsqu'une documentation, une note de design ou un commentaire de code nécessite un libellé lisible.
- Vérifier si une valeur de couleur existante peut être interprétée par le navigateur et copier le format de sortie nécessaire.
Méthodes pour choisir une couleur
Il existe deux façons de choisir une couleur : utiliser le sélecteur de couleurs intégré ou cliquer sur le bouton pipette lorsque le navigateur prend en charge l'API EyeDropper. La pipette peut aussi prélever des pixels en dehors de cette page, ce qui est utile pour récupérer une couleur depuis un autre onglet, une application de bureau ou une maquette de design.
- Ouvrez le sélecteur de couleurs du navigateur et choisissez une couleur dans le sélecteur système.
- Ou cliquez sur le bouton pipette et prélevez une couleur à l'écran lorsque le navigateur l'autorise.
- Vous pouvez aussi coller un code couleur ou un nom de couleur dans le champ manuel et laisser la page l'analyser.
- Copiez le format dont vous avez besoin pour CSS, des notes de design ou des fichiers de configuration.
Conversions prises en charge
Le convertisseur prend en charge les formats de couleur CSS hex, rgb, hsl, hwb, lch et device-cmyk, et il accepte également les couleurs nommées standard en anglais comme entrée.
- Les entrées courantes incluent #00bfff, rgb(0, 191, 255), hsl(195, 100%, 50%), hwb(195 0% 0%), lch(...) et les noms de couleurs CSS.
- La liste de résultats affiche plusieurs formats à la fois, ce qui facilite le passage entre bases de code, outils de design et exigences de documentation.
- La sortie sous forme de nom correspond, lorsqu'elle existe, au nom de couleur CSS standard le plus proche. Traitez-la comme un libellé pratique, pas toujours comme un jeton de design exact.
Points à garder en tête
- La pipette dépend de la prise en charge de l'API EyeDropper par le navigateur. Si elle n'est pas disponible, le sélecteur de couleurs et la saisie manuelle restent utilisables.
- Le prélèvement à l'écran renvoie généralement une valeur hex sRGB. Profils d'affichage, mise à l'échelle, rendu du navigateur, compression, transparence et anticrénelage peuvent créer de légères différences avec un fichier de design.
- Les sélecteurs de couleurs natifs du navigateur ont une apparence différente selon le système et le navigateur, mais les valeurs converties sur la page utilisent le même flux d'analyse.
- Si votre entrée contient une transparence alpha, confirmez le format de sortie avant de l'utiliser dans un système cible qui doit conserver le canal alpha.
FAQ
Pourquoi le bouton pipette n'est-il pas disponible ?
La pipette dépend de l'API EyeDropper du navigateur. Certains navigateurs, modes privés ou anciennes versions ne la prennent pas en charge ; utilisez alors le sélecteur intégré ou la saisie manuelle.
Pourquoi la couleur prélevée diffère-t-elle de mon outil de design ?
Les causes fréquentes sont les profils couleur de l'écran, la mise à l'échelle du système, le rendu du navigateur, la compression d'image, les calques transparents et l'anticrénelage. Le prélèvement à l'écran est utile pour vérifier les pixels visibles, mais ne correspond pas toujours à la valeur originale gérée par l'outil de design.
Puis-je saisir directement des couleurs nommées CSS ?
Oui. Les noms de couleurs CSS standard comme deepskyblue ou rebeccapurple peuvent être analysés et convertis vers les formats de sortie pris en charge.
Cette page envoie-t-elle mon écran ou mes données de couleur ?
Non. La sélection, l'analyse et la conversion des couleurs s'exécutent dans votre navigateur. L'API EyeDropper renvoie la valeur de couleur choisie et ne téléverse pas de capture d'écran vers le serveur.