Prečo sme do color pickera pridali automatickú extrakciu palety

Náš color picker vám vždy umožňoval nahrať obrázok a kliknutím na ľubovoľný pixel získať jeho presnú hodnotu HEX, RGB a HSL. To odpovedá na otázku „akú farbu má tento konkrétny bod?“ — užitočné, ale nie je to otázka, ktorú väčšina ľudí pri nahrávaní fotky skutočne má. Zvyčajne znie „aká je celková farebná schéma tohto obrázka?“ — či už ide o vytiahnutie firemnej palety z loga, alebo o zachytenie atmosféry referenčnej fotky pre farebnú schému webu.

Vzorkovanie jedného pixela na to odpovedať nedokáže. Preto sme pridali extrakciu palety: nahrajte obrázok a nástroj teraz automaticky vytiahne osem najdominantnejších farieb a zobrazí ich ako klikateľné vzorky.

Ako to funguje

Nie je v tom žiadny AI model a nič sa nikam nenahráva — je to priamočiary algoritmus počítania frekvencií, ktorý prebehne za pár milisekúnd:

Obrázok sa zmenší na plátno 80×80. Plné rozlíšenie nie je pre farebnú štatistiku potrebné a vďaka zmenšeniu je celý proces okamžitý aj pri veľkých fotkách.
Každý pixel sa zaradí do koša podľa zhrubenej verzie svojej farby — horných 5 bitov každého RGB kanála, takže pixely, ktoré sú vizuálne takmer totožné, skončia v tom istom koši namiesto toho, aby sa každý počítal ako unikátna farba.
Koše sa zoradia podľa počtu pixelov, ktoré v nich skončili, a osem najväčších tvorí paletu, pričom každý sa zobrazí ako priemerná farba všetkého, čo do daného koša padlo.

To je celé. Žiadne strojové učenie, žiadna externá služba — len zmenšenie a počítanie, a práve preto je to okamžité a nikdy to neopustí váš prehliadač.

Kliknite na vzorku, získajte kód

Každá vzorka palety je klikateľná: kliknite na ňu a stane sa aktívnou farbou nástroja, pričom HEX, RGB a HSL sa vyplnia automaticky a hex kód sa tým istým kliknutím skopíruje do schránky. Je tam aj tlačidlo „copy all“, ak chcete celú paletu ako zoznam oddelený čiarkami — hodí sa na priame vloženie do dizajnérskeho nástroja alebo do bloku CSS custom properties.

Vyskúšajte to

Nahrajte akýkoľvek obrázok — screenshot, logo, fotku — na stránke color pickera a paleta sa automaticky objaví pod ním.