Comment prélever une couleur exacte sur une image : HEX, RGB et HSL

Pour obtenir la couleur exacte d'une image, lisez la valeur d'un seul pixel plutôt que de l'estimer à l'œil. Ouvrez l'image dans la pipette couleur, placez le curseur sur le point voulu, cliquez, puis copiez le code HEX. La valeur obtenue est celle enregistrée pour ce pixel : elle reste la même chaque fois que vous prélevez le même point dans le même fichier.

Pipette couleur d'imageBesoin du code couleur exactEssayer gratuitement

Ce que stocke un pixel

Chaque pixel est un minuscule carré de couleur. Sur un écran ou dans un fichier image, il est enregistré sous forme de trois nombres, pour le rouge, le vert et le bleu, compris chacun entre 0 et 255. Le rouge pur correspond à 255, 0, 0. Ces trois nombres portent la même information quel que soit le format, si bien qu'une même couleur peut s'écrire de plusieurs façons.

HEX, RGB et HSL

• HEX écrit chaque nombre en hexadécimal, sur deux caractères par canal. #FF0000 est le rouge pur. Les pages web, le CSS et la plupart des outils de design l'utilisent.
• RGB écrit les mêmes nombres en décimal, sous la forme rgb(255, 0, 0). Il s'agit de la même couleur que le code HEX.
• HSL décrit la couleur telle qu'on en parle au quotidien. La teinte est l'angle sur le cercle chromatique, la saturation indique l'intensité de la couleur, et la luminosité dit si elle est claire ou foncée. hsl(0, 100%, 50%) est le rouge pur.

Utilisez HEX lorsque vous collez une couleur dans du code, RGB lorsqu'un outil le demande, et HSL lorsque vous voulez une version plus claire ou plus foncée de la même teinte. En modifiant uniquement la luminosité dans HSL, vous conservez la teinte, ce qui est plus difficile à faire à la main avec HEX. Pour vérifier le contraste entre deux couleurs, consultez HEX, RGB, HSL, CMYK et contraste.

Voici une couleur utilisée dans une feuille de style :

.badge {
  background: #1F7A5C;
  color: #FFFFFF;
}

Pourquoi le code peut ne pas correspondre à l'écran

• L'image est compressée. Le JPEG économise de la place en lissant les détails fins, si bien que les pixels proches d'un contour peuvent légèrement différer de la couleur que vous voyez au centre d'une zone.
• Les contours se mélangent. Là où deux couleurs se rencontrent, les pixels intermédiaires sont des mélanges. Ils ne constituent pas une couleur à part entière.
• Les profils colorimétriques diffèrent. La pipette lit les valeurs décodées par le navigateur, qui sont en sRGB. Une photo enregistrée avec un profil à gamme étendue peut apparaître différemment dans d'autres logiciels.
• La mise à l'échelle mélange les pixels. Une capture d'écran réalisée à une taille d'affichage mise à l'échelle peut contenir des pixels mélangés. Faites la capture en taille réelle lorsque c'est possible.
• Les très grandes images sont lues sur une copie. Les images dont le plus grand côté dépasse 6000 pixels sont lues à partir d'une copie de 6000 pixels, si bien qu'un pixel peut différer légèrement du fichier en taille réelle.

Prélever au centre d'une zone unie

Repérez une zone d'une seule couleur, puis placez-vous au centre. La loupe affiche les 11 sur 11 pixels autour du curseur, ce qui vous permet de voir si le point est mélangé ou uni. Au clavier, déplacez le réticule d'un pixel à la fois avec les touches fléchées, ou de dix pixels à la fois avec Maj, puis appuyez sur Entrée pour prélever. Vérifiez l'affichage avant de le copier.

Utiliser la palette pour un jeu de couleurs

Une photo ne contient que rarement une seule couleur qui vous intéresse. La palette affiche jusqu'à six de ses couleurs principales. Elle fonctionne en arrondissant chaque pixel à 16 niveaux par canal, en comptant les groupes obtenus, puis en conservant les groupes les plus fréquents qui diffèrent les uns des autres. Chaque échantillon affiche la moyenne de son groupe. Cliquez sur un échantillon pour copier son code HEX. Considérez la palette comme un point de départ, car il s'agit d'une moyenne et non d'une couleur de marque mesurée.

Convertir d'un format à l'autre

Si un outil de design demande un autre format, collez le code HEX dans un convertisseur de couleurs. Il convertit entre HEX, RGB et HSL sans modifier la couleur, si bien que le résultat correspond au code que vous avez prélevé.

Derniers prélèvements et confidentialité

L'outil garde vos derniers prélèvements sur la page afin que vous puissiez les comparer. Ils ne vivent que dans la mémoire de cet onglet et disparaissent lorsque vous le fermez. L'image elle-même est lue dans votre navigateur et n'est jamais envoyée à un serveur.

Comment faire avec fixmint

1. Ouvrez la pipette couleur d'image et déposez la photo.
2. Placez le curseur sur le point voulu. Ou sélectionnez l'image et utilisez les touches fléchées pour déplacer le réticule d'un pixel à la fois, en maintenant Maj pour avancer de dix pixels.
3. Cliquez, ou appuyez sur Entrée, pour prélever la couleur. Vérifiez l'affichage avant de la copier.
4. Utilisez le bouton Copier à côté de HEX, RGB ou HSL pour copier la valeur dont vous avez besoin.
5. Si un outil de design demande un autre format, collez la valeur dans le convertisseur de couleurs.

Réponses rapides

Pourquoi la couleur paraît-elle différente sur mon écran ? Votre écran affiche une version gérée par profil colorimétrique et mise à l'échelle du fichier. Prélevez au centre d'une zone unie et comparez le code HEX avec un échantillon connu.

Quel format dois-je copier ? HEX pour les pages web et la plupart des outils de design. Utilisez RGB ou HSL lorsqu'un outil les demande.

L'outil envoie-t-il mon image ? Non. L'image est décodée et lue dans votre navigateur.