CodeKitHubKaj je to orodje?
Izbirnik barv spremeni vizualno izbiro — ta odtenek modre, tista natančna slikovna pika v logotipu — v numerične kode, ki jih razume programska oprema. Ista barva ima več enakovrednih zapisov: HEX (#3b82f6) prevladuje v CSS-ju in pri predaji oblikovalskih datotek, RGB (59, 130, 246) ustreza temu, kako zasloni in koda predstavljajo barvo, HSL (217°, 91%, 60%) pa opisuje odtenek, nasičenost in svetlost na način, o katerem lahko ljudje logično razmišljajo.
Druga polovica orodja je eyedropper za slike. Naloži posnetek zaslona, logotip ali fotografijo in klikni katero koli točko, da vzorčiš barvo pod kazalcem — standarden način za odgovor na vprašanje "katera barva je to natanko?". Kjer brskalnik podpira API EyeDropper, se uporabi izvorna povečevalna lupa; v drugih brskalnikih orodje prebere vrednost slikovne pike s kopije slike na platnu. V obeh primerih obdelava poteka lokalno: slika se nikoli ne naloži na strežnik.
Zakaj ga uporabiti?
- Tri oblike hkrati: vsaka izbrana barva je prikazana kot HEX, RGB in HSL istočasno, vsaka s svojim gumbom za kopiranje z enim klikom — brez ločenega koraka pretvorbe.
- Izbira iz slike: naloži katero koli sliko in klikni, da vzorčiš natančno barvo slikovne pike — odlično za pridobivanje barv blagovne znamke iz logotipa ali ujemanje barve, opažene na posnetku zaslona.
- Uporablja izvorni EyeDropper brskalnika s povečevalnikom, kjer je na voljo, drugod pa se zanese na natančno branje slikovnih pik s platna.
- Živ vzorčnik predogleda prikaže trenutno barvo na prvi pogled, da lahko izbiro preveriš pred kopiranjem.
- Brezplačno, takojšnje in v celoti lokalno: barve se izračunajo, slike pa preberejo v tvojem brskalniku — nič se ne naloži, shrani ali beleži.
Kako ga uporabljati
- Izberi barvo s poljem za barvo ali prilepi/uredi vrednost neposredno.
- Za vzorčenje s slike naloži sliko in klikni točko, katere barvo želiš.
- Preberi vrednosti HEX, RGB in HSL, prikazane skupaj z živim vzorčnikom predogleda.
- Klikni gumb za kopiranje ob obliki, ki jo potrebuješ — HEX za CSS, RGB ali HSL za kodo.
Primer
Vnos
Klik na modro območje naloženega logotipaRezultat
HEX #3b82f6 · RGB rgb(59, 130, 246) · HSL hsl(217, 91%, 60%)Vse tri vrstice opisujejo identično barvo. Uporabi HEX v slogovnih predlogah in oblikovalskih orodjih, RGB kjer koda pričakuje vrednosti kanalov, in HSL, ko želiš z spremembo le zadnje številke izpeljati svetlejše ali temnejše različice.
Katera oblika barve za katero delo
Sodobni CSS sprejme vse tri oblike povsod, kjer je dovoljena barva, zato je izbira odvisna od poteka dela, ne od združljivosti. Ekipe se pogosto poenotijo na HEX pri oblikovalskih žetonih, nato pa uporabljajo HSL med raziskovanjem različic — spremeni svetlost za 10–15 točk, da dobiš uporabno stanje ob lebdenju brez premika odtenka.
| Oblika | Primer | Najboljša za |
|---|---|---|
| HEX | #3b82f6 | CSS, oblikovalska orodja, deljenje barv v klepetu in specifikacijah |
| RGB | rgb(59, 130, 246) | Koda, ki obdeluje kanale, risanje na platno, prosojnost rgba() |
| HSL | hsl(217, 91%, 60%) | Ustvarjanje svetlejših/temnejših/hover različic, gradnja palet |
Od izbrane barve do dokončanega CSS-ja
Vzorčenje barve je običajno prvi korak oblikovalske naloge. Če potrebuješ isto barvo v drugih zapisih — CMYK za tisk ali vrednost OKLCH za širok barvni razpon v CSS-ju — Pretvornik barv nadaljuje tam, kjer ta izbirnik konča.
Izbrana barva pogosto pristane naravnost v vizualnem učinku: Generator senc (Box Shadow) vzame vrednost HEX za realistične sence, zaobljene kartice, izdelane z Generatorjem robnega radija, pa dokončajo videz.
→ Pretvornik barv · Generator box-shadow · Generator border-radius
Pogosta vprašanja
Kakšna je razlika med HEX, RGB in HSL?
Gre za tri zapise istega barvnega modela. HEX stisne rdeči, zeleni in modri kanal v šest šestnajstiških števk (#3b82f6) in je najpogostejša oblika v CSS-ju in oblikovalskih orodjih. RGB navede iste tri kanale kot decimalna števila od 0 do 255. HSL barvo znova izrazi kot odtenek (0–360°), nasičenost in svetlost — veliko bolj intuitivno, kadar želiš "isto barvo, le svetlejšo". Pretvorba med njimi nikoli ne spremeni barve.
Kako deluje izbira barve s slike?
Naložena slika se nariše na nevidno platno v tvojem brskalniku. Ko klikneš, orodje prebere vrednosti rdeče, zelene in modre komponente slikovne pike na tistem natančnem mestu in jih pretvori v HEX, RGB in HSL. V brskalnikih, ki podpirajo API EyeDropper (Chrome in Edge na namizju), se namesto tega odpre izvorna povečevalna lupa, tako da lahko izbereš s piksel natančno kjerkoli na zaslonu.
Ali je moja slika kam naložena?
Ne. Sliko odpre neposredno tvoj brskalnik in jo lokalno prebere s platna; nobena datoteka ali barvni podatek se nikoli ne prenaša ali shranjuje. Stran lahko naložiš, greš brez povezave, orodje za izbiro in eyedropper za slike pa še vedno delujeta — kar je varno za neobjavljene zasnove in interne posnetke zaslona.
Zakaj se izbrana barva natančno ne ujema s tem, kar vidim na zaslonu?
Dva pogosta razloga. Anti-aliasing: slikovne pike na robovih besedila in oblik so zlite z ozadjem, zato klik za en piksel stran da vmesno barvo — namesto tega vzorči iz polnega dela sredine površine. Upravljanje barv: datoteke JPG/PNG z nenavadnimi barvnimi profili se lahko na različnih zaslonih rahlo drugače izrišejo; orodje poroča o vrednosti slikovne pike, kot je shranjena v datoteki, kar je vrednost, ki jo potrebuješ za oblikovalsko delo.
Katero obliko naj kopiram za CSS?
HEX je najvarnejša privzeta izbira — sprejme jo vsak brskalnik in orodje. Uporabi HSL, kadar nameravaš ustvariti različice za lebdenje ali temni način, saj prilagajanje samo komponente svetlosti ohrani odtenek in nasičenost dosledna. RGB je predvsem uporaben, kadar koda gradi barve iz numeričnih kanalov ali kadar dodajaš prosojnost, kjer rgba(59, 130, 246, 0.5) deluje jasneje kot osemmestni HEX.