Pipette couleur image : HEX, RGB, HSL et palette

Chaque pixel d'une image numérique stocke une couleur sous forme de trois nombres : rouge, vert et bleu. Une pipette lit ces nombres à l'endroit choisi et les affiche dans les formats utilisés par les designers et les développeurs. Il devient facile de réutiliser une teinte exacte d'une photo, d'un logo ou d'une capture d'écran au lieu de l'estimer à l'œil.

L'œil se laisse facilement tromper par les couleurs voisines et la luminosité de l'écran : deux teintes qui semblent identiques peuvent avoir des codes très différents. Prélever directement dans le fichier supprime les approximations.

Trois façons d'écrire une couleur

Pour choisir entre HEX, RGB et HSL, rappelez-vous qu'ils décrivent la même couleur. HEX est un code compact de six caractères utilisé en web design et dans la plupart des outils de création. RGB indique les valeurs de rouge, vert et bleu de 0 à 255. HSL décrit la teinte, la saturation et la luminosité : c'est le format le plus simple pour éclaircir ou assombrir une couleur en CSS tout en gardant son caractère.

Ajoutez une image en la glissant dans la zone, en parcourant vos fichiers ou en collant une capture d'écran. Déplacez le pointeur sur l'image : la couleur sous le pointeur s'affiche en direct en dessous. Cliquez pour la prélever. La couleur choisie apparaît avec un grand échantillon et ses codes HEX, RGB et HSL, chacun avec son bouton de copie.

Chaque prélèvement s'ajoute à un court historique : vous pouvez réunir plusieurs couleurs d'une même image et les copier plus tard. Cliquez sur un échantillon de l'historique pour réafficher ses codes.

Copier un code

Pour obtenir rapidement le code HEX d'une image, zoomez dans le navigateur si la zone est petite, cliquez sur le pixel exact et appuyez sur Copier HEX. Le code commence par un dièse et fonctionne directement dans CSS, Figma, Canva et la plupart des autres outils.

Dès que vous ajoutez une image, l'outil analyse une petite copie et trouve ses couleurs dominantes par une méthode de regroupement. Jusqu'à huit couleurs apparaissent, triées selon la surface qu'elles couvrent. Cliquez sur l'une d'elles pour voir ses codes complets, ou copiez tout l'ensemble en liste de valeurs HEX ou en propriétés personnalisées CSS prêtes à coller dans une feuille de style.

Générer une palette à partir d'une photo est un moyen rapide de créer une gamme de couleurs déjà harmonieuse, car les couleurs proviennent d'une scène réelle : un coucher de soleil, une forêt ou une pièce bien décorée.

Travailler à partir de logos

Pour retrouver les couleurs d'une marque à partir d'un logo, utilisez le fichier d'origine plutôt qu'une capture d'écran ou une copie compressée, qui peuvent légèrement décaler les couleurs. Prélevez dans les aplats du logo plutôt que sur les bords, où les couleurs se mélangent avec le fond.

Chrome, Edge et les autres navigateurs Chromium sur ordinateur prennent en charge une pipette d'écran. Appuyez sur « Prélever une couleur n'importe où à l'écran » : le pointeur devient une loupe que vous déplacez sur n'importe quelle fenêtre, y compris d'autres applications. Cliquez pour prélever ou appuyez sur Échap pour annuler. C'est une pipette d'écran pratique quand la couleur voulue se trouve dans une vidéo, une application de design ou un site web.

Firefox et Safari ne proposent pas encore cette fonction : le bouton y est masqué et vous pouvez prélever dans une image importée. Sur téléphone, faites une capture d'écran, puis collez-la ou choisissez-la ici.

Photos ou aplats

Les photos contiennent du bruit et des dégradés : des pixels voisins peuvent légèrement différer. Pour une couleur représentative d'une photo, la palette est souvent meilleure qu'un pixel isolé, car elle fait la moyenne de pixels similaires. Pour les logos et les aplats, un simple clic est exact.

Profils de couleur et écrans

Les codes proviennent des données de l'image telles que votre navigateur les décode. Les images à gamut très large peuvent paraître légèrement différentes selon l'écran, mais ces codes sont ceux qu'il vous faut pour reproduire la couleur dans les outils web et de design.

Images compressées

Les JPEG très compressés créent des artefacts en blocs autour des contours. Prélevez au milieu d'un aplat, ou utilisez une version de meilleure qualité de l'image si elle existe.

Votre image reste dans la mémoire du navigateur ; rien n'est importé, journalisé ni stocké. Les fichiers JPG, PNG, WebP, GIF et BMP sont pris en charge, et les zones transparentes sont ignorées lors de la création de la palette.

L'outil est gratuit et illimité, n'ajoute aucun filigrane et n'utilise pas de crédits EnhancerPro. Pour transformer une palette en logo ou en icône, notre générateur de favicon et notre convertisseur d'image en SVG sont de bonnes étapes suivantes.

Utiliser les couleurs en CSS

Collez les codes HEX directement dans les propriétés de couleur, ou copiez la palette en variables CSS et référencez-les avec var(--color-1). Les valeurs HSL permettent de créer facilement des teintes plus claires en augmentant le pourcentage de luminosité.

Partez d'une couleur forte

La plupart des bonnes gammes partent d'une seule couleur principale, souvent issue d'un logo ou d'une photo clé. Prélevez-la ici, puis choisissez un neutre clair et un neutre foncé pour les fonds et le texte. Le HSL facilite la tâche : gardez la teinte et la saturation, puis augmentez la luminosité pour une teinte de fond ou baissez-la pour un accent profond.

Couleurs secondaires issues de la palette

La palette extraite contient généralement une ou deux couleurs vives et plusieurs couleurs sourdes. Les couleurs sourdes conviennent aux fonds, bordures et boutons secondaires, les vives aux appels à l'action et aux mises en avant. Comme elles viennent de la même image, elles s'accordent naturellement.

Vérifiez le contraste

Le texte doit être lisible par tous. Un texte foncé sur une teinte claire, ou blanc sur une couleur profonde, fonctionne généralement. Vérifiez les combinaisons importantes avec un outil de contraste avant de publier, surtout pour les boutons et les petits textes. Une couleur qui paraît forte sur une photo peut être trop claire pour du texte sur une page blanche.

Gardez une trace

Enregistrez les codes finaux dans une charte graphique ou en variables CSS. Copier la palette en propriétés personnalisées CSS vous donne un point de départ que vous pouvez renommer, par exemple primary, accent et surface, pour que chaque page de votre site utilise exactement les mêmes teintes.

Couleurs pour l'impression

Les couleurs d'écran utilisent le RGB, les imprimantes des encres CMJN. Les codes obtenus ici sont parfaits pour l'écran ; pour l'imprimé, demandez à votre imprimeur de les convertir ou de les faire correspondre à un nuancier imprimé, car certaines couleurs d'écran vives ne s'impriment pas exactement.

Partager des couleurs avec une équipe

Designers, développeurs et clients décrivent souvent les couleurs différemment : un code hexadécimal dans un fichier de design, une valeur RGB dans une présentation, une valeur HSL dans une feuille de style. Copier les trois depuis un même prélèvement évite les petits écarts qui apparaissent lors des conversions à la main. Collez les codes dans vos notes de projet avec l'image source, pour que chacun sache d'où vient chaque couleur et puisse la reprélever si la palette doit être ajustée.

Palettes de saison et d'ambiance

Les photos sont une excellente source d'ambiance. Des feuilles d'automne donnent des orangés et des rouges profonds, une plage des neutres sable et du turquoise, une ville la nuit des bleus profonds avec des accents néon. Extrayez des palettes de plusieurs images correspondant à l'ambiance voulue, puis gardez les couleurs qui reviennent souvent. Cet ensemble récurrent devient généralement une gamme forte et cohérente.