Zakaj smo izbirniku barv dodali samodejno izluščanje palete

Naš izbirnik barv ti je od nekdaj omogočal, da naložiš sliko in klikneš kateri koli piksel ter dobiš njegovo natančno vrednost HEX, RGB in HSL. To odgovori na vprašanje »kakšne barve je ta konkretna točka?« — koristno, ampak to ni vprašanje, ki si ga večina ljudi zastavlja, ko naloži fotografijo. Običajno je vprašanje »kakšna je celotna barvna shema te slike?« — recimo izluščiti paleto blagovne znamke iz logotipa ali ujeti vzdušje referenčne fotografije za barvno shemo spletne strani.

Vzorčenje posameznih pikslov na to ne more odgovoriti. Zato smo dodali izluščanje palete: naloži sliko in orodje zdaj samodejno izlušči osem najbolj prevladujočih barv ter jih prikaže kot klikljive vzorčke.

Kako deluje

Nobenega AI modela ni vpletenega in nič se nikamor ne nalaga — gre za preprost algoritem štetja pogostosti, ki teče v nekaj milisekundah:

1. Slika se pomanjša na platno 80×80. Polna ločljivost za barvno statistiko ni potrebna, pomanjšanje pa poskrbi, da je vse skupaj trenutno tudi pri velikih fotografijah.
2. Vsak piksel se razvrsti v predal glede na pogrobljeno različico svoje barve — zgornjih 5 bitov vsakega RGB kanala, tako da piksli, ki so vizualno skoraj enaki, pristanejo v istem predalu, namesto da bi vsak štel kot unikatna barva.
3. Predali se razvrstijo po tem, koliko pikslov je pristalo v njih, in osem največjih postane paleta, pri čemer je vsak prikazan kot povprečna barva vsega v tem predalu.

To je vse. Brez strojnega učenja, brez zunanje storitve — samo pomanjšanje in štetje, zato je trenutno in nikoli ne zapusti tvojega brskalnika.

Klikni vzorček, dobi kodo

Vsak vzorček palete je klikljiv: klikni ga in postane aktivna barva orodja, pri čemer se HEX, RGB in HSL izpolnijo samodejno, hex pa se z istim klikom skopira v odložišče. Na voljo je tudi gumb »copy all«, če želiš celotno paleto kot seznam, ločen z vejicami — priročno za lepljenje naravnost v oblikovalsko orodje ali blok CSS custom properties.

Preizkusi

Naloži katero koli sliko — posnetek zaslona, logotip, fotografijo — na strani izbirnika barv in paleta se samodejno prikaže spodaj.