Extraire la palette de couleurs d’une image

Qu’est-ce qu’une palette de couleurs ?

Une palette de couleurs est le petit ensemble de teintes qui définit l’apparence d’une image ou d’une marque. Extraire la palette d’une photo permet de réutiliser exactement ces couleurs dans une création, un site, une présentation ou la décoration d’une pièce, pour un résultat cohérent et harmonieux.

Graphistes, développeurs web, créateurs de contenu et tous ceux qui veulent associer des couleurs avec assurance utilisent ce type d’outil au quotidien : pour bâtir l’identité d’un projet à partir d’une photo inspirante, pour accorder un site aux couleurs d’un logo, ou simplement pour connaître le code d’une couleur précise.

Comment extraire les couleurs d’une image

1. Ajoutez l’image en la faisant glisser dans la zone ci-dessus, en la choisissant ou en la collant avec Ctrl+V.
2. Consultez la palette : les couleurs dominantes apparaissent, triées selon la part de l’image qu’elles occupent.
3. Réglez le nombre de couleurs avec le curseur, entre 3 et 12.
4. Cliquez sur une couleur pour copier son code HEX. Vous pouvez aussi copier toute la palette, la copier sous forme de variables CSS ou la télécharger en image PNG.
5. Utilisez la pipette : cliquez n’importe où sur l’image pour obtenir la couleur exacte de ce pixel.

Comment les couleurs sont calculées

Pasafoto analyse les pixels de l’image et applique l’algorithme de coupe médiane (median cut), la même idée que de nombreux logiciels de retouche utilisent pour réduire les couleurs. Il regroupe les teintes proches et fait la moyenne de chaque groupe : la palette reflète donc les couleurs réellement présentes dans la photo et la place que chacune occupe. Les zones transparentes sont ignorées, ce qui fonctionne bien avec les logos en PNG.

HEX, RGB et CSS

• HEX (#1E40AF) : le format le plus utilisé en design web et dans des outils comme Figma ou Canva.
• RGB (rgb(30, 64, 175)) : la quantité de rouge, de vert et de bleu, de 0 à 255.
• Variables CSS : le bouton « Copier CSS » génère un bloc :root prêt à coller dans votre feuille de style.

Privé et gratuit

L’image est analysée dans votre navigateur et n’est jamais envoyée à un serveur. Vous pouvez l’utiliser avec des créations confidentielles, des photos personnelles ou des fichiers clients en toute tranquillité.

Idées pour utiliser votre palette

Une règle classique du design est la règle des 60-30-10 : une couleur dominante pour 60 % de la surface (fonds), une secondaire pour 30 % (blocs, cartes) et une couleur d’accent pour 10 % (boutons, liens). Extrayez 5 ou 6 couleurs d’une photo qui vous inspire et répartissez les rôles ainsi. Vérifiez aussi le contraste entre le texte et le fond pour garantir la lisibilité : les couleurs très claires servent de fond et les foncées de texte. Si vous partez d’un logo, extrayez seulement 3 ou 4 couleurs pour obtenir les couleurs exactes de la marque.