Mode d'emploi
- Cliquez sur Choisir une photo ou déposez une image dans le cadre. La photo est lue sur votre appareil.
- Choisissez le Nombre de couleurs, de 5 à 10. Une photo chargée demande davantage de couleurs.
- Lisez chaque couleur : son code hexadécimal, ses valeurs RVB et TSL et sa part de l'image. Cliquez sur le bouton de copie à côté d'une couleur pour copier son code hexadécimal.
- Sous Exporter la palette, utilisez Copier en variables CSS, Copier sous forme de liste ou Télécharger les échantillons (PNG).
Comment les couleurs sont trouvées
Chaque pixel est converti en CIE L*a*b*, un espace de couleurs dans lequel la distance entre deux couleurs est proche de la différence visible par l'œil. Les pixels sont ensuite regroupés en le nombre de couleurs choisi par classification k-means, qui place le centre de chaque groupe de façon que les pixels soient aussi proches que possible de leur centre.
Les centres de départ sont choisis avec la méthode k-means++, avec une graine fixe ; la même photo donne donc toujours la même palette. Chaque couleur est la moyenne des pixels de son groupe, et sa part est le nombre de ces pixels divisé par le nombre total de pixels.
Pixel → (L*, a*, b*)
Groupes : chaque pixel rejoint le centre le plus proche ; les centres sont les moyennes de leurs pixels
Couleur = RVB moyen du groupe ; part = pixels du groupe ÷ total des pixels- La photo est analysée sous forme de copie d'environ 2 mégapixels au plus, ce qui garde les grandes photos rapides.
- Des teintes très proches peuvent partager une même couleur. Une palette de 10 peut scinder une couleur en deux lorsqu'une photo en contient de nombreuses nuances.
Codes, parts et ce qu'ils signifient
Le code hexadécimal est la couleur écrite en trois paires de chiffres hexadécimaux pour le rouge, le vert et le bleu ; les valeurs RVB sont les mêmes nombres en décimal. La TSL donne la teinte comme un angle autour de la roue chromatique (0 pour le rouge, 120 pour le vert, 240 pour le bleu), la saturation comme son intensité et la luminosité comme son degré de clarté.
La part est la fraction des pixels de l'image qui appartiennent à une couleur, c'est-à-dire la surface qu'elle couvre. Une petite tache vive peut être une couleur de faible part, et un grand fond doux peut former une grande part faite de plusieurs nuances voisines.
- Copiez les variables CSS pour utiliser les couleurs dans une page web ou un projet graphique : chaque couleur devient --color-1, --color-2, et ainsi de suite.
- La bande PNG sert à un tableau d'inspiration ou à une impression : un échantillon par couleur, avec son code hexadécimal dessous.
Exemple travaillé : des blocs de rouge, de bleu et de vert
Une image test de 50 pixels rouges, 30 bleus et 20 verts donne exactement trois couleurs, car chaque bloc est une couleur unie. Demandez-en six : l'outil n'en renvoie que trois, sans inventer de couleurs.
La liste est classée de la plus grande part à la plus petite, et chaque code est la couleur exacte de son bloc.
| Couleur | Hexadécimal | RVB | TSL | Part |
|---|---|---|---|---|
| Rouge | #FF0000 | rgb(255, 0, 0) | hsl(0, 100 %, 50 %) | 50,0 % |
| Bleu | #0000FF | rgb(0, 0, 255) | hsl(240, 100 %, 50 %) | 30,0 % |
| Vert | #00FF00 | rgb(0, 255, 0) | hsl(120, 100 %, 50 %) | 20,0 % |
Questions fréquentes
Les couleurs sont-elles exactes par rapport à la photo ?
Une zone unie donne sa couleur exacte. Une photo à dégradés donne la moyenne de chaque groupe, ce qui résume bien l'image sans reprendre chaque nuance.
Pourquoi la palette reste-t-elle la même à chaque fois ?
La classification part d'une graine fixe ; la même photo et le même nombre de couleurs donnent donc toujours la même palette. Changer la photo ou le nombre de couleurs modifie le résultat.
Combien de couleurs choisir ?
Cinq couleurs captent l'ambiance principale de la plupart des photos. Prenez de 8 à 10 pour une image chargée ou lorsque vous avez besoin de davantage de nuances pour un tableau ou un projet graphique.
Ma photo est-elle envoyée quelque part ?
Non. La photo est lue par votre navigateur, la palette est calculée sur votre appareil, et rien n'est envoyé.
Quelle différence entre hexadécimal, RVB et TSL ?
Ils décrivent la même couleur de trois façons : l'hexadécimal et le RVB donnent les quantités de rouge, de vert et de bleu, en hexadécimal et en décimal. La TSL décrit la teinte, la saturation et la luminosité, ce qui se règle plus facilement à l'œil.
Sources
- Wikipédia (en anglais) : K-means++, Arthur et Vassilvitskii, 2007, initialisation soignée des k-means
- Wikipédia (en anglais) : CIELAB colour space, L*a*b*, point blanc D65
Chiffres et texte vérifiés pour la dernière fois le mardi 10 novembre 2026.