# Kotač boja

> Kotač boja HSV, HSL i slikarski RYB, gotove harmonije boja i pretvorba HEX, RGB, HSL, OKLCH i CMYK. Uz to najbliži Tailwind token. Besplatno, bez instalacije.

URL: https://acrafto.com/hr/online-birac-boja-pretvornik/  
Updated: 2026-09-23

Tools are interactive browser apps; there is no public API, no endpoints to call and no server-side processing. To use a tool, open its HTML page in a browser.

Odaberite boju na kotaču, dotjerajte je na platnu za zasićenost i svjetlinu, i pročitajte je natrag u svakom formatu kojim govori vaš projekt, od `#RRGGBB` do `oklch()`. Ovaj alat radi i ono što drugi birači boja preskaču: tri geometrije kotača uključujući tradicionalni slikarski RYB kotač, harmonije koje vam same sastave paletu, alfa kanal i izvoz cijele palete jednim klikom kao CSS varijable, SCSS ili JSON. Sve se izračunava u vašem pregledniku.

## RYB ili RGB? Tri kotača boja umjesto jednog

Odabirnik **Način kotača** mijenja raspored nijansi na kotaču:

- **HSV** i **HSL** su digitalni kotači. Nijanse su raspoređene onako kako ih miješa svjetlo na zaslonu. Razlikuju se u kvadratnom platnu: kod HSV-a najsvjetliji kut je čista nijansa, dok HSL čiste nijanse smješta na sredinu svjetline s bijelom iznad.
- **RYB (slikarski)** raspoređuje nijanse onako kako ih znaju slikari: crvena, žuta i plava kao primarne boje, s narančastom, zelenom i ljubičastom između njih ([model RYB na Wikipediji](https://en.wikipedia.org/wiki/RYB_color_model), na engleskom). Razliku uočite najviše kod harmonija. Na RYB kotaču komplementarna boja crvenoj je **zelena**, a komplementarna boja plavoj je **narančasta**, klasični pigmentni parovi iz likovnog. Digitalni kotač spaja crvenu s cijan bojom. Ako vam se “komplementarna” paleta iz običnog birača boja ikad učinila pogrešnom, sad znate zašto.

## Harmonije boja koje vam same sastave paletu

U polju **Harmonija boja** odaberite pravilo. Kotač će označiti pripadajuće boje, a ispod se prikaže gotova paleta:

- **Komplementarna:** jedna suprotna boja. Najjači kontrast, dobra za jedan naglasak uz glavnu boju brenda.
- **Razdvojeno-komplementarna:** dva susjeda komplementarne boje. Gotovo jednako jak kontrast, mnogo lakše ga je uravnotežiti.
- **Trijadna:** tri ravnomjerno raspoređene nijanse. Živopisno, a stabilno, kad jedna dominira, a druge dvije koristite štedljivo.
- **Tetradna (kvadrat):** četiri nijanse. Bogate kombinacije za ilustracije i grafikone, teško ih je uravnotežiti u sučelju aplikacije.
- **Analogna:** najbliži susjedi. Smirena kombinacija za pozadine i prijelaze.
- **Monokromatska:** jedna nijansa u nekoliko razina svjetline. Najsigurniji izbor za stanja gumba (hover, aktivno, onemogućeno).

Cijelu paletu kopirate jednim klikom u formatu koji odaberete: obični **HEX**, **RGB**, **HSL**, **OKLCH**, **CSS varijable** (`--color-1: …`) spremne za lijepljenje, **SCSS varijable** ili **JSON** za kod. Drži li paleta dovoljan kontrast i za ljude koji teže razlikuju nijanse, brzo provjerite na snimci zaslona nakon [pretvorbe u sive tonove](https://acrafto.com/hr/pretvaranje-slika-u-sivim-tonovima-online/).

## Pretvorba HEX, RGB, HSL, OKLCH i CMYK: zalijepite bilo što, dobijete sve

Polja za unos prihvaćaju gotovo svaki zapis boje: `#f80`, `#ff8800`, osmeroznamenkasti hex s prozirnošću, `rgb()` i `rgba()`, `hsl()`, `hwb()`, `lch()`, `oklch()`, `oklab()`, `cmyk()`, `0xFF8800` i imenovane CSS boje poput `rebeccapurple`. Što god unesete, dobijete sedam usklađenih izlaza: **HEX, RGB, HSL, HSV, LCH, OKLCH i CMYK**, svaki sa svojim gumbom za kopiranje.

Klizač **Neprozirnost (alfa)** ispod pregleda prebacuje izlaze u prozirne zapise `#RRGGBBAA`, `rgba()` i `hsla()`. Pregled se pritom iscrtava na kockastoj podlozi, tako da prozirnost odmah vidite.

## Najbliži Tailwind CSS token za bilo koju boju

Dva oblačića ispod pregleda imenuju boju: **najbliža imenovana CSS boja** (korisno za brze prototipove) i **najbliži Tailwind token**, na primjer `orange-500`. Tako ostajete unutar svog dizajn sustava i ne izmišljate jednokratne vrijednosti. Klikom na oblačić ga kopirate.

Time se rješava pitanje koje se pojavi kod svakog predavanja dizajna: dizajner mi je poslao hex kod, koja mu Tailwind klasa najbolje odgovara? Podudaranje se računa prema zadanoj paleti Tailwind CSS-a 4 (vidi [dokumentaciju Tailwinda](https://tailwindcss.com/docs/colors), na engleskom), tako da token možete odmah upotrijebiti u nazivu klase.

## Koji format boje upotrijebiti?

| Format | Puni naziv | Kada ga koristiti |
| :--- | :--- | :--- |
| **HEX** | Hexadecimal | **Zadana opcija za web.** Kratak, podržan posvuda, lako se kopira. Osam znamenki dodaje prozirnost. |
| **RGB** | Red, Green, Blue | **Tako razmišljaju zasloni.** Tri svjetlosna kanala od 0 do 255. Format koji očekuje većina API-ja i canvas koda. |
| **HSL** | Hue, Saturation, Lightness | **Za podešavanje na oko.** “Malo svjetlije” ili “manje zasićeno” znači promjenu jednog broja. |
| **HSV** | Hue, Saturation, Value | **Grafički programi.** Model na kojem se temelji birač boja u Photoshopu i GIMP-u. |
| **LCH** | Lightness, Chroma, Hue | **Percepcijska ujednačenost.** Isti brojčani koraci izgledaju kao isti vizualni koraci, što HSL samo glumi. |
| **OKLCH** | OK Lightness, Chroma, Hue | **Moderan izbor za CSS.** Ispravlja pomake nijanse u plavim tonovima koji muče LCH. Podržavaju ga svi trenutni preglednici, pogodan za dizajnerske tokene. |
| **CMYK** | Cyan, Magenta, Yellow, Key | **Orijentacija za tisak.** Približna konverzija za dogovor s tiskarom, konačne vrijednosti određuje njegov profil boja. |

Zašto je OKLCH percepcijski ujednačeniji od starijih modela, objašnjava autor prostora Oklab Björn Ottosson u [izvornom članku](https://bottosson.github.io/posts/oklab/) (na engleskom). Sintaksu i podršku preglednika sažima [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/oklch) (na engleskom). Kako radi tiskarski model, opisuje [Wikipedija o CMYK-u](https://hr.wikipedia.org/wiki/CMYK).

## Sitnice koje štede vrijeme

- **Povijest se pamti sama.** Zadnjih 24 boje prežive osvježavanje stranice. Ostaju samo u pohrani vašeg preglednika i nikamo se ne šalju.
- **Kapaljka za boje.** U preglednicima s EyeDropper API-jem (Chrome i Edge) boju odaberete s bilo kojeg mjesta na zaslonu, čak i izvan prozora preglednika. Boju s fotografije ili iz datoteke s logotipom saznajte u [online pipeti za boje](https://acrafto.com/hr/alat-za-odabir-boja-slike/).
- **Upravljanje tipkovnicom.** Kotač i platno za zasićenost i svjetlinu reagiraju na tipke sa strelicama, tako da boju dotjerate u malim koracima.
- **Predefinirane boje** nude uobičajene osnovne boje kad vam treba samo brz početak.

## Često postavljana pitanja

### Kako pretvoriti OKLCH u HEX?

Zalijepite vrijednost `oklch()` u polje OKLCH i ostali izlazi, uključujući HEX, odmah se preračunaju. Radi i obrnuto: unesite HEX i pročitajte odgovarajući `oklch()`. Jedna napomena: OKLCH može opisati i boje izvan raspona sRGB, a one se odsijeku na ono što sRGB prikazuje. Vrlo zasićen `oklch()` zato na zaslonu sa širokim gamutom neće izgledati isto kao njegov HEX oblik.

### Mogu li oklch() koristiti u produkcijskom CSS-u?

Da. Sve trenutne verzije Chromea, Edgea, Firefoxa i Safarija podržavaju `oklch()`, koji je postao omiljen zapis za dizajnerske tokene (Tailwind CSS 4 u njemu definira cijelu paletu). Za vrlo stare preglednike stavite HEX kao zamjenu u redak prije. Ovaj alat vam daje obje vrijednosti.

### Zašto se harmonije mijenjaju kad prijeđem na RYB kotač?

Zato što ono što je "suprotno" ovisi o rasporedu nijansi po krugu. RYB kotač ravnomjerno raspoređuje pigmentne primarne boje, pa komplementarni parovi odgovaraju onome što znaju slikari: crvena i zelena, plava i narančasta, žuta i ljubičasta. Kotači HSV i HSL raspoređuju nijanse prema miješanju svjetla, pa spajaju crvenu s cijan bojom. Nijedan pristup nije pogrešan: RYB odgovara likovnom obrazovanju, HSV i HSL onome što rade zasloni.

### Mogu li vjerovati vrijednostima CMYK za tisak?

Shvatite ih kao orijentaciju. Stvarna konverzija za tisak ovisi o [ICC profilu](https://en.wikipedia.org/wiki/ICC_profile) (na engleskom) tiskara, papira i tinte. Ista RGB boja ispadne drukčije na kunstdruk papiru, a drukčije na nepremazanom. Vrijednosti ovdje računa standardna formula, koja vas dovede blizu, ali konačni otisak određuje tiskara.

### Gdje je gumb kapaljke u Firefoxu ili Safariju?

Namjerno je skriven. [EyeDropper API](https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API) (MDN, na engleskom), na kojem gumb počiva, trenutno podržavaju samo preglednici temeljeni na Chromiumu (Chrome, Edge, Opera). Ostale značajke alata rade posvuda, nedostaje samo biranje boje sa zaslona. Ako trebate boju sa slike, upotrijebite [online pipetu za boje](https://acrafto.com/hr/alat-za-odabir-boja-slike/), koja radi u svim preglednicima.

### Ostaje li moja povijest boja privatna?

Da. Povijest je pohranjena u localStorage vašeg preglednika, na vašem uređaju. Ništa što odaberete, zalijepite ili kopirate nikamo se ne šalje. Cijeli alat radi kao JavaScript u pregledniku, što provjerite na kartici Mreža u razvojnim alatima.

## Other languages

- Čeština (cs): [Barevné kolo](https://acrafto.com/cs/barevne-kolo/) ([Markdown](https://acrafto.com/cs/barevne-kolo/index.md))
- Slovenčina (sk): [Online výber farieb](https://acrafto.com/sk/online-vyber-farieb/) ([Markdown](https://acrafto.com/sk/online-vyber-farieb/index.md))
- English (en): [Color Picker](https://acrafto.com/en/color-picker-online/) ([Markdown](https://acrafto.com/en/color-picker-online/index.md))
- Deutsch (de): [Farbwähler](https://acrafto.com/de/farbwahl-online-farbrad-konverter/) ([Markdown](https://acrafto.com/de/farbwahl-online-farbrad-konverter/index.md))
- Français (fr): [Sélecteur de couleur](https://acrafto.com/fr/selecteur-couleur-en-ligne/) ([Markdown](https://acrafto.com/fr/selecteur-couleur-en-ligne/index.md))
- Español (es): [Selector de colores online](https://acrafto.com/es/selector-de-colores-online/) ([Markdown](https://acrafto.com/es/selector-de-colores-online/index.md))
- Italiano (it): [Selettore colori](https://acrafto.com/it/selettore-colori-online/) ([Markdown](https://acrafto.com/it/selettore-colori-online/index.md))
- Português (pt): [Color Picker Online](https://acrafto.com/pt/color-picker-online-roda-cores-conversor-hex-rgb-lch/) ([Markdown](https://acrafto.com/pt/color-picker-online-roda-cores-conversor-hex-rgb-lch/index.md))
- Nederlands (nl): [Kleurkiezer](https://acrafto.com/nl/online-kleurkiezer/) ([Markdown](https://acrafto.com/nl/online-kleurkiezer/index.md))
- Polski (pl): [Color Picker Online](https://acrafto.com/pl/color-picker-online-konwerter-kolorow/) ([Markdown](https://acrafto.com/pl/color-picker-online-konwerter-kolorow/index.md))
- Română (ro): [Selector de culori](https://acrafto.com/ro/selector-culori-online/) ([Markdown](https://acrafto.com/ro/selector-culori-online/index.md))
- Magyar (hu): [Online színválasztó](https://acrafto.com/hu/szinvalaszto-online/) ([Markdown](https://acrafto.com/hu/szinvalaszto-online/index.md))
- Ελληνικά (el): [Color picker online](https://acrafto.com/el/online-color-picker-chromatikos-trochos/) ([Markdown](https://acrafto.com/el/online-color-picker-chromatikos-trochos/index.md))
- Български (bg): [Цветово колело](https://acrafto.com/bg/onlain-izbirach-na-cvetove/) ([Markdown](https://acrafto.com/bg/onlain-izbirach-na-cvetove/index.md))
- Slovenščina (sl): [Izbirnik barv](https://acrafto.com/sl/izbirnik-barv-splet/) ([Markdown](https://acrafto.com/sl/izbirnik-barv-splet/index.md))
- Eesti (et): [Värvivalija](https://acrafto.com/et/varvivalija-online/) ([Markdown](https://acrafto.com/et/varvivalija-online/index.md))
- Latviešu (lv): [Krāsu ritenis](https://acrafto.com/lv/krasu-atlasitajs-tiessaiste/) ([Markdown](https://acrafto.com/lv/krasu-atlasitajs-tiessaiste/index.md))
- Lietuvių (lt): [Spalvų parinkiklis](https://acrafto.com/lt/spalvu-parinkiklis-internetu/) ([Markdown](https://acrafto.com/lt/spalvu-parinkiklis-internetu/index.md))
- Svenska (sv): [Färgväljare](https://acrafto.com/sv/fargv%C3%A4ljare-online/) ([Markdown](https://acrafto.com/sv/fargv%C3%A4ljare-online/index.md))
- Dansk (da): [Farvevælger og farvehjul](https://acrafto.com/da/farvevaelger-online-farvehjul-konverter/) ([Markdown](https://acrafto.com/da/farvevaelger-online-farvehjul-konverter/index.md))
- Suomi (fi): [Värinvalitsin online](https://acrafto.com/fi/varinvalitsin-online/) ([Markdown](https://acrafto.com/fi/varinvalitsin-online/index.md))
- Norsk (no): [Fargehjul og fargevelger](https://acrafto.com/no/online-fargevelger-hex-rgb-lch/) ([Markdown](https://acrafto.com/no/online-fargevelger-hex-rgb-lch/index.md))
- Українська (uk): [Вибір кольору онлайн](https://acrafto.com/uk/kolir-picker-onlayn/) ([Markdown](https://acrafto.com/uk/kolir-picker-onlayn/index.md))
- Русский (ru): [Цветовой круг](https://acrafto.com/ru/onlain-vybor-tsveta/) ([Markdown](https://acrafto.com/ru/onlain-vybor-tsveta/index.md))
- Српски (sr): [Točak boja](https://acrafto.com/sr/online-izbirac-boja/) ([Markdown](https://acrafto.com/sr/online-izbirac-boja/index.md))
- Македонски (mk): [Избирач на бои](https://acrafto.com/mk/izbirac-boi-online/) ([Markdown](https://acrafto.com/mk/izbirac-boi-online/index.md))
- Bosanski (bs): [Krug boja](https://acrafto.com/bs/birac-boja-online-pretvornik/) ([Markdown](https://acrafto.com/bs/birac-boja-online-pretvornik/index.md))
- Shqip (sq): [Zgjedhës ngjyrash](https://acrafto.com/sq/zgjedhes-ngjyrash-online-konvertues/) ([Markdown](https://acrafto.com/sq/zgjedhes-ngjyrash-online-konvertues/index.md))
- Türkçe (tr): [Renk seçici](https://acrafto.com/tr/online-renk-secici/) ([Markdown](https://acrafto.com/tr/online-renk-secici/index.md))
- 日本語 (ja): [カラーピッカー](https://acrafto.com/ja/online-color-picker/) ([Markdown](https://acrafto.com/ja/online-color-picker/index.md))
- 한국어 (ko): [컬러 피커](https://acrafto.com/ko/online-color-picker/) ([Markdown](https://acrafto.com/ko/online-color-picker/index.md))
- العربية (ar): [منتقي الألوان](https://acrafto.com/ar/muntaky-al-alwan-online/) ([Markdown](https://acrafto.com/ar/muntaky-al-alwan-online/index.md))
- हिन्दी (hi): [कलर पिकर ऑनलाइन](https://acrafto.com/hi/color-picker-online/) ([Markdown](https://acrafto.com/hi/color-picker-online/index.md))
- Bahasa Indonesia (id): [Pemilih warna](https://acrafto.com/id/pemilih-warna-online/) ([Markdown](https://acrafto.com/id/pemilih-warna-online/index.md))
- Tiếng Việt (vi): [Bánh xe màu](https://acrafto.com/vi/chon-mau-online/) ([Markdown](https://acrafto.com/vi/chon-mau-online/index.md))
- ไทย (th): [วงล้อสี](https://acrafto.com/th/online-color-picker/) ([Markdown](https://acrafto.com/th/online-color-picker/index.md))
- עברית (he): [גלגל צבעים](https://acrafto.com/he/online-color-picker-hex-rgb-lch/) ([Markdown](https://acrafto.com/he/online-color-picker-hex-rgb-lch/index.md))