Extracteur de palette de couleurs

Tirez de n’importe quelle image une palette de couleurs prête à l’emploi, avec les codes HEX.

Fonctionne dans votre navigateur
Aucun envoi de fichier
Aucun compte

Chargement de l'outil dans votre navigateur…

Ce que fait Extracteur de palette de couleurs

Au lieu de choisir les couleurs pixel par pixel, l’extracteur regroupe tous les pixels de l’image dans le nombre de couleurs choisi, de 3 à 12, et les liste de la plus à la moins fréquente. Chaque carte affiche le code HEX, les valeurs RGB et le pourcentage de l’image couvert.

Deux boutons de copie facilitent la réutilisation : Copier tous les HEX donne une liste séparée par des virgules, et Copier en CSS donne des variables --color-1 à --color-n dans un bloc :root. Activez Ignorer le blanc, le noir et le gris pour écarter les fonds de page et le texte et faire ressortir les couleurs d’accent. La même image donne toujours la même palette.

Exemple

Vous choisissez

Une image de 1000 × 200 px composée de quatre bandes unies : #3157D5 (40 %), #ED6C50 (30 %), #2BAE84 (20 %), #16181D (10 %)
Nombre de couleurs : 4

Copier en CSS donne

:root {
  --color-1: #3157D5;
  --color-2: #ED6C50;
  --color-3: #2BAE84;
  --color-4: #16181D;
}

Avec quatre couleurs unies et quatre emplacements, chaque bande devient une pastille, classée selon sa part d’environ 40 %, 30 %, 20 % et 10 %.

Mode d'emploi : Extracteur de palette de couleurs

Cliquez sur Choisir un fichier ou collez l’image.
Réglez le Nombre de couleurs, et activez Ignorer le blanc, le noir et le gris pour les captures d’interface.
Cliquez sur Copier tous les HEX, Copier en CSS, ou Copier sur une couleur.

Bon à savoir

Les couleurs de la palette sont des moyennes de groupes de pixels : une couleur peut donc ne pas exister exactement dans l’image. Utilisez le Sélecteur de couleur pour captures d’écran pour un pixel exact.
Les petits accents, comme un lien fin à la couleur de la marque, peuvent être absorbés par un groupe plus grand. Augmentez le Nombre de couleurs pour les séparer.
Les pixels transparents ou presque transparents sont ignorés : le fond d’un logo n’apparaît donc pas dans sa palette.

Questions sur Extracteur de palette de couleurs

Comment obtenir une palette de couleurs à partir d’une image ?

Chargez l’image et la palette apparaît dessous, triée selon la part de l’image couverte par chaque couleur. Modifiez le Nombre de couleurs pour obtenir plus ou moins de pastilles, puis copiez les codes HEX ou les variables CSS.

Combien de couleurs doit contenir une palette ?

Cinq ou six est habituel pour une palette d’interface ou de marque : un fond, une surface, le texte, une couleur principale et un ou deux accents. Utilisez 8 à 12 pour les photos ou illustrations dont vous voulez toute la gamme.

Pourquoi ma palette affiche-t-elle surtout du blanc et du gris ?

Les captures d’applications sont surtout composées de fond et de texte. Activez Ignorer le blanc, le noir et le gris pour écarter les pixels quasi blancs, quasi noirs et gris, afin que les couleurs de marque et d’accent remontent en tête.