Nouplo

Palette de couleurs d’une image

Les couleurs principales de l’image, en codes hex.

Déposez vos fichiers ici

ou cliquez pour les choisir sur votre appareilFormats acceptés : JPG, JPEG, PNG, WEBP, AVIF, GIF, BMP, HEIC, HEIF

Un fichier par opérationJusqu'à 20 Mo par fichier5 opérations par jourSupprimer les limites avec Pro✓ Fonctionne hors ligne

Vos fichiers restent sur votre appareil

Cet outil fonctionne entièrement dans votre navigateur. Rien n'est envoyé, rien n'est stocké, et vous pouvez même couper votre connexion internet avant de commencer.

Exemple

Exemple : les couleurs d’une affiche de soirée sur la plage, pour le programme de l’été

Le comité des fêtes reprend les couleurs de son affiche de soirée sur la plage pour le programme et la page web. L’illustration est un PNG de 800 × 600 px en aplats : ciel orange sur les 240 px du haut, mer bleu pétrole sur les 150 px du milieu, sable beige sur les 210 px du bas. Réglage : 5 couleurs principales.

Exemple : les couleurs d’une affiche de soirée sur la plage, pour le programme de l’été
  1. L’image est réduite à 240 px de large pour l’analyse, puis ses pixels sont regroupés par couleur et classés par part.
  2. Les mélanges le long des limites entre deux aplats ne comptent pas comme des couleurs : il ne reste que celles qui pèsent vraiment.
Couleur Hex RGB Part de l’image
Orange du ciel #F6A04Drgb(246, 160, 77)40 %
Beige du sable #F1D7A7rgb(241, 215, 167)35 %
Bleu de la mer #1F6F8Brgb(31, 111, 139)25 %

Trois couleurs au lieu des cinq demandées : l’affiche n’en a pas plus. On obtient affiche-couleurs.txt, une ligne par couleur, et affiche-palette.png, une colonne par couleur aussi large que sa part. Pour écrire sur le beige, le bleu donne un contraste de 4,05:1, bien pour un titre ; l’orange, 1,49:1, ne se lit pas.

Comment ça marche

  1. Ajoutez l’image — une photo, la capture d’un site qui vous plaît, un tableau.
  2. Choisissez combien de couleurs. Cinq, c’est une palette ; douze, cela devient un inventaire.
  3. Lisez la liste. Chaque couleur vient avec son code hexadécimal, prêt à coller.
  4. Cliquez n’importe où dans l’image pour la couleur exacte de ce pixel — c’est ce qu’il vous faut pour retrouver une couleur de marque.

Questions fréquentes

Comment les couleurs principales sont-elles choisies ?
En regroupant tous les pixels par couleur et en prenant les plus gros groupes : vous obtenez ce dont l’image est faite, pas ce qui ferait joli. Une photo de forêt rend beaucoup de verts, parce qu’elle est faite de beaucoup de verts.
Pourquoi la couleur cliquée diffère-t-elle un peu ?
Parce que vous prenez un pixel, et que la compression JPEG déplace les pixels un à un. Cliquez au milieu d’une zone unie plutôt que près d’un bord ; un PNG répond plus juste qu’un JPEG.
Puis-je obtenir du RGB ou du HSL ?
Le RGB est déjà là : chaque ligne donne le code hex, le rgb(…) et la part de l’image. Pour du HSL ou une variable CSS, collez le code hex dans notre convertisseur de couleurs.
Pourquoi moins de couleurs que demandé ?
Parce qu’aucune couleur n’est inventée : une image en trois aplats en donne trois. Une teinte qui couvre moins de 2 % de l’image et n’est qu’un mélange de deux autres, comme le long d’un bord, est rendue à la plus proche ; une petite couleur à part, comme un point rouge, est gardée. Une photo remplit en général toutes les places.
L’image est-elle envoyée ?
Non. Elle est lue pixel par pixel dans votre navigateur et n’est envoyée nulle part.

Outils associés