Extraire une palette de couleurs d’une image

Comment les couleurs sont choisies

Une photo peut contenir des centaines de milliers de couleurs légèrement différentes. Pour trouver les quelques-unes qui la décrivent, l’extracteur réduit d’abord l’image à 180 pixels sur son grand côté, ce qui garde les couleurs d’ensemble et écarte le bruit. Il regroupe ensuite les couleurs proches avec la coupe médiane, une méthode classique qui divise l’ensemble des couleurs là où il est le plus étalé, jusqu’à obtenir autant de groupes que demandé. Chaque groupe devient une pastille : la moyenne des couleurs qu’il contient.

Deux nettoyages suivent. Les groupes qui paraissent presque identiques à l’œil sont fusionnés, mesurés dans OKLab, un espace colorimétrique conçu pour coller à la perception humaine : les bords adoucis d’un logo à trois couleurs n’apparaissent donc pas comme des teintes en plus. Les groupes couvrant moins de 0,4 % de l’image sont écartés. Les pixels transparents sont entièrement ignorés.

Lire le résultat

Les pastilles sont classées par surface : la première est la couleur qui couvre le plus l’image. C’est souvent un fond, un ciel ou un mur plutôt que la couleur qui attire l’œil. Un petit sac rouge dans une rue grise peut arriver en dernier, ou pas du tout. Augmentez le nombre de couleurs pour attraper les petites touches, et activez Ignorer le presque blanc pour les produits photographiés sur fond blanc, ou Ignorer le presque noir pour les photos de nuit et les fonds sombres.

Moins de couleurs donnent des pastilles plus larges et plus générales ; plus de couleurs les divisent en nuances. Cinq ou six conviennent à une planche d’ambiance ou au thème d’un site ; dix ou douze à l’assortiment d’une peinture ou d’un tissu avec une photo.

Utiliser les couleurs

• HEX, comme #3a7d44, est ce qu’attendent la plupart des outils de design et des sites web.
• RGB donne la même couleur sous forme de trois nombres de 0 à 255.
• HSL décrit la teinte, la saturation et la luminosité, ce qui permet de créer facilement à la main une version plus claire ou plus foncée.
• OKLCH est le format CSS moderne : des pas de luminosité égaux paraissent également différents, c’est donc la meilleure base pour une série de teintes.

Cliquez sur une pastille pour la copier, utilisez Tout copier pour la liste entière, ou Variables CSS pour un bloc à coller dans une feuille de style. Plusieurs images peuvent être traitées à la fois ; le ZIP contient, pour chacune, une bande de pastilles légendées sous forme d’image, un fichier JSON et le CSS.

Des couleurs pour le texte et les boutons

Une palette tirée d’une photo s’accorde bien, mais toutes les paires ne sont pas lisibles. Le texte a besoin d’un fort contraste avec son fond : la recommandation habituelle pour le texte courant est un rapport de contraste d’au moins 4,5 pour 1. Utilisez la pastille la plus foncée ou la plus claire pour le texte, et gardez les tons moyens pour les fonds, les bordures et les accents.

En cas de problème

• La couleur principale du sujet manque. Elle couvre trop peu de l’image. Augmentez le nombre de couleurs, ou recadrez d’abord sur le sujet avec recadrer une image.
• Deux pastilles se ressemblent. Baissez le nombre de couleurs ; l’image n’en a pas autant de distinctes.
• Il indique qu’il n’y a aucun pixel visible. L’image est entièrement transparente, ou chaque pixel a été ignoré comme presque blanc ou presque noir. Désactivez ces options.