Palette de couleurs depuis une image

À propos de la construction d'une palette depuis une photo

Tout graphiste l'a fait : une photographie a exactement l'ambiance dont le projet a besoin, et le travail consiste à faire sortir cette ambiance de l'image pour la mettre dans une feuille de style.

Deviner ne marche pas. Une couleur qui passe pour un « gris chaud » à l'écran est rarement le gris que vous auriez tapé. La seule façon de tomber juste est de prendre le pixel réel.

Déposez la photo, promenez-vous dessus avec la loupe et cliquez les teintes voulues. Chacune rejoint votre palette en dessous, avec ses valeurs HEX, RGB et HSL prêtes à copier.

Comment l'utiliser

• Cliquez sur Cliquez pour envoyer, déposez une photo sur la page, ou collez l'URL d'une image
• Promenez le pointeur sur l'image — la loupe montre le pixel qui se trouve dessous
• Cliquez pour ajouter cette couleur à votre palette
• Prenez-en autant qu'il vous faut — cinq ou six font généralement une palette
• Cliquez un échantillon de votre palette pour y revenir : le grand échantillon et les valeurs HEX, RGB et HSL basculent dessus, et son HEX est copié
• Utilisez Copier le HEX / RGB / HSL pour prendre le format dont vous avez besoin

Pourquoi c'est vous qui choisissez les couleurs

Certains outils devinent une palette automatiquement en regroupant les couleurs les plus fréquentes. Cela paraît mieux que ce n'est. La couleur la plus *fréquente* d'une photographie est en général une grande zone terne — ciel, mur, ombre — alors que la teinte qui donne son caractère à l'image est souvent minuscule : la rouille sur une porte, le vert d'une seule feuille, un reflet sur une tasse.

Vous, vous voyez laquelle est laquelle. La loupe vous laisse prendre exactement ce pixel-là, au zoom maximal, pour que la palette soit celle que vous vouliez et non celle qu'une moyenne a produite.

La palette est un endroit où revenir

Les échantillons ne sont pas qu'un relevé de ce que vous avez cliqué. Cliquez-en un et il devient la couleur courante — le grand échantillon et les trois valeurs basculent dessus, et celui que vous regardez est cerclé pour que vous sachiez de quoi il s'agit.

C'est ce qui rend la comparaison de deux teintes praticable : prenez-les toutes les deux sur la photo, puis cliquez de l'une à l'autre en lisant les valeurs, au lieu de repartir en chasse dans l'image pour retrouver le pixel d'il y a une minute.

Trois formats, parce que les endroits ne veulent pas les mêmes

Chaque couleur choisie est affichée dans les trois à la fois :

• HEX — #3f7a5e. CSS, logiciels de création, presque partout
• RGB — rgb(63, 122, 94). Pratique quand vous avez besoin des canaux séparément
• HSL — hsl(154, 32%, 36%). Celui à utiliser pour bâtir une gamme : gardez la teinte, déplacez la clarté, et vous obtenez un clair et un foncé qui vont ensemble

À quoi cela sert

• Extraire une couleur de marque d'un logo quand personne ne retrouve la charte
• Bâtir une palette de site ou de présentation à partir d'une photo d'en-tête
• Assortir peinture, tissu ou fil à une photo de l'objet réel
• Obtenir le HEX exact d'une couleur dans une capture d'écran
• Trouver les couleurs d'une peinture ou d'une photo dont vous voulez vous inspirer
• Vérifier ce qu'une couleur est vraiment, plutôt que ce dont elle a l'air à côté d'une autre

Bon à savoir

• Rien n'est envoyé en ligne. L'image est lue dans la page et ne quitte jamais votre appareil
• Fonctionne avec PNG, JPG, GIF et WebP
• Vous pouvez coller l'URL d'une image au lieu d'un fichier — mais certains serveurs interdisent aux autres sites de lire leurs pixels (CORS). Dans ce cas, téléchargez l'image et envoyez le fichier
• Les couleurs sont lues sur les vrais pixels en taille réelle, pas sur l'aperçu réduit : la valeur est exacte
• Fonctionne sur téléphone et tablette comme sur ordinateur
• C'est la même pipette que Pipette à couleurs d'image — utilisez cette page-là quand vous ne voulez qu'une seule couleur

Outils liés

• Pipette à couleurs d'image — le même outil, tourné vers une couleur unique
• Sélecteur de couleur — choisir une couleur sur une roue plutôt que sur une photo
• Contraste des couleurs — vérifier que votre palette reste lisible avant de la livrer
• Générateur de dégradé CSS — mélanger deux de vos nouvelles couleurs
• Nuage de mots — un autre endroit où mettre une palette au travail