Miksi lisäsimme automaattisen palettipoiminnan värinvalitsimeen

Värinvalitsimemme on aina antanut sinun ladata kuvan ja klikata mitä tahansa pikseliä saadaksesi sen tarkan HEX-, RGB- ja HSL-arvon. Se vastaa kysymykseen “mikä väri tämä tietty piste on?” — hyödyllistä, mutta ei se kysymys, joka useimmilla oikeasti on kuvaa ladatessaan. Yleensä kysymys on “mikä on tämän kuvan kokonaisvärimaailma?” — brändipaletin poimiminen logosta tai referenssikuvan tunnelman sovittaminen verkkosivuston väriteemaan.

Yksittäisen pikselin poiminta ei voi vastata siihen. Siksi lisäsimme palettipoiminnan: lataa kuva, ja työkalu poimii nyt automaattisesti kahdeksan hallitsevinta väriä ja näyttää ne klikattavina värimalleina.

Miten se toimii

Mukana ei ole tekoälymallia eikä mitään lähetetä minnekään — kyseessä on suoraviivainen esiintymistiheyttä laskeva algoritmi, joka ajautuu muutamassa millisekunnissa:

1. Kuva pienennetään 80×80-kankaalle. Täyttä resoluutiota ei tarvita väritilastoihin, ja pienentäminen pitää koko homman salamannopeana isoillekin valokuville.
2. Jokainen pikseli lajitellaan lokeroon värinsä karkeistetun version mukaan — kunkin RGB-kanavan 5 ylintä bittiä, jolloin visuaalisesti lähes identtiset pikselit päätyvät samaan lokeroon sen sijaan, että jokainen laskettaisiin omaksi värikseen.
3. Lokerot järjestetään pikselimäärän mukaan, ja kahdeksasta suurimmasta tulee paletti; kukin näytetään lokeronsa kaikkien värien keskiarvona.

Siinä kaikki. Ei koneoppimista, ei ulkoista palvelua — vain pienentämistä ja laskemista, minkä vuoksi se on välitön eikä koskaan poistu selaimestasi.

Klikkaa värimallia, saat koodin

Jokainen paletin värimalli on klikattava: klikkaa yhtä, ja siitä tulee työkalun aktiivinen väri — HEX, RGB ja HSL täyttyvät automaattisesti ja hex-koodi kopioituu leikepöydällesi samalla klikkauksella. Mukana on myös “copy all” -painike, jos haluat koko paletin pilkuilla erotettuna listana, kätevä liitettäväksi suoraan suunnittelutyökaluun tai CSS:n custom properties -lohkoon.

Kokeile

Lataa mikä tahansa kuva — kuvakaappaus, logo, valokuva — värinvalitsimen sivulla, ja paletti ilmestyy automaattisesti sen alle.