Kāpēc krāsu atlasītājam pievienojām automātisku paletes izgūšanu

Mūsu krāsu atlasītājs vienmēr ir ļāvis augšupielādēt attēlu un noklikšķināt uz jebkura pikseļa, lai iegūtu tā precīzo HEX, RGB un HSL vērtību. Tas atbild uz jautājumu “kāda krāsa ir šajā konkrētajā punktā?” — noderīgi, bet ne tas, ko vairums cilvēku patiesībā vēlas zināt, augšupielādējot foto. Parasti jautājums ir “kāda ir šī attēla kopējā krāsu gamma?” — zīmola paletes izvilkšana no logotipa vai atsauces fotogrāfijas noskaņas pārnešana uz vietnes krāsu shēmu.

Viena pikseļa paraugs uz to atbildēt nevar. Tāpēc pievienojām paletes izgūšanu: augšupielādējiet attēlu, un rīks tagad automātiski izvelk astoņas dominējošākās krāsas un parāda tās kā klikšķināmus paraugus.

Kā tas darbojas

Nekāds AI modelis nav iesaistīts, un nekas nekur netiek augšupielādēts — tas ir vienkāršs biežuma skaitīšanas algoritms, kas izpildās dažās milisekundēs:

1. Attēls tiek samazināts līdz 80×80 kanvai. Krāsu statistikai pilna izšķirtspēja nav vajadzīga, un samazināšana visu procesu padara acumirklīgu pat lielām fotogrāfijām.
2. Katrs pikselis tiek ievietots “spainī” pēc tā krāsas rupjinātas versijas — katra RGB kanāla augšējiem 5 bitiem, lai vizuāli gandrīz identiski pikseļi nonāktu vienā spainī, nevis katrs skaitītos kā unikāla krāsa.
3. Spaiņi tiek sakārtoti pēc tajos nonākušo pikseļu skaita, un astoņi lielākie kļūst par paleti; katrs tiek parādīts kā visa spaiņa satura vidējā krāsa.

Tas arī viss. Nekādas mašīnmācīšanās, neviena ārēja servisa — tikai samazināšana un skaitīšana, tāpēc tas ir acumirklīgs un nekad nepamet jūsu pārlūku.

Noklikšķiniet uz parauga, saņemiet kodu

Katrs paletes paraugs ir klikšķināms: noklikšķiniet uz viena, un tas kļūst par rīka aktīvo krāsu — HEX, RGB un HSL aizpildās automātiski, un hex kods ar to pašu klikšķi tiek nokopēts starpliktuvē. Ir arī poga “copy all”, ja vēlaties visu paleti kā ar komatiem atdalītu sarakstu — ērti ielīmēšanai tieši dizaina rīkā vai CSS pielāgoto īpašību blokā.

Izmēģiniet

Augšupielādējiet jebkuru attēlu — ekrānuzņēmumu, logotipu, fotogrāfiju — krāsu atlasītāja lapā, un palete automātiski parādīsies zem tā.