CodeKitHubŠto je ovaj alat?
Birač boje pretvara vizualan odabir — ovu nijansu plave, taj točan piksel na logu — u numeričke kodove koje softver razumije. Ista boja ima nekoliko ekvivalentnih zapisa: HEX (#3b82f6) dominira u CSS-u i pri predaji dizajna, RGB (59, 130, 246) odgovara načinu na koji zasloni i kod predstavljaju boju, a HSL (217°, 91%, 60%) opisuje nijansu, zasićenost i svjetlinu na način razumljiv ljudima.
Druga polovica alata je pipeta za slike. Učitajte snimku zaslona, logo ili fotografiju i kliknite bilo koju točku da uzorkujete boju ispod pokazivača — standardan način odgovaranja na pitanje "koja je ovo točno boja?". Kada preglednik podržava EyeDropper API, koristi se ugrađena povećana lupa; u drugim preglednicima alat čita vrijednost piksela s kopije slike na canvasu. U oba slučaja obrada je lokalna: slika se nikad ne šalje na server.
Zašto ga koristiti?
- Tri formata odjednom: svaka odabrana boja prikazuje se kao HEX, RGB i HSL istovremeno, svaki s gumbom za kopiranje jednim klikom — bez zasebnog koraka konverzije.
- Odabir sa slike: učitajte bilo koju sliku i kliknite za uzorkovanje točne boje piksela — idealno za izvlačenje boja marke s loga ili usklađivanje boje viđene na snimci zaslona.
- Koristi ugrađenu pipetu preglednika s povećalom kad je dostupna, a inače precizno čitanje piksela s canvasa.
- Prikaz boje uživo pokazuje trenutnu boju na prvi pogled, tako da možete potvrditi odabir prije kopiranja.
- Besplatno, trenutno i potpuno lokalno: boje se računaju, a slike čitaju u vašem pregledniku — ništa se ne šalje, pohranjuje niti bilježi.
Kako ga koristiti
- Odaberite boju poljem za boju ili zalijepite/uredite vrijednost izravno.
- Za uzorkovanje sa slike, učitajte sliku i kliknite točku čiju boju želite.
- Pročitajte HEX, RGB i HSL vrijednosti, prikazane zajedno s prikazom boje uživo.
- Kliknite gumb za kopiranje pored formata koji vam treba — HEX za CSS, RGB ili HSL za kod.
Primjer
Ulaz
Klik na plavo područje učitanog logaIzlaz
HEX #3b82f6 · RGB rgb(59, 130, 246) · HSL hsl(217, 91%, 60%)Sve tri linije opisuju identičnu boju. Koristite HEX u stylesheetovima i dizajnerskim alatima, RGB gdje kod očekuje vrijednosti kanala, a HSL kada želite izvesti svjetlije ili tamnije varijante mijenjajući samo zadnji broj.
Koji format boje za koji posao
Moderni CSS prihvaća sva tri gdje god je boja dopuštena, pa je izbor pitanje radnog tijeka, ne kompatibilnosti. Timovi obično standardiziraju HEX u dizajnerskim tokenima, a zatim koriste HSL pri istraživanju varijacija — promijenite svjetlinu za 10–15 bodova za upotrebljivo hover stanje bez pomicanja nijanse.
| Format | Primjer | Najbolji za |
|---|---|---|
| HEX | #3b82f6 | CSS, dizajnerski alati, dijeljenje boja u chatu i specifikacijama |
| RGB | rgb(59, 130, 246) | Kod koji manipulira kanalima, crtanje na canvasu, prozirnost pomoću rgba() |
| HSL | hsl(217, 91%, 60%) | Izrada svjetlijih/tamnijih/hover varijanti, izgradnja paleta |
Od odabrane boje do gotovog CSS-a
Uzorkovanje boje obično je prvi korak zadatka stiliziranja. Ako vam ista boja treba u drugim zapisima — CMYK za tisak ili OKLCH vrijednost za CSS širokog gamuta — Pretvarač boja nastavlja gdje ovaj birač staje.
Odabrana boja često ide izravno u vizualni efekt: Generator Box Shadowa koristi HEX vrijednost za realistične sjene, a zaobljene kartice izrađene Generatorom Border Radiusa upotpunjuju izgled.
→ Pretvarač boja · Generator box-shadow · Generator border-radius
Često postavljana pitanja
Koja je razlika između HEX, RGB i HSL?
To su tri zapisa istog modela boja. HEX pakira crveni, zeleni i plavi kanal u šest heksadecimalnih znamenki (#3b82f6) i najčešći je oblik u CSS-u i dizajnerskim alatima. RGB navodi ista tri kanala kao decimalne brojeve od 0 do 255. HSL ponovno izražava boju kao nijansu (0–360°), zasićenost i svjetlinu — mnogo intuitivnije kada želite "istu boju, samo svjetliju". Pretvorba između njih nikad ne mijenja boju.
Kako radi odabir boje sa slike?
Učitana slika se crta na nevidljivi canvas u vašem pregledniku. Kad kliknete, alat čita crvenu, zelenu i plavu vrijednost piksela na toj točnoj poziciji i pretvara ih u HEX, RGB i HSL. U preglednicima koji podržavaju EyeDropper API (Chrome i Edge na desktopu) umjesto toga otvara se ugrađena povećavajuća lupa, tako da možete birati s preciznošću piksela bilo gdje na zaslonu.
Šalje li se moja slika ikamo?
Ne. Slika se otvara izravno u vašem pregledniku i čita lokalno s canvasa; nijedna datoteka niti podatak o boji nikad se ne prenosi niti pohranjuje. Možete učitati stranicu, otići offline, a birač i pipeta za slike i dalje rade — što ga čini sigurnim za neobjavljene dizajne i interne snimke zaslona.
Zašto se odabrana boja ne podudara točno s onim što vidim na zaslonu?
Dva uobičajena razloga. Anti-aliasing: pikseli na rubovima teksta i oblika miješaju se s pozadinom, pa klik jedan piksel dalje daje međuboju — umjesto toga uzorkujte iz pune sredine područja. Upravljanje bojama: JPG/PNG datoteke s neuobičajenim profilima boja mogu se prikazivati blago drugačije na različitim zaslonima; alat prijavljuje vrijednost piksela kako je pohranjena u datoteci, što je vrijednost koja vam treba za dizajnerski rad.
Koji format kopirati za CSS?
HEX je najsigurniji izbor — svaki preglednik i alat ga prihvaća. Koristite HSL kada planirate izraditi hover ili dark-mode varijante, jer prilagodba samo komponente svjetline zadržava nijansu i zasićenost dosljednima. RGB je uglavnom koristan kad kod gradi boje iz numeričkih kanala, ili pri dodavanju prozirnosti, gdje rgba(59, 130, 246, 0.5) djeluje jasnije od osmoznamenkastog HEX-a.