Paleta de colors a partir d'una imatge

Com extreure una paleta de colors d’una imatge

1. Deixa una imatge a la zona de càrrega, o fes-hi clic per triar un fitxer. Funcionen els JPG, PNG, WebP, GIF i qualsevol altre format que el teu navegador pugui mostrar.
2. L’eina analitza la imatge a l’instant i mostra els seus Colors dominants, ordenats del més present al menys present.
3. Ajusta el Nombre de colors (de 3 a 12) per obtenir una paleta més àmplia o més ajustada. Desmarca Ignora els píxels blancs i gairebé blancs si el blanc és un color important de la teva imatge, per exemple un producte blanc o la neu.
4. Copia un color amb el botó Copia que hi ha sota la seva mostra, o tria un format a Exporta com a (Llista HEX, Variables CSS, Variables SCSS, Matriu JSON o Colors de Tailwind) i fes clic a Copia o Baixa per a tota la paleta. Extreu els colors torna a executar l’anàlisi.

El teu navegador llegeix la imatge localment. No es puja mai a cap servidor.

Com es troben els colors dominants

Primer, la imatge es dibuixa en un canvas invisible, reduïda perquè el costat més llarg faci com a màxim 512 píxels. Això manté l’anàlisi àgil sense canviar els colors generals. Després, els píxels s’agrupen amb un algorisme de quantització (tall de la mediana modificat, de la biblioteca de codi obert Color Thief) que treballa a l’espai de color OKLCH, de manera que els colors que a l’ull semblen iguals acaben al mateix grup.

Cada grup es converteix en un color de la paleta, i el percentatge que hi ha sota cada mostra és la seva part dels píxels mostrejats. La barra que hi ha damunt de les mostres mostra aquestes proporcions d’un cop d’ull. Els píxels transparents s’ometen, i també els blancs i gairebé blancs mentre l’opció estigui marcada, perquè els fons blancs llisos dominarien altrament la majoria de fotos de productes i captures de pantalla.

Cada mostra indica el seu codi HEX en negre o en blanc, el que es llegeixi millor, de manera que l’etiqueta continua sent llegible tant sobre colors clars com foscos.

Idees per aprofitar la paleta d’una imatge

• Imatge de marca i disseny web: construeix el tema d’un lloc web a partir d’una foto principal o d’un logotip perquè la interfície combini amb la imatge.
• Presentacions i xarxes socials: tria colors de text i de fons que lliguin amb una imatge de portada.
• Interiorisme, moda i art: capta l’ambient d’una foto, d’una pintura o d’una mostra de teixit.
• Visualització de dades: agafa els colors dels gràfics d’una il·lustració que s’utilitza al mateix informe.

Els colors extrets són mitjanes de molts píxels, de manera que poden semblar una mica menys vius que el punt més saturat de la foto. Si necessites el color exacte d’un píxel concret, fes servir un selector de colors d’imatge.