Kodėl į spalvų parinkiklį pridėjome automatinį paletės ištraukimą

Mūsų spalvų parinkiklis visada leido įkelti paveikslėlį ir spustelėti bet kurį pikselį, kad gautumėte tikslią jo HEX, RGB ir HSL reikšmę. Tai atsako į klausimą „kokios spalvos šis konkretus taškas?“ — naudinga, bet dažniausiai žmonės, įkeldami nuotrauką, klausia ne to. Paprastai klausimas skamba taip: „kokia bendra šio paveikslėlio spalvų schema?“ — kaip išsitraukti prekės ženklo paletę iš logotipo arba pritaikyti svetainės spalvų gamą pagal referencinės nuotraukos nuotaiką.

Vieno pikselio ėmimas į tai atsakyti negali. Todėl pridėjome paletės ištraukimą: įkeliate paveikslėlį, ir įrankis dabar automatiškai išskiria aštuonias dominuojančias spalvas bei parodo jas kaip spustelimus pavyzdžius.

Kaip tai veikia

Jokio AI modelio čia nėra ir niekas niekur neįkeliama — tai paprastas dažnių skaičiavimo algoritmas, suveikiantis per kelias milisekundes:

1. Paveikslėlis sumažinamas iki 80×80 drobės. Spalvų statistikai visos raiškos nereikia, o sumažinimas užtikrina, kad viskas vyksta akimirksniu net su didelėmis nuotraukomis.
2. Kiekvienas pikselis priskiriamas grupei pagal sugrubintą jo spalvos versiją — po 5 aukščiausius kiekvieno RGB kanalo bitus, todėl vizualiai beveik identiški pikseliai patenka į tą pačią grupę, užuot kiekvienas skaičiavęsis kaip unikali spalva.
3. Grupės surikiuojamos pagal į jas patekusių pikselių skaičių, o aštuonios didžiausios tampa palete — kiekviena rodoma kaip visų tos grupės spalvų vidurkis.

Tiek ir tėra. Jokio mašininio mokymosi, jokios išorinės paslaugos — tik sumažinimas ir skaičiavimas, todėl viskas vyksta akimirksniu ir niekada nepalieka jūsų naršyklės.

Spustelėkite pavyzdį — gaukite kodą

Kiekvienas paletės pavyzdys yra spustelimas: paspaudus jis tampa aktyvia įrankio spalva — HEX, RGB ir HSL užpildomi automatiškai, o hex kodas tuo pačiu paspaudimu nukopijuojamas į iškarpinę. Taip pat yra mygtukas „copy all“, jei norite visos paletės kaip kableliais atskirto sąrašo — patogu įklijuoti tiesiai į dizaino įrankį ar CSS custom-properties bloką.

Išbandykite

Įkelkite bet kokį paveikslėlį — ekrano nuotrauką, logotipą, fotografiją — spalvų parinkiklio puslapyje, ir paletė automatiškai atsiras apačioje.