Sélecteur de couleur

Parcourez le carré pour choisir une couleur, ou prenez-en une qui existe déjà : sur une image à la pipette, ou n’importe où à l’écran là où le navigateur le permet. Le code apparaît aussitôt dans les trois notations.

Choisissez une couleur

Récents

Prélever une couleur n’importe où à l’écran est une fonction que seuls Chrome et Edge possèdent. Dans Safari et Firefox le bouton n’apparaît pas du tout : promettre puis refuser serait pire que ne rien proposer. Utilisez plutôt une image : une capture d’écran fait tout aussi bien l’affaire.

L’image reste dans cet onglet : la couleur est lue depuis un canevas ici même, rien n’est envoyé. Les couleurs récentes ne sont mémorisées que sur cet appareil.

À côté : Convertisseur de couleur · Générateur de palette de couleurs · Générateur de dégradé CSS · HEX en RGB

Comment faire

  1. Faites glisser sur le carré pour choisir la nuance, et le curseur dessous change la famille de couleur.
  2. Réglez l’opacité s’il vous faut une couleur semi-transparente : elle apparaîtra en rgba, ou en deux caractères de plus en HEX.
  3. Pour prendre une couleur existante, appuyez sur « Prélever sur une image » et cliquez sur la photo. Dans Chrome et Edge, vous pouvez aussi prélever à l’écran.
  4. Appuyez sur « Copier » à côté de la notation voulue. La couleur rejoint la bande des récentes, pour y revenir.

Bon à savoir

Pourquoi le carré repose sur HSV

En HSV, le carré saturation contre luminosité est rempli d’un bord à l’autre : chaque point est une couleur distincte. Construisez le même carré sur HSL et il dégénère — la rangée du haut est toute blanche, celle du bas toute noire, et la moitié de la surface ne choisit rien. C’est toute la raison de ce choix, et c’est précisément ce que garde le test.

Trois entrées, parce qu’on arrive avec des questions différentes

Choisir une couleur et retrouver une couleur sont deux tâches distinctes. Le carré sert à choisir. La pipette sur une image sert à une couleur qui existe déjà quelque part : une capture, un logo, une photo. Prélever à l’écran, c’est la même chose sans quitter la fenêtre, et seuls Chrome et Edge en sont capables.

Où apparaît la transparence

L’opacité n’est écrite que lorsqu’elle n’est pas totale : « rgb(31, 95, 214) » plutôt que « rgba(31, 95, 214, 1) », qu’on finit de toute façon par nettoyer à la main. En HEX, la transparence devient deux caractères de plus à la fin : les navigateurs actuels le comprennent, les vieux outils non — à opacité pleine, la queue n’est donc pas écrite.

Questions fréquentes

Pourquoi n’y a-t-il pas de bouton « prélever à l’écran » dans mon navigateur ?

Parce que Safari et Firefox ne savent pas le faire. C’est une fonction du navigateur, pas la nôtre, et seuls Chrome et Edge la possèdent. Afficher le bouton puis refuser serait pire que ne rien proposer : il n’est donc simplement pas là. Faites une capture d’écran et travaillez sur l’image, le résultat est identique.

Comment connaître la couleur d’un pixel sur une photo ?

Appuyez sur « Prélever sur une image », choisissez le fichier et déplacez le pointeur sur la photo : la couleur suit le pointeur. Cliquez pour la garder. L’image n’est envoyée nulle part : elle est dessinée sur un canevas dans cet onglet et lue depuis là.

Puis-je saisir une couleur au lieu de la choisir ?

Oui. Saisissez-la dans l’un des trois champs sous n’importe quelle forme courante — #1f5fd6, 1f5fd6, rgb(31, 95, 214) — et les deux autres se remplissent d’eux-mêmes, avec le carré. S’il ne s’agit que de convertir d’une notation à l’autre, le convertisseur de couleur voisin est le chemin le plus court.

Le curseur de teinte saute quand je descends la luminosité à zéro.

Il ne devrait pas, et il ne le fait pas : le noir et le blanc n’ont pas de teinte, le curseur conserve donc la précédente au lieu de filer vers le rouge. C’est volontaire : sinon, chaque passage en bas du carré ferait perdre la famille de couleur dans laquelle vous travailliez.

Où sont conservées les couleurs récentes ?

Sur cet appareil, dans le navigateur. Elles ne partent nulle part et ne vous identifient pas : effacez les données du site et la bande est de nouveau vide.

Outils similaires