Orodje za pridobivanje šestnajstiških barvnih kod iz slik
Kaj to orodje počne in po čem se razlikuje
Orodje omogoča, da izberete sliko z naprave, nato s kazalcem ali klikom izberete poljuben piksel. Takoj prikaže šestnajstiško barvno kodo (HEX) tega piksla, skupaj z vrednostmi RGB in HSL. Kodo lahko kopirate za uporabo v CSS, oblikovalski programski opremi ali katerem koli drugem projektu. Povečan pogled pomaga natančno določiti želeni piksel, več barv pa lahko shranite v zgodovino za poznejšo uporabo.
Glavna razlika v primerjavi s sorodnimi stranmi (ki se osredotočajo na RGB funkcionalni zapis ali HSL) je v tem, da je izhodna vrednost šestnajstiška koda HEX. Gre za šestmestni (ali redkeje trimestni skrajšani) RGB zapis, ki je standard v CSS in oblikovalskih orodjih. Šestmestna HEX koda ne nosi alfa kanala – morebitna prosojnost je prikazana ločeno kot odstotek: »Alpha ‹n› % – ta piksel je delno prosojen.«
Ker je HEX kompakten in spletno naraven format, je ta stran prva izbira, kadar potrebujete barvno vrednost, ki jo lahko neposredno vstavite v lastnost color, background-color ali katero koli drugo CSS lastnost brez dodatnih oklepajev ali sintakse. Na primer #1E90FF deluje takoj, medtem ko rgb(30, 144, 255) zahteva oklepaje in vejice.
Vhodi in izhodi – kaj orodje sprejme in kaj vrne
Vhodne datoteke
Orodje sprejme slike v naslednjih formatih: PNG, JPG, WebP, GIF, AVIF, HEIC. Sprejemljivi MIME tipi so: image/jpeg, image/png, image/webp, image/gif, image/avif, image/heic, image/heif. Če spustite nepodprto vrsto datoteke, se prikaže sporočilo: »Ta vrsta datoteke ni podprta. Poskusite PNG, JPG, WebP, GIF, AVIF ali HEIC sliko.«
Izhodi in sporočila
Ko je slika naložena, orodje izpiše:
- »Slika je pripravljena – premikajte se po njej za vzorčenje, kliknite za shranjevanje barve.«
- Dimenzije slike (širina × višina).
- Koordinate piksla (x, y).
- HEX: šestnajstiška barvna koda (npr.
#1E90FF). - RGB: vrednosti rdeče, zelene in modre.
- HSL: odtenek, nasičenost, svetlost.
- Če je piksel delno prosojen: »Alpha ‹n› % – ta piksel je delno prosojen.«
- Ob kliku: »Shranjeno ‹hex› v vaše izbore.«
- Zgodovina shranjenih barv (do 12 vnosov) – klik na barvni vzorec naloži to barvo nazaj.
- Klik na katero koli prikazano barvno vrednost (HEX, RGB, HSL) jo kopira v odložišče.
Če brskalnik blokira dostop do odložišča, se prikaže: »Kopiranje ni uspelo – vaš brskalnik je blokiral dostop do odložišča.«
Privzeti prikaz ob nalaganju
Ko je slika naložena, se takoj prikažejo barvne vrednosti in koordinate osrednjega piksla. To pomeni, da vam ni treba najprej premikati miške – takoj dobite vzorec iz sredine slike.
Vidnostni kot – kako natančno vzorčimo barve
Orodje uporablja povečan pogled (magnifier), ki omogoča natančno določanje želenega piksla. To je ključno, ker lahko stiskanje slike (JPEG, WebP) ali anti‑aliasing (glajenje robov) povzročita, da se navidez enakomerno obarvana površina v resnici sestoji iz več različnih pikslov. Pri JPEG so pogosti artefakti v obliki blokov, pri PNG z gladkimi prehodi pa lahko sosednji piksli kažejo rahle razlike v barvi. Povečan pogled omogoča, da izberete točno tisti piksel, ki ga želite, namesto da bi se zanašali na grobo orientacijo.
Orodje prikaže natančno vrednost piksla, kakršna je shranjena v sliki. Če je slika JPEG ali posnetek zaslona, sta stiskanje in anti‑aliasing lahko spremenila vrednosti pikslov. To je pomembno vedeti: barva, ki jo vidite na zaslonu, ni nujno enaka izvirni barvi v datoteki. Zato orodje vedno bere vrednosti neposredno iz slikovnih podatkov, ne iz prikaza na zaslonu.
Prosojnost in alfa kanal
HEX zapis v šestmestni obliki ne vsebuje alfa kanala. Če ima piksel delno prosojnost (npr. 50‑odstotno prosojnost), orodje HEX kodo še vedno prikaže kot šestmestno vrednost (brez alfa), prosojnost pa izpiše ločeno v obliki: »Alpha 50 % – ta piksel je delno prosojen.« To pomeni, da orodje upošteva le barvno komponento piksla, ne pa morebitnega ozadja za njim. Polprosojen piksel se bere samostojno, brez upoštevanja, kaj je za njim.
Tipkovniška navigacija – natančnost brez miške
Orodje podpira tipkovniško krmarjenje, kar je uporabno za dostopnost in za zelo natančno izbiranje pikslov, kadar miška ni dovolj natančna.
- Puščične tipke (gor, dol, levo, desno) premikajo križec po sliki za en piksel na pritisk.
- Pritisnjena tipka Shift skupaj s puščično tipko premakne križec za 10 pikslov.
- Tipki Enter ali preslednica shranita trenutno vzorčeno barvo v zgodovino.
To omogoča natančno nastavljanje koordinat, še posebej pri slikah z visoko ločljivostjo ali pri vzorčenju robov, kjer je vsak piksel pomemben.
Zgodovina shranjevanja in upravljanje barv
Ko kliknete na sliko, se trenutna barva shrani v zgodovino izborov. Zgodovina lahko vsebuje največ 12 vnosov. Vsak vnos vključuje HEX kodo (in po potrebi opombo o prosojnosti). Če imata dva piksla enake RGB vrednosti, vendar različno alfa vrednost (na primer en je neprosojen, drugi 50‑odstotno prosojen), se obravnavata kot ločena vnosa v zgodovino.
S klikom na barvni vzorec v zgodovini se ta barva znova naloži v prikazane vrednosti (HEX, RGB, HSL), kar vam omogoči kopiranje ali nadaljnjo uporabo.
Zgodovina ostane na voljo, dokler ne kliknete gumba »Začni znova« (Start over), ki počisti sliko, izprazni zgodovino in orodje vrne v začetno stanje.
Omejitve in robni pogoji
Velikost slike
Slike, katerih najdaljša stranica presega 4096 pikslov, se samodejno pomanjšajo. To je pomembno za zmogljivost, saj obdelava zelo velikih slik v brskalniku lahko upočasni delovanje. Pomanjšanje vpliva na natančnost – piksel, ki ga vzorčite, je dejansko piksel pomanjšane slike, ne izvirnika.
Napake pri odpiranju
Če slike ni mogoče odpreti (je poškodovana ali v nepodprtem formatu), se prikaže sporočilo: »Te slike ni bilo mogoče odpreti. Morda je poškodovana ali v nepodprtem formatu.«
Kopiranje v odložišče
Klik na katero koli prikazano barvno vrednost (HEX, RGB, HSL) poskuša kopirati vrednost v odložišče. Če brskalnik to blokira (zaradi varnostnih nastavitev ali pomanjkanja uporabniške interakcije), se prikaže že omenjeno opozorilo. Priporočljivo je, da orodje uporabljate v sodobnem brskalniku z omogočenim dostopom do odložišča.
Format HEX – zakaj je tako pomemben
Šestnajstiški zapis je standard v spletnem razvoju. Vsak par števk predstavlja en kanal (rdečo, zeleno, modro) v obsegu 00–FF (0–255). Zapis #1E90FF je enakovreden rgb(30, 144, 255). Ker HEX ne potrebuje oklepajev ali funkcijskega klica, ga je mogoče uporabiti v CSS lastnostih brez dodatnega sintaktičnega šuma. Prav tako ga podpirajo vsa oblikovalska orodja (Figma, Photoshop, Sketch) in orodja za urejanje barvnih palet.
Pogosta vprašanja (FAQ)
Ali orodje deluje z animiranimi GIF‑i?
Da, orodje sprejme GIF datoteke. Vzorči se trenutno prikazani okvir. Ker GIF nima alfa kanala (razen v redkih primerih), je prosojnost običajno nedoločena.
Zakaj dobim različne barve, če vzorčim isti del slike večkrat?
Če je slika stisnjena (JPEG, WebP), se lahko vrednosti pikslov zaradi izgube pri stiskanju nekoliko razlikujejo. Tudi anti‑aliasing pri PNG lahko povzroči, da robovi vsebujejo vmesne barve. Zato je povečan pogled ključen.
Kaj pomeni sporočilo »Alpha 0 % – ta piksel je popolnoma prosojen«?
Če je alfa vrednost 0 %, je piksel popolnoma prozoren. Njegove RGB vrednosti so lahko poljubne, vendar niso vidne. HEX koda prikazuje barvne komponente, ki pa dejansko nimajo vizualnega pomena, dokler alfa ni 100 %. Orodje tak piksel prikaže, vendar opozori na popolno prosojnost.
Ali lahko shranim več kot 12 barv?
Ne. Zgodovina je omejena na 12 vnosov. Če želite shraniti več, morate obstoječe barve najprej kopirati (s klikom nanje) in jih shraniti drugam, nato pa zaženite znova ali pa zbrišite zgodovino z gumbom »Začni znova«.
Kako prenesem barvo v Figmo ali drugo programsko opremo?
Preprosto kliknite HEX kodo, da se kopira v odložišče, nato jo prilepite v Figmo (ali drugo orodje) v polje za barvo. Šestnajstiški zapis deluje povsod.
Zakaj se ob kliku na sliko ne shrani barva?
Preverite, ali je slika pravilno naložena. Ko kliknete, se mora prikazati sporočilo »Shranjeno …«. Če se ne, je morda prišlo do težave z brskalnikom. Poskusite osvežiti stran in ponovno naložiti sliko.