Color Picker : sélecteur de couleur

Comment utiliser le sélecteur de couleur

Faites glisser le cercle sur le grand carré pour choisir la nuance. À l’horizontale, la gauche est plus grise et la droite plus vive. À la verticale, le haut est plus clair et le bas plus sombre. La barre colorée juste en dessous change la teinte, qui est la couleur de base : rouge, jaune, vert, bleu et retour au rouge. À chaque mouvement, les cinq codes à côté se mettent à jour.

Si vous avez déjà le code, saisissez-le dans le champ HEX, avec 3, 4, 6 ou 8 chiffres et avec ou sans #. Le cercle se place sur cette couleur. Pour copier, cliquez sur l’icône à côté du format voulu. Au clavier, les flèches déplacent le cercle de 1 en 1 et, avec Maj, de 10 en 10.

Prendre la couleur d’une image

Cliquez sur Prendre dans une image, choisissez un fichier (PNG, JPEG, WebP, GIF ou tout ce que votre navigateur ouvre) puis cliquez ou faites glisser sur l’image. Le pixel sous le curseur devient la couleur actuelle, avec tous ses codes. C’est pratique pour retrouver le HEX du bleu d’un logo, d’une capture Figma ou d’une photo de référence.

Deux détails changent le résultat. En JPEG, la compression mélange les pixels voisins : la couleur peut s’écarter d’un ou deux points de l’originale, et mieux vaut le PNG quand il existe. Et sur une photo, chaque pixel est un point isolé : la couleur d’un mur varie d’un pixel à l’autre à cause de la lumière et du bruit. Cliquez sur quelques points de la même zone et gardez la valeur du milieu. Les images de plus de 1 600 pixels sur le grand côté sont réduites avant l’affichage, ce qui adoucit aussi les détails fins.

Pipette pour la couleur de n’importe quel point de l’écran

Le bouton Pipette utilise l’API EyeDropper : la page ouvre la loupe du navigateur et reçoit le HEX du pixel sur lequel vous cliquez, même hors de l’onglet, sur un autre site, dans une appli de design ou sur le bureau. D’après MDN (données vérifiées le 5 novembre 2026), elle fonctionne dans Chrome 95, Edge 95 et Opera 81 sur ordinateur, et n’existe ni dans Firefox, ni dans Safari, ni dans les navigateurs mobiles. Échap annule.

Là où l’API n’existe pas, le bouton n’apparaît même pas, et il reste les deux autres moyens : le carré de couleur et l’image. Un raccourci qui marche dans tous les navigateurs consiste à faire une capture de ce que vous voulez mesurer et à ouvrir le fichier avec Prendre dans une image.

Les cinq formats de couleur

Tous décrivent la même couleur. Ce qui change, c’est ce que chacun facilite à ajuster.

HSL et HSV se ressemblent mais ne se comportent pas pareil. En HSV, une luminosité de 100 % donne la couleur la plus vive et 0 % donne du noir. En HSL, une clarté de 50 % donne la couleur pure, 100 % du blanc et 0 % du noir. C’est pourquoi le même bleu s’écrit hsl(229 100% 66%) et hsv(229, 68%, 100%).

Le CMJN d’ici est la conversion mathématique directe depuis le RVB. Un vrai imprimeur travaille avec un profil colorimétrique (comme FOGRA39 ou SWOP), et le résultat change selon le papier et l’encre. Prenez la valeur comme point de départ et confirmez avec l’imprimeur.

Utiliser un sélecteur de couleur dans votre code

Si vous avez besoin d’un sélecteur dans une page à vous, le HTML en fournit déjà un. L’input type=color ouvre le sélecteur du système et renvoie la valeur en HEX minuscule, au format #rrggbb et sans transparence. L’événement input se déclenche à chaque mouvement, et change seulement quand la personne ferme le sélecteur.

<input type="color" id="cor" value="#5271ff" />

<script>
  const input = document.getElementById("cor");
  input.addEventListener("input", () => {
    document.body.style.backgroundColor = input.value; // "#5271ff"
  });
</script>

Pour prendre une couleur hors de la page, EyeDropper tient en quelques lignes. open() doit être appelé depuis un clic et rejette la promesse quand la personne appuie sur Échap, d’où le try/catch :

if ("EyeDropper" in window) {
  button.addEventListener("click", async () => {
    try {
      const { sRGBHex } = await new EyeDropper().open();
      console.log(sRGBHex); // "#5271ff"
    } catch {
      // a pessoa apertou Esc
    }
  });
}

La syntaxe CSS de tous ces formats se trouve dans la spécification CSS Color 4 du W3C.

Pour convertir et aller plus loin

Besoin de la valeur dans une autre syntaxe, avec transparence ou avec le calcul expliqué ? Utilisez le convertisseur HEX en RVB ou le convertisseur RVB en HEX. Les deux s’ouvrent avec la couleur choisie ici.