Miks me lisasime värvivalijasse automaatse paleti eraldamise

Meie color picker on alati lasknud sul pildi üles laadida ja mis tahes pikslil klõpsata, et saada selle täpne HEX-, RGB- ja HSL-väärtus. See vastab küsimusele “mis värvi on see konkreetne punkt?” — kasulik, kuid mitte see küsimus, mis enamikul inimestel foto üleslaadimisel tegelikult on. Tavaliselt on see “milline on selle pildi üldine värviskeem?” — brändipaleti võtmine logost või referentsfoto meeleolu sobitamine veebisaidi värviskeemiga.

Ühe piksli proovimine ei suuda sellele vastata. Nii et me lisasime paleti eraldamise: lae pilt üles ja tööriist toob nüüd automaatselt välja kaheksa kõige domineerivamat värvi ning näitab neid klõpsatavate värvilaikudena.

Kuidas see töötab

Ühtegi AI-mudelit pole kaasatud ja midagi ei laadita kuhugi üles — see on lihtne sageduse loendamise algoritm, mis töötab mõne millisekundiga:

1. Pilt vähendatakse 80×80 lõuendile. Värvistatistika jaoks pole täisresolutsiooni vaja ning vähendamine hoiab kogu protsessi hetkelisena ka suurte fotode puhul.
2. Iga piksel paigutatakse ämbrisse tema värvi jämedama versiooni järgi — iga RGB-kanali ülemised 5 bitti, nii et visuaalselt peaaegu identsed pikslid satuvad samasse ämbrisse, selle asemel et igaüks loeks eraldi unikaalse värvina.
3. Ämbrid sorteeritakse selle järgi, mitu pikslit neisse sattus, ja kaheksa suurimat moodustavad paleti, kusjuures igaüht näidatakse kui selle ämbri kogu sisu keskmist värvi.

Ongi kõik. Ei mingit masinõpet ega välist teenust — lihtsalt vähendamine ja loendamine, mistõttu see on hetkeline ega lahku kunagi sinu brauserist.

Klõpsa värvilaigul, saad koodi

Iga paleti värvilaik on klõpsatav: klõpsa ühel ja sellest saab tööriista aktiivne värv, HEX, RGB ja HSL täidetakse automaatselt ning hex kopeeritakse sama klõpsuga lõikelauale. Olemas on ka “copy all” nupp, kui soovid kogu paletti komadega eraldatud loendina — kasulik otse disainitööriista või CSS-i kohandatud omaduste plokki kleepimiseks.

Proovi järele

Lae mis tahes pilt — ekraanipilt, logo, foto — üles color picker’i lehel ja palett ilmub automaatselt selle alla.