Što ova stranica radi
Stranica hex-color-from-image omogućuje odabir točne boje s bilo koje slike koju učitate s uređaja. Nakon učitavanja, mišem prelazite preko slike ili kliknete na željeni piksel – alat odmah prikazuje njegovu boju kao heksadecimalni kod (uz RGB i HSL vrijednosti). Heksadecimalni kod možete kopirati za korištenje u CSS-u, programima za dizajn ili bilo kojem drugom projektu. Povećalo pomaže da odaberete točno onaj piksel koji trebate, a možete spremiti više boja u povijest za kasniju upotrebu.
Ulazni formati su PNG, JPG, WebP, GIF, AVIF i HEIC. Alat prihvaća MIME tipove: image/jpeg, image/png, image/webp, image/gif, image/avif, image/heic, image/heif.
Izlaz uključuje:
- poruku "Image ready — move over it to sample, click to save a color."
- dimenzije slike (širina × visina)
- koordinate piksela (x, y)
- HEX: šestoznamenkasti heksadecimalni kod boje (npr.
#1E90FF) - RGB: vrijednosti crvene, zelene i plave komponente
- HSL: nijansa, zasićenost, svjetlina
- ako je piksel proziran: "Alpha ‹n›% — this pixel is partly transparent."
- pri kliku: "Saved ‹hex› to your picks."
- povijest spremljenih boja (do 12 stavki)
Klikom na bilo koju prikazanu vrijednost boje (HEX, RGB, HSL) kopira se u međuspremnik.
Po čemu je ova stranica drugačija
Glavna razlika u odnosu na sestrinske stranice (koje prikazuju RGB funkcionalnu notaciju ili HSL) jest da je heksadecimalni kod primarni izlaz. HEX je šestoznamenkasta (ili ponekad troznamenkasta skraćenica) RGB notacija koja je standard u CSS-u i alatom za dizajn. Ova stranica ne prikazuje alfa kanal unutar samog HEX koda – šestoznamenkasti HEX nema mogućnost prijenosa prozirnosti. Svaka transparentnost se prijavljuje odvojeno kao postotak: "Alpha ‹n›% — this pixel is partly transparent."
Budući da je HEX kompaktan i izvorno web-nativan format, ova je stranica prvi izbor kada vam treba vrijednost boje koju možete izravno ubaciti u color, background-color ili bilo koje CSS svojstvo bez dodatnih zagrada ili sintakse. Nema potrebe za funkcijom rgb() ili hsl(). Dovoljno je kopirati #1E90FF i zalijepiti.
Također, za razliku od alata koji prikazuju samo heksadecimalnu vrijednost, ovaj alat prikazuje i RGB i HSL ekvivalente, što omogućuje potpunu informaciju o boji.
Kako koristiti alat
Učitavanje slike
Povucite i ispustite datoteku na područje za učitavanje ili kliknite za odabir datoteke. Ako pokušate učitati nepodržanu vrstu datoteke, pojavit će se poruka: "That file type is not supported. Try a PNG, JPG, WebP, GIF, AVIF or HEIC image." Ako se slika ne može otvoriti (npr. oštećena datoteka), pojavit će se: "That image could not be opened. It may be corrupted or in an unsupported format."
Slike čija najduža stranica prelazi 4096 piksela automatski se smanjuju na tu veličinu. To je uobičajeno ograničenje jer rad s iznimno velikim slikama usporava prikaz i povećava potrošnju memorije u pregledniku. Alat skalira sliku proporcionalno, tako da omjer stranica ostaje isti, ali gubite sposobnost odabira pojedinih piksela izvan te razlučivosti.
Odabir piksela
Čim se slika učita, prikazuju se koordinate i vrijednosti boje središnjeg piksela. Pokretanjem miša preko slike uzorkuju se boje piksel po piksel. Pritiskom na sliku spremate trenutno uzorkovanu boju u povijest.
Navigacija tipkovnicom
Križić (crosshair) možete pomicati po slici pomoću tipki sa strelicama. Tipka Shift istovremeno sa strelicom pomiče križić za 10 piksela, što je korisno za brži prelazak većih površina. Pritisak tipke Enter ili Space sprema trenutnu boju, jednako kao klik mišem. Ova mogućnost je ključna za pristupačnost i preciznost – omogućuje odabir točnog piksela čak i kada je miš neprecizan ili kada radite na malom zaslonu.
Prikaz boja i transparentnost
Alat prikazuje tri uobičajena modela boja: HEX, RGB i HSL.
- HEX (heksadecimalno): Šest znamenki od 00 do FF za svaki od tri kanala. Primjerice,
#1E90FFje nijansa plave. HEX kodovi su najčešći u CSS-u i HTML-u. Ponekad se koristi i skraćeni troznamenkasti oblik (npr.#1EFza#11EEFF), ali alat uvijek prikazuje punu šestoznamenkastu verziju. - RGB (crvena, zelena, plava): Svaka komponenta od 0 do 255. Ovo je izvorni format većine zaslona.
- HSL (nijansa, zasićenost, svjetlina): Nijansa od 0° do 360°, zasićenost i svjetlina od 0% do 100%. Ovaj model je intuitivniji za prilagođavanje boja.
Što se tiče transparentnosti, HEX kod nema alfa kanal. Ako piksel ima djelomičnu prozirnost, alat prikazuje poruku "Alpha ‹n›% — this pixel is partly transparent." To znači da je boja koju vidite kao HEX zapravo boja piksela bez uzimanja u obzir pozadine. Alat čita točnu vrijednost piksela pohranjenu u slici – ne simulira miješanje s pozadinom. Ovo je važno jer u stvarnom prikazu na webu boja prozirnog piksela ovisi o pozadini, ali alat vam daje samo izvornu boju piksela.
Povijest i upravljanje bojama
Povijest spremljenih boja može sadržavati do 12 stavki. Svaki klik na sliku (ili pritisak Enter/Space) dodaje trenutnu boju na kraj popisa. Ako imate istu RGB vrijednost boje s različitom alfa vrijednošću (npr. rgba(30,144,255,0.5) i rgba(30,144,255,0.8)), one se spremaju kao zasebne stavke jer alfa postotak mijenja vizualni izgled i bitan je za dizajnera.
Klikom na bilo koju spremljenu boju u povijesti ponovno se učitavaju njezini HEX, RGB i HSL podaci – nije potrebno ponovno birati piksel. Ovo je korisno za usporedbu ili kopiranje vrijednosti koje ste ranije spremili.
Povijest možete očistiti i vratiti alat na početno stanje klikom na gumb "Start over". Time se briše slika, prazni povijest i alat se vraća u početno stanje.
Slučajevi na rubu i uobičajene pogreške
Kompresija i anti-aliasing
Ako je slika JPEG (gubitna kompresija) ili screenshot (često s anti-aliasingom), obližnji pikseli u naizgled ravnoj površini mogu imati različite vrijednosti boje. JPEG koristi diskretnu kosinusnu transformaciju i kvantizaciju, što unosi blage varijacije u boji. Anti-aliasing izglađuje rubove dodavanjem prozirnih prijelaznih piksela. Zato je ključno koristiti povećalo i precizno odabrati piksel koji stvarno želite.
Transparentnost i miješanje
Kada alat prikaže "Alpha 50% — this pixel is partly transparent.", to ne znači da je boja koju vidite mješavina s pozadinom. Alat čita četvrti kanal (alfa) izravno iz slikovnog formata (PNG, WebP, GIF, AVIF, HEIC). JPEG ne podržava prozirnost. Ako uklonite pozadinu slike u grafičkom programu, a zatim je spremite kao PNG, pikseli koji su bili potpuno prozirni imaju alfa 0%, a oni djelomično prozirni imaju vrijednosti između. Kod HEX koda se alfa ne vidi, pa alat to zasebno prijavljuje.
Kopiranje u međuspremnik
Klik na prikazanu HEX, RGB ili HSL vrijednost pokušava kopirati tu vrijednost u međuspremnik pomoću API-ja navigator.clipboard.writeText(). Ako preglednik blokira pristup međuspremniku (zbog sigurnosnih postavki), pojavit će se poruka: "Could not copy — your browser blocked clipboard access." Tada vrijednost možete ručno označiti i kopirati standardnim prečacem (Ctrl+C ili Cmd+C).
Utjecaj skromne veličine slike
Slike veće od 4096 piksela na najdužoj stranici automatski se skaliraju. To znači da možda nećete moći odabrati piksel koji je postojao u izvornoj slici izvan te razlučivosti. Skaliranje koristi interpolaciju (obično bilinearnu ili bikubičnu), što mijenja stvarne vrijednosti piksela. Ako trebate točnu boju iz ogromne slike, prvo je ručno smanjite na razlučivost koja ne prelazi 4096 piksela u bilo kojoj dimenziji.
Često postavljana pitanja (FAQ)
1. Zašto HEX kod nema alfa kanal, a vidim prozirnost?
Šestoznamenkasti HEX ne podržava alfa kanal. Alat prikazuje prozirnost kao zasebnu poruku „Alpha ‹n›%". Ako trebate prozirnost u HEX obliku, možete koristiti osmeroznamenkasti HEX (npr. #1E90FF80), ali ovaj alat ga ne prikazuje. Za rad s prozirnošću preporučujemo korištenje RGB ili HSL vrijednosti, jer one mogu uključivati alfa kanal (npr. rgba(30,144,255,0.5)).
2. Mogu li povući sliku iz preglednika ravno na alat? Da, alat prihvaća povlačenje i ispuštanje datoteka. Ako datoteka nije podržana, pojavit će se upozorenje. Ne možete povući slike s drugih web stranica jer se one ne učitavaju kao lokalne datoteke.
3. Koliko boja mogu spremiti prije nego što se povijest izbriše? Povijest može pohraniti do 12 boja. Kada dosegnete 12, nove boje će se dodavati na kraj, a najstarije će se uklanjati s početka. Ako trebate zadržati više boja, preporučujemo da ih kopirate i spremite negdje drugdje.
4. Zašto se boje razlikuju od onih koje vidim na monitoru? Monitor može prikazivati boje drugačije zbog kalibracije ili profila boja. Osim toga, JPEG kompresija i anti-aliasing mogu promijeniti izvorne vrijednosti piksela. Alat prikazuje točnu digitalnu vrijednost pohranjenu u slici, a ne ono što vaše oko vidi.
5. Radim li s HEIC slikom, je li podržano? Da, alat prihvaća HEIC i HEIF formate (MIME tip: image/heic, image/heif). Međutim, neki stariji preglednici možda ne podržavaju prikaz HEIC slika. U tom slučaju alat će prijaviti da se slika ne može otvoriti.
6. Kako mogu resetirati alat bez ponovnog učitavanja stranice? Kliknite gumb "Start over". Time se briše slika, prazni povijest i alat se vraća na početno stanje. Stranica se ne ponovno učitava, što je brže i jednostavnije.