Birač boja
Odaberite bilo koju boju sa slike i odmah dobijte HEX, RGB, HSL, HSV i CMYK kodove.
Učitajte sliku za odabir boje
Povucite i ispustite, zalijepite ili pregledajte — PNG, JPG, WEBP ili GIF
Savjet: sliku možete zalijepiti i pomoću Ctrl/Cmd + V
Kodovi boja
Najbliži naziv boje: Royal Blue
Harmonije boja
Provjera kontrasta (WCAG)
Primjer teksta
Spremljene boje
Još nema spremljenih boja — odaberite jednu i dodirnite „Spremi boju”.
Birač boja alat je koji vam omogućuje da iz bilo koje slike izvučete točnu boju jednim klikom i odmah dobijete njezin kod u svim uobičajenim zapisima. Umjesto nagađanja ili ručnog uspoređivanja nijansi, dovoljno je učitati sliku, kliknuti kapaljkom na željeni piksel i pročitati HEX, RGB, HSL, HSV i CMYK vrijednost te boje. Alat je koristan u web dizajnu i razvoju, pripremi za tisak, izradi logotipa i vizualnog identiteta, kao i u provjeri pristupačnosti prema WCAG standardu.
Cijeli proces odvija se besplatno i izravno u vašem pregledniku — slika se nikada ne šalje na server, pa je potpuno privatan za osobne i poslovne projekte. Osim čitanja pojedinačnih kodova boja, alat izdvaja cijelu paletu dominantnih boja sa slike, predlaže skladove boja (komplementarne, analogne, trijadne i druge) te provjerava kontrast teksta i pozadine za web pristupačnost.
Kako odabrati boju sa slike
- 1
Učitajte sliku
Povucite i ispustite sliku u polje za učitavanje, zalijepite je izravno iz međuspremnika (Ctrl/Cmd + V) ili odaberite datoteku s računala — podržani su formati PNG, JPG, WEBP i GIF.
- 2
Kliknite kapaljkom na piksel
Pomaknite pokazivač preko slike i kliknite točno na dio boje koji vas zanima. Uvećani prikaz olakšava precizan odabir čak i na sitnim detaljima.
- 3
Pročitajte i kopirajte kodove
Odmah se prikazuju HEX, RGB, HSL, HSV i CMYK vrijednosti odabrane boje. Kliknite na bilo koji kod da ga kopirate u međuspremnik za izravno korištenje u CSS-u, dizajnerskom alatu ili dokumentu za tisak.
- 4
Izdvojite paletu iz slike
Pokrenite automatsko izdvajanje palete kako biste dobili skup dominantnih boja s cijele slike — idealno za brzo definiranje boja marke ili web stranice.
- 5
Generirajte sklad boja
Za odabranu boju stvorite komplementarnu, analognu, trijadnu, tetradnu, podijeljeno-komplementarnu ili monokromatsku shemu koja se automatski izračunava na temelju boje s koje ste krenuli.
- 6
Provjerite kontrast i spremite paletu
Provjerite WCAG kontrast između boje teksta i pozadine kako biste osigurali čitljivost, a zatim spremite omiljene boje i izvezite cijelu paletu kao CSS, JSON ili PNG datoteku.
HEX, RGB, HSL, HSV i CMYK objašnjeni
Ista boja može se zapisati na nekoliko različitih načina, ovisno o tome gdje se koristi — svaki model boja ima svoju svrhu i prednosti u određenom kontekstu.
| Model | Example | Best for |
|---|---|---|
| HEX | #3B82F6 | Web stranice i CSS |
| RGB | rgb(59, 130, 246) | Zasloni i digitalni prikaz |
| HSL | hsl(217, 91%, 60%) | Intuitivno podešavanje nijanse, zasićenja i svjetline |
| HSV | hsv(217, 76%, 96%) | Dizajnerski alati i odabir boja |
| CMYK | cmyk(76%, 47%, 0%, 4%) | Tisak i pripremu za grafičku proizvodnju |
Web i UI dizajn
Pri izradi web stranica i sučelja često je potrebno uskladiti boju s postojećim vizualnim identitetom — primjerice, ponoviti točnu boju iz logotipa ili fotografije proizvoda. Umjesto ručnog pogađanja, birač boja daje točan HEX kod koji se odmah može koristiti u dizajnu i kodu.
Front-end razvoj (CSS varijable)
Razvojni programeri mogu izdvojiti boje izravno iz maketa ili slika i pretvoriti ih u CSS varijable, Tailwind konfiguracije ili varijable dizajnerskog sustava, čime se osigurava dosljednost boja kroz cijelu aplikaciju.
Tisak i brendiranje
Za tiskane materijale — letke, vizitke, ambalažu — boje se moraju definirati u CMYK zapisu kako bi ispis odgovarao ekranskom prikazu. Birač boja automatski izračunava CMYK vrijednost svake odabrane boje, olakšavajući suradnju s tiskarama.
Pristupačnost (WCAG kontrast)
Dovoljan kontrast između teksta i pozadine ključan je za čitljivost i zakonsku usklađenost web sadržaja. Ugrađena provjera WCAG kontrasta odmah pokazuje prolazi li kombinacija boja AA ili AAA razinu za normalan i uvećani tekst.
Usporedba
Postoji nekoliko alata za odabir boje sa slike na internetu, no razlikuju se po opsegu funkcija i iskustvu korištenja. Evo kako se naš birač boja uspoređuje s popularnim alatom imagecolorpicker.com.
| Modeli boja | HEX, RGB, HSL, HSV i CMYK odjednom | Uglavnom samo HEX i RGB |
| CMYK za tisak | Uključen za svaku odabranu boju | Nije dostupan |
| Provjera WCAG kontrasta | Ugrađena provjera AA/AAA razine | Nije dostupna |
| Sklad boja | Šest vrsta shema jednim klikom | Nije dostupno |
| Oglasi | Bez oglasa, čist prikaz | Prikazuje oglase na stranici |
Često postavljana pitanja
Kako mogu odabrati boju sa slike?
Učitajte sliku povlačenjem, lijepljenjem ili odabirom datoteke, a zatim kliknite kapaljkom točno na dio slike čiju boju želite provjeriti. Alat odmah prikazuje HEX, RGB, HSL, HSV i CMYK vrijednost te točke.
Što je HEX kod boje?
HEX kod je šesteroznamenkasti zapis boje u heksadecimalnom sustavu, primjerice #3B82F6, koji se najčešće koristi u web dizajnu i CSS-u jer kompaktno i precizno opisuje crvenu, zelenu i plavu komponentu boje.
Kako pretvoriti RGB u HEX?
Dovoljno je odabrati boju u birač boja alatu — RGB i HEX vrijednosti prikazuju se istovremeno, pa nije potrebno ručno računati pretvorbu. Klikom na HEX kod odmah ga kopirate u međuspremnik.
Kako izraditi paletu boja iz fotografije?
Nakon što učitate fotografiju, upotrijebite funkciju izdvajanja palete kako biste automatski dobili skup dominantnih boja sa slike. Svaku boju iz palete možete zasebno odabrati, kopirati ili spremiti za kasnije korištenje.
Kako provjeriti kontrast boja za pristupačnost?
U odjeljku za provjeru kontrasta odaberite boju teksta i boju pozadine — alat izračunava omjer kontrasta i pokazuje prolazi li kombinacija WCAG AA i AAA kriterije za normalan i uvećani tekst.
Je li alat besplatan i siguran za privatnost?
Da, birač boja potpuno je besplatan za korištenje bez ograničenja. Sve obrade slike odvijaju se lokalno u vašem pregledniku, a slika se nikada ne šalje niti pohranjuje na serveru, čime je vaša privatnost u potpunosti zaštićena.
