Precizno uzorkovanje boja izravno u pregledniku
Alat "Pipeta za boju sa slike" omogućuje učitavanje slikovne datoteke s lokalnog uređaja i precizno očitavanje vrijednosti pojedinačnih piksela. Korisnik može pomicati pokazivač preko učitane slike kako bi u stvarnom vremenu pratio promjene boja, dok integrirano povećalo olakšava odabir točnog piksela. Nakon što se odabere željeni piksel, alat prikazuje njegove vrijednosti u tri standardna formata: HEX, RGB i HSL.
Prilikom učitavanja slike, sustav automatski očitava i prikazuje koordinate te vrijednosti boje središnjeg piksela slike. Korisnik može spremiti više očitanih boja u povijest koja služi kao priručna paleta za daljnji rad. Svaka spremljena vrijednost može se kopirati jednim klikom, što ubrzava integraciju u razvojne i dizajnerske projekte.
Podržani formati i tehnička ograničenja datoteka
Alat prihvaća širok raspon slikovnih formata koji se uobičajeno koriste u digitalnim medijima. Korisnici mogu učitati sljedeće formate datoteka:
- PNG (
image/png) - JPG / JPEG (
image/jpeg) - WebP (
image/webp) - GIF (
image/gif) - AVIF (
image/avif) - HEIC / HEIF (
image/heic,image/heif)
Ako pokušate učitati datoteku koja ne pripada ovim formatima, sustav će prikazati poruku o pogrešci: "Ta vrsta datoteke nije podržana. Pokušajte s PNG, JPG, WebP, GIF, AVIF ili HEIC slikom.". U slučaju da je datoteka oštećena ili je preglednik ne može dekodirati, prikazat će se obavijest: "Nije moguće otvoriti tu sliku. Možda je oštećena ili u nepodržanom formatu.".
Kako bi se osigurale optimalne performanse unutar preglednika, slike čija najduža stranica prelazi 4096 piksela automatski se smanjuju na tu graničnu vrijednost prilikom učitavanja.
Razumijevanje modela boja: HEX, RGB i HSL
Nakon odabira piksela, alat prikazuje podatke u tri ključna formata koji pokrivaju različite potrebe u dizajnu i programiranju:
- HEX: Heksadecimalni zapis koji se najčešće koristi u HTML-u i CSS-u. Sastoji se od znaka
#iza kojeg slijede tri para heksadecimalnih znamenki koje predstavljaju intenzitet crvene, zelene i plave komponente. - RGB: Model koji definira boju kroz intenzitet crvenog (Red), zelenog (Green) i plavog (Blue) kanala u rasponu od 0 do 255. Ovaj je model izravno povezan s načinom na koji monitori i ekrani emitiraju svjetlost.
- HSL: Alternativni prikaz koji definira boju kroz nijansu (Hue) izraženu u stupnjevima od 0° do 360°, zasićenost (Saturation) u postocima te svjetlinu (Lightness) također u postocima. HSL je iznimno koristan dizajnerima jer omogućuje intuitivno posvjetljivanje ili potamnjivanje boje bez mijenjanja same nijanse.
Utjecaj kompresije, zaglađivanja i prozirnosti na piksele
Pri uzorkovanju boja važno je razumjeti da alat prikazuje točnu vrijednost piksela koja je zapisana u datoteci. Određeni faktori mogu uzrokovati odstupanja između vizualnog dojma i stvarne vrijednosti piksela:
- Kompresija slike: Formati s gubitkom kvalitete, poput JPEG-a, koriste algoritme koji grupiraju piksele i aproksimiraju njihove vrijednosti kako bi smanjili veličinu datoteke. To može promijeniti izvornu boju pojedinačnog piksela.
- Zaglađivanje rubova (Anti-aliasing): Prilikom izrade snimaka zaslona ili renderiranja teksta, rubovi objekata se blago zamućuju miješanjem boja s pozadinom kako bi izgledali glađe. Uzorkovanje piksela na tim rubovima dat će miješanu nijansu, a ne čistu izvornu boju objekta.
- Kanal prozirnosti (Alfa kanal): Ako slika sadrži prozirne dijelove, alat očitava vrijednost samog piksela bez obzira na pozadinu koja se nalazi iza njega. Ako je piksel djelomično proziran, sustav će prikazati upozorenje: "Alfa
{n}% — ovaj je piksel djelomično proziran.".
Upravljanje sučeljem i precizna navigacija tipkovnicom
Alat nudi napredne mogućnosti upravljanja koje omogućuju visoku preciznost, što je posebno korisno kada je potrebno odabrati točan piksel na gustim grafičkim elementima.
- Uzorkovanje mišem: Pomicanjem pokazivača preko slike dinamički se mijenjaju vrijednosti u poljima za prikaz. Klikom na sliku trenutna se boja sprema u povijest, uz obavijest: "Boja
{hex}spremljena je u vaše odabire.". - Navigacija tipkovnicom: Za maksimalnu preciznost, korisnik može pomicati ciljnik preko slike koristeći tipke sa strelicama na tipkovnici. Svaki pritisak na strelicu pomiče ciljnik za točno 1 piksel.
- Brzi pomak: Držeći tipku Shift dok se koriste tipke sa strelicama, ciljnik se pomiče u koracima od 10 piksela.
- Spremanje tipkovnicom: Pritisak na tipku Enter ili Space sprema trenutno uzorkovanu boju u povijest.
Povijest spremljenih boja može pohraniti do 12 stavki. Važno je napomenuti da se boje koje imaju identične RGB vrijednosti, ali različite razine prozirnosti (alfa vrijednosti), spremaju kao zasebni unosi u povijest. Klikom na bilo koji spremljeni uzorak u povijesti, ta se boja ponovno učitava u glavni prikaz. Gumb "Kreni ispočetka" u potpunosti čisti učitanu sliku, prazni povijest spremljenih boja i vraća alat u početno stanje.
Kopiranje vrijednosti (HEX, RGB ili HSL) u međuspremnik vrši se jednostavnim klikom na željenu tekstualnu vrijednost. Ako sigurnosne postavke preglednika onemogućuju ovu akciju, prikazat će se poruka: "Kopiranje nije uspjelo — vaš preglednik blokira pristup međuspremniku.".
Privatnost podataka i lokalna obrada
Sigurnost i privatnost korisničkih podataka u potpunosti su integrirani u arhitekturu ovog alata. Proces obrade slika odvija se isključivo na lokalnom uređaju korisnika. Kada odaberete ili ispustite sliku u označeno polje, preglednik je učitava izravno u lokalnu memoriju.
Nijedan dio slikovne datoteke niti podaci o bojama ne šalju se na poslužitelje BroBroGo. Budući da se kompletna analiza i dekodiranje odvijaju unutar vašeg web preglednika, vaši vizualni materijali ostaju privatni i zaštićeni od neovlaštenog pristupa s mreže.
Često postavljana pitanja (FAQ)
Kako mogu odabrati boju sa slike?
Pomaknite pokazivač preko slike i ploča će prikazati boju ispod njega, uz povećalo koje zumira kako biste mogli pogoditi točan piksel. Kliknite za spremanje te boje u svoje odabire. Također možete fokusirati sliku i pomicati ciljnik tipkama sa strelicama, a zatim pritisnuti Enter.
Koje formate boja dobivam?
Svaki piksel čiji uzorak uzmete prikazuje se istovremeno u formatima HEX, RGB i HSL. Kliknite na bilo koju vrijednost kako biste je kopirali, spremnu za umetanje u CSS ili dizajnerski alat.
Zašto odabrana boja ne odgovara uvijek onome što sam očekivao/la?
Dobivate točnu vrijednost piksela pohranjenu u slici. Ako se radi o JPEG-u ili snimci zaslona, kompresija i zaglađivanje rubova (anti-aliasing) možda su već malo pomaknuli susjedne piksele, a poluprozirni piksel čita se samostalno, bez obzira na ono što se nalazi iza njega.
Koliko boja mogu spremiti u povijest alata?
U povijesti možete pohraniti do 12 boja istovremeno. Ako spremite boju koja ima iste RGB vrijednosti kao neka već spremljena, ali se razlikuje po razini prozirnosti (alfa kanalu), ona će biti spremljena kao zaseban unos.
Što se događa s mojim slikama nakon što ih učitam?
Slika se čita izravno s vašeg uređaja i nikada ne napušta preglednik. Ništa se ne prenosi na BroBroGo, što znači da se cijeli proces obrade i uzorkovanja odvija lokalno na vašem računalu ili mobilnom uređaju.