Miért került automatikus palettakinyerés a színválasztó eszközbe

A színválasztónk mindig is lehetővé tette, hogy feltölts egy képet, és bármelyik pixelre kattintva megkapd annak pontos HEX, RGB és HSL értékét. Ez arra válaszol, hogy „milyen színű ez a konkrét pont?“ — hasznos, de nem az a kérdés, ami a legtöbb embert valójában foglalkoztatja, amikor feltölt egy fotót. Általában inkább az: „mi ennek a képnek az összképi színvilága?“ — márkapaletta kinyerése egy logóból, vagy egy referenciafotó hangulatának átvétele egy weboldal színsémájához.

Az egypixeles mintavétel erre nem tud válaszolni. Ezért hozzáadtuk a palettakinyerést: tölts fel egy képet, és az eszköz mostantól automatikusan kigyűjti a nyolc legdominánsabb színt, és kattintható színmintákként jeleníti meg őket.

Hogyan működik

Nincs benne AI-modell, és semmi sem kerül feltöltésre sehová — egy egyszerű gyakoriságszámláló algoritmusról van szó, amely néhány ezredmásodperc alatt lefut:

A kép egy 80×80-as vászonra lesz lekicsinyítve. A színstatisztikához nincs szükség teljes felbontásra, és a lekicsinyítés nagy fotóknál is azonnalivá teszi az egészet.
Minden pixel a színének durvított változata szerint kerül egy-egy vödörbe — az egyes RGB-csatornák felső 5 bitje alapján, így a vizuálisan szinte azonos pixelek ugyanabba a vödörbe esnek, ahelyett hogy mindegyik külön színnek számítana.
A vödröket a beléjük eső pixelek száma szerint rendezzük, és a nyolc legnagyobb alkotja a palettát; mindegyik a vödörben lévő színek átlagszíneként jelenik meg.

Ennyi. Se gépi tanulás, se külső szolgáltatás — csak lekicsinyítés és számlálás, ezért azonnali, és soha nem hagyja el a böngésződet.

Kattints egy színmintára, és megkapod a kódot

Minden palettaminta kattintható: egy kattintásra az lesz az eszköz aktív színe, a HEX, RGB és HSL mezők automatikusan kitöltődnek, és a hex-kód ugyanazzal a kattintással a vágólapra kerül. Van egy „összes másolása“ gomb is, ha a teljes palettát vesszővel elválasztott listaként szeretnéd — hasznos, ha egyenesen egy dizájneszközbe vagy egy CSS custom-properties blokkba illesztenéd.

Próbáld ki

Tölts fel bármilyen képet — képernyőképet, logót, fotót — a színválasztó oldalán, és a paletta automatikusan megjelenik alatta.