ximg.es

Paleta de colors d’una imatge

Puja una imatge, o tria una foto a l’atzar, i obtén-ne els colors principals a punt per al teu CSS. Tot es calcula al teu navegador.

Imatge de la qual s’extreu la paleta
O prova amb una foto a l’atzar de…

Format

Com es calcula la paleta

La imatge es redueix a uns 96 píxels de costat i els seus colors s’agrupen amb k-means: l’algorisme busca els N colors que representen millor tots els píxels. L’agrupació es fa a l’espai OKLab, que mesura les diferències com les percep l’ull; en RGB, dos verds molt diferents poden semblar «propers» i dos grisos gairebé iguals, llunyans. El punt de partida no és aleatori, així que la mateixa imatge dona sempre la mateixa paleta.

Color mitjà i colors dominants

No són el mateix. Els colors dominants són els que ocupen més superfície; el color mitjà és la barreja de tots, com si la imatge es reduís a un píxel. El mitjà sol ser un to apagat que no apareix tal qual a la foto, però és el millor fons de càrrega: s’assembla al conjunt de la imatge i no destaca quan arriba la foto. És el mateix color que el generador d’ximg.es desa per a cada foto del seu banc.

Idees per fer servir la paleta

Si hi has de posar text a sobre, comprova abans el contrast amb el comprovador WCAG.

Preguntes freqüents

Com trec els colors d’una imatge?

Puja la imatge o arrossega-la aquí. L’eina en calcula els colors principals i te’ls dona en HEX, RGB o HSL, amb el percentatge de la imatge que ocupa cadascun.

Es puja la meva imatge a algun servidor?

No. Els píxels es llegeixen amb canvas al teu navegador; la imatge no surt del teu equip.

Quina diferència hi ha entre color dominant i color mitjà?

El dominant és el que ocupa més superfície; el mitjà és la barreja de tots els píxels. El mitjà funciona millor com a fons mentre es carrega la imatge.

Per què no surt exactament el color que veig a la foto?

Cada color de la paleta és la mitjana d’un grup de píxels semblants, així que suavitza els matisos. Si necessites un píxel exacte, fes servir un comptagotes.

Quants colors convé extreure?

Entre cinc i sis n’hi ha prou per a una paleta de web. Amb més apareixen variacions del mateix to.

Puc fer servir la paleta a Tailwind?

Sí: copia el JSON o les variables CSS i fes-les servir a theme.extend.colors o com a var(--color-1).

Més eines

Veure totes les eines · Generador d'imatges placeholder