Saznajte HEX boju sa slike

Kako funkcioniše HEX boja iz slike – detaljni vodič

Alat za uzorkovanje boja iz slika omogućava da odaberete bilo koju sliku sa uređaja, a zatim prelaskom miša ili klikom odaberete tačno određeni piksel. Odmah dobijate heksadecimalni kod te boje, zajedno s RGB i HSL vrijednostima, tako da je možete kopirati za korištenje u CSS-u, dizajnerskim programima ili bilo kojem drugom projektu. Uvećani prikaz pomaže da pogodite baš onaj piksel koji vam treba, a možete spremiti više boja u historiju za kasniju upotrebu.

Šta ovu stranicu čini drugačijom

Heksadecimalni kod boje (HEX) je primarni izlaz – šestocifrena (ili trocifrena skraćena notacija) RGB oznaka koja je standard u CSS-u i dizajnerskim alatima. Za razliku od sestrinskih stranica koje se fokusiraju na RGB funkcionalnu notaciju ili HSL, ova stranica daje heksadecimalni prikaz koji u svojoj šestocifrenoj formi ne nosi alfa kanal. Svaka prozirnost se prijavljuje zasebno kao postotak: “Alpha ‹n›% – this pixel is partly transparent.”

Pošto je HEX kompaktan i web‑izvorni format, ova stranica je prvi izbor kada vam treba vrijednost boje koju možete direktno ubaciti u color, background-color ili bilo koje CSS svojstvo bez dodatnih zagrada ili sintakse.

Ulazne i izlazne vrijednosti

Podržani formati slika:

Šta dobijate nakon učitavanja slike:

• Poruka “Image ready — move over it to sample, click to save a color.”
• Dimenzije slike (širina × visina).
• Koordinate piksela (x, y) trenutno uzorkovanog piksela.
• HEX: Heksadecimalni kod boje (šestocifreni, npr. #1E90FF).
• RGB: Crvena, zelena, plava vrijednost (0–255).
• HSL: Nijansa (hue), zasićenost (saturation), svjetlina (lightness).
• Ako je piksel poluproziran: “Alpha ‹n›% — this pixel is partly transparent.”
• Kada kliknete na sliku: “Saved ‹hex› to your picks.”
• Historija sačuvanih boja (do 12 stavki) – klik na uzorak ponovo učitava tu boju.
• Klik na bilo koju prikazanu vrijednost (HEX, RGB, HSL) kopira je u međuspremnik.

Kako alat funkcioniše – korak po korak

1. Učitavanje slike: Odaberite ili prevucite sliku u podržanom formatu. Čim se slika učita, centar slike se automatski uzorkuje i prikazuju se vrijednosti boje i koordinate.

2. Uzorkovanje pokretom miša: Pomicanjem miša preko slike piksel po piksel ažuriraju se prikazane vrijednosti. Uvećani prikaz (magnifier) pomaže da precizno odaberete mali detalj.

3. Uzorkovanje tastaturom: Možete koristiti tipke sa strelicama za pomicanje krsta po slici. Uz držanje tipke Shift, strelice pomiču krst za 10 piksela. Pritisak na Enter ili Space snima trenutno uzorkovanu boju.

4. Snimanje boje: Klikom na sliku (ili pritiskom Enter/Space) boja se dodaje u historiju sa porukom “Saved ‹hex› to your picks.”

5. Historija boja: Prikazuje do 12 posljednjih snimljenih boja. Možete kliknuti na bilo koji uzorak da ponovo prikažete tu boju i njene vrijednosti.

6. Kopiranje vrijednosti: Klik na HEX, RGB ili HSL vrijednost kopira tu notaciju u međuspremnik. Ako preglednik blokira pristup međuspremniku, pojavljuje se poruka “Could not copy — your browser blocked clipboard access.”

Pravila i rubni slučajevi

Podržani formati: Ako ubacite nepodržani format, dobijate poruku: “That file type is not supported. Try a PNG, JPG, WebP, GIF, AVIF or HEIC image.”

Neispravna slika: Ako se slika ne može otvoriti, prikazuje se: “That image could not be opened. It may be corrupted or in an unsupported format.”

Maksimalna veličina: Slike čija najduža stranica prelazi 4096 piksela automatski se skaliraju na manju dimenziju. To znači da ako je original od 6000×4000 piksela, alat će ga smanjiti tako da najduža stranica bude 4096 piksela, a druga stranica se proporcionalno prilagođava.

Prozirnost (alfa kanal): HEX kod u šestocifrenoj formi ne sadrži informaciju o prozirnosti. Ako piksel ima alfa vrijednost manju od 255 (potpuno neproziran), alat prikazuje postotak prozirnosti, npr. “Alpha 50% — this pixel is partly transparent.” Boje s istim RGB vrijednostima, ali različitim alfa vrijednostima, snimaju se kao zasebni unosi u historiji.

Kompresija i anti‑aliasing: Ako je slika JPEG ili napravljena kao screenshot, kompresija i anti‑aliasing su mogli promijeniti vrijednosti piksela. U takvim slučajevima alat prikazuje tačnu vrijednost koja je pohranjena u slici, a ne “stvarnu” namjeravanu boju.

Centriranje uzorkovanja: Odmah po učitavanju, alat prikazuje vrijednosti centralnog piksela (x = širina/2, y = visina/2) – to nije slučajnost, već ugrađeno ponašanje.

Dugme “Start over” briše sliku, prazni historiju boja i vraća alat u početno stanje.

Kome je alat namijenjen

• Dizajnerima koji trebaju izdvojiti precizne boje piksela iz referentnih slika za UI dizajn. Heksadecimalni kod je standard u Figmi, Sketchu, Adobe XD-u i Photoshopu.
• Developerima koji trebaju tačne HEX vrijednosti za CSS (npr. #1E90FF) da usklade boje s mockupom ili brend elementom. Hex se može koristiti direktno u color, background-color, border-color itd.
• Kreatorima sadržaja koji uzorkuju boje iz slika za brendiranje, thumbnaile ili grafiku na društvenim mrežama.
• Svakome ko treba kopirati heksadecimalni kod boje iz slike – na primjer, da bi uskladili boju logotipa, fotografije ili screenshot-a.

Kako se HEX razlikuje od RGB i HSL

Heksadecimalni kod je kompaktna reprezentacija RGB vrijednosti. Svaki par cifara (00–FF) predstavlja crvenu, zelenu i plavu komponentu. Na primjer, #FF6600 je isto što i rgb(255, 102, 0). Glavna prednost HEX-a je što se ne koriste zagrade, zarezi ni funkcijske notacije – direktno se ubacuje u HTML ili CSS.

HSL (hue, saturation, lightness) daje drugačiji način opisivanja iste boje, ali nije direktno podržan u svim CSS svojstvima bez funkcije hsl(). Alat prikazuje HSL radi potpunosti, ali primarni izlaz je HEX.

Često postavljana pitanja

1. Zašto se prikazana HEX boja razlikuje od one koju vidim na ekranu? Monitori i preglednici mogu imati različite profile boja i kalibracije. Alat čita sirove vrijednosti piksela iz slike koja je učitana, bez ikakvog prilagođavanja. Ako je slika u sRGB prostoru, boja će biti tačna za taj prostor. Kod JPEG‑a sa kompresijom, susjedni pikseli mogu imati blago različite vrijednosti.

2. Mogu li da uzorkujem boju s prozirnim pikselom? Da. Alat prikazuje tačnu RGBA vrijednost (RGB + alpha). HEX kod ne sadrži alfa, pa se prozirnost prijavljuje kao postotak. Ako piksel ima alfa 128 (50% prozirnosti), vidjet ćete “Alpha 50%”. Boja se snima s tim alfa podatkom, ali u historiji se čuva samo HEX+RGB+HSL bez alfa.

3. Zašto se neki pikseli ne mogu odabrati pomoću miša? Uvećani prikaz (magnifier) aktivira se automatski. Ako je slika vrlo mala, miš možda neće moći dovoljno precizno ciljati. Koristite tastaturne prečice (strelicama) za pomicanje krsta piksel po piksel.

4. Kako da obrišem historiju boja? Kliknite na “Start over” dugme, koje briše sliku i historiju. Ne postoji način da se pojedinačno obrišu stavke iz historije.

5. Da li su moje slike sigurne? Da. Obrada se odvija u potpunosti u vašem pregledniku (klijentska strana). Slika se ne šalje na server, tako da nema opasnosti od curenja privatnih podataka.

6. Zašto je maksimalna veličina slike ograničena na 4096 piksela? Veće slike zahtijevaju više memorije i mogu usporiti rad alata. Skaliranje na 4096 piksela (duža stranica) omogućava brzo uzorkovanje bez značajnog gubitka preciznosti, posebno za vizuelno identične boje. Ako vam je potrebna apsolutna tačnost na nivou sub‑piksela, preporučuje se korištenje slike manje rezolucije.

---

Ovaj alat pruža brz i pouzdan način za dobijanje heksadecimalnih kodova boja direktno iz slika, prilagođen potrebama web developera, dizajnera i svih koji rade s digitalnim bojama.