ximg.es

Paleta de cores dunha imaxe

Sobe unha imaxe, ou escolle unha foto ao chou, e obtén as súas cores principais listas para o teu CSS. Todo se calcula no teu navegador.

Imaxe da que se extrae a paleta
Ou proba cunha foto ao chou de…

Formato

Como se calcula a paleta

A imaxe redúcese a uns 96 píxeles de lado e as súas cores agrúpanse con k-means: o algoritmo busca as N cores que mellor representan todos os píxeles. A agrupación faise no espazo OKLab, que mide as diferenzas como as percibe o ollo; en RGB, dous verdes moi distintos poden parecer «próximos» e dous grises case iguais, afastados. O punto de partida non é aleatorio, así que a mesma imaxe dá sempre a mesma paleta.

Cor media e cores dominantes

Non son o mesmo. As cores dominantes son as que máis superficie ocupan; a cor media é a mestura de todas, coma se a imaxe se reducise a un píxel. A media adoita ser un ton apagado que non aparece tal cal na foto, pero é o mellor fondo de carga: parécese ao conxunto da imaxe e non destaca cando chega a foto. É a mesma cor que o xerador de ximg.es garda para cada foto do seu banco.

Ideas para usar a paleta

Se vas poñer texto sobre algunha das cores, comproba antes o contraste co comprobador WCAG.

Preguntas frecuentes

Como saco as cores dunha imaxe?

Sobe a imaxe ou arrástraa aquí. A ferramenta calcula as súas cores principais e dáchas en HEX, RGB ou HSL, coa porcentaxe da imaxe que ocupa cada unha.

Súbese a miña imaxe a algún servidor?

Non. Os píxeles lense con canvas no teu navegador; a imaxe non sae do teu equipo.

Que diferenza hai entre cor dominante e cor media?

A dominante é a que máis superficie ocupa; a media é a mestura de todos os píxeles. A media funciona mellor como fondo mentres carga a imaxe.

Por que non sae exactamente a cor que vexo na foto?

Cada cor da paleta é a media dun grupo de píxeles parecidos, así que suaviza os matices. Se precisas un píxel exacto, usa unha pipeta.

Cantas cores convén extraer?

Entre cinco e seis abondan para unha paleta de web. Con máis aparecen variacións do mesmo ton.

Podo usar a paleta en Tailwind?

Si: copia o JSON ou as variables CSS e úsaas en theme.extend.colors ou como var(--color-1).

Máis ferramentas

Ver todas as ferramentas · Xerador de imaxes placeholder