Proč jsme do color pickeru přidali automatickou extrakci palety

Náš color picker vždycky uměl nahrát obrázek a kliknutím na libovolný pixel získat jeho přesnou hodnotu HEX, RGB a HSL. To odpovídá na otázku „jakou barvu má tenhle konkrétní bod?“ — užitečné, ale většina lidí se při nahrání fotky ve skutečnosti ptá na něco jiného. Obvykle je to „jaké je celkové barevné schéma tohoto obrázku?“ — třeba vytáhnout brandovou paletu z loga nebo sladit náladu referenční fotky s barevným schématem webu.

Vzorkování jednoho pixelu na tohle odpovědět neumí. Přidali jsme proto extrakci palety: nahrajete obrázek a nástroj z něj nyní automaticky vytáhne osm nejdominantnějších barev a zobrazí je jako klikací vzorky.

Jak to funguje

Není v tom žádný AI model a nic se nikam nenahrává — jde o přímočarý algoritmus počítání četností, který proběhne za pár milisekund:

Obrázek se zmenší na plátno 80×80. Pro barevné statistiky není plné rozlišení potřeba a díky zmenšení je celá věc okamžitá i u velkých fotek.
Každý pixel se zařadí do „kbelíku“ podle zhrubené verze své barvy — horních 5 bitů každého RGB kanálu, takže vizuálně téměř identické pixely skončí ve stejném kbelíku, místo aby se každý počítal jako unikátní barva.
Kbelíky se seřadí podle počtu pixelů, které v nich skončily, a osm největších se stane paletou; každý je zobrazen jako průměrná barva všeho, co do daného kbelíku spadlo.

To je celé. Žádné strojové učení, žádná externí služba — jen zmenšení a počítání, a právě proto je to okamžité a nikdy to neopustí váš prohlížeč.

Klikněte na vzorek, dostanete kód

Každý vzorek palety je klikací: kliknutím se stane aktivní barvou nástroje, hodnoty HEX, RGB a HSL se vyplní automaticky a hex se stejným kliknutím zkopíruje do schránky. Je tu i tlačítko „copy all“, pokud chcete celou paletu jako seznam oddělený čárkami — hodí se pro vložení přímo do designového nástroje nebo bloku CSS custom properties.

Vyzkoušejte si to

Nahrajte libovolný obrázek — screenshot, logo, fotku — na stránce color pickeru a paleta se automaticky objeví pod ním.