# Krug boja

> Birajte boju na krugu (HSV, HSL, slikarski RYB), gotove harmonije i pretvorbu HEX, RGB, HSL, OKLCH i CMYK. Uz to najbliži Tailwind token. Besplatno.

URL: https://acrafto.com/bs/birac-boja-online-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 krugu, fino je podesite na platnu zasićenosti i svjetline i pročitajte je u svakom formatu kojim govori vaš projekt, od `#RRGGBB` do `oklch()`. Ovaj birač radi i ono što drugi alati preskaču: tri geometrije kruga uključujući tradicionalni slikarski RYB krug, 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 pretraživaču.

## RYB ili RGB? Tri kruga boja umjesto jednog

Selektor **Način kruga** mijenja raspored nijansi na krugu:

- **HSV** i **HSL** su digitalni krugovi. Nijanse su raspoređene onako kako ih ekran miješa svjetlom. Razlikuju se po kvadratnom platnu: kod HSV-a je najsvjetliji ugao čista nijansa, dok HSL čiste nijanse smješta na sredinu svjetline, s bijelom iznad.
- **RYB (slikarski)** raspoređuje nijanse onako kako ih uče slikari: crvena, žuta i plava kao osnovne boje, a narandžasta, zelena i ljubičasta između njih (vidi [model RYB na Wikipediji](https://en.wikipedia.org/wiki/RYB_color_model), na engleskom). Razliku najviše primjećujete kod harmonija. Na RYB krugu je komplement crvene **zelena**, a komplement plave **narandžasta**, klasični pigmentni parovi. Digitalni krug pak crvenu pari sa cijan bojom. Ako vam se “komplementarna” paleta iz običnog birača boja nekad učinila pogrešnom, sad znate zašto.

## Harmonije boja: paleta koja se sastavi sama

U polju **Harmonija boja** odaberite pravilo. Krug označi prateće boje, a ispod njega se odmah pojavi gotova paleta:

- **Komplementarna:** jedna suprotna boja. Najjači kontrast, dobra za jedan akcent uz glavnu boju brenda.
- **Podijeljeno-komplementarna:** dva susjeda suprotne boje. Skoro jednako jak kontrast, a lakše ga je balansirati.
- **Trijadna:** tri nijanse ravnomjerno raspoređene po krugu. Živahno, a stabilno, kada jedna dominira, a preostale dvije koristite oskudno.
- **Tetradna (kvadrat):** četiri nijanse. Bogate šeme za ilustracije i grafikone, teško ih je balansirati u sučelju aplikacije.
- **Analogna:** najbliži susjedi. Smirena kombinacija za pozadine i prelaze.
- **Monohromatska:** jedna nijansa u više nivoa svjetline. Najsigurniji izbor za stanja dugmadi (hover, aktivno, onemogućeno).

Cijelu paletu kopirate jednim klikom u formatu koji odaberete: čist **HEX**, **RGB**, **HSL**, **OKLCH**, spremne **CSS varijable** (`--color-1: …`), **SCSS varijable** ili **JSON** za kod. Drži li paleta kontrast i za ljude koji teže razlikuju nijanse, brzo provjerite na snimku ekrana nakon [pretvorbe u nijanse sive](https://acrafto.com/bs/konverzija-slika-u-nijanse-sive-online-masovno-i-besplatno/).

## Pretvorba HEX, RGB, HSL, OKLCH i CMYK: nalijepite bilo šta, dobijete sve

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

Klizač **Neprozirnost (alfa)** ispod pregleda prebacuje izlaze na njihove prozirne zapise `#RRGGBBAA`, `rgba()` i `hsla()`. Pregled se pritom crta preko šahovnice, tako da prozirnost odmah vidite.

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

Dvije oznake 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 sistema umjesto da izmišljate jednokratne vrijednosti. Klikom na oznaku je kopirate.

Ovo rješava pitanje koje se pojavi kod svake predaje dizajna: dizajner mi je poslao hex kod, koja mu Tailwind klasa najbliže odgovara? Podudaranje se računa naspram zadane palete 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 koristiti?

| Format | Puni naziv | Kada ga koristiti |
| :--- | :--- | :--- |
| **HEX** | Hexadecimal | **Zadani izbor za web.** Kratak, svuda podržan, lako se kopira. Osam cifara dodaje prozirnost. |
| **RGB** | Red, Green, Blue | **Tako razmišljaju ekrani.** 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 promijeniti samo jedan broj. |
| **HSV** | Hue, Saturation, Value | **Grafički programi.** Model na kojem stoji birač boja u Photoshopu i GIMP-u. |
| **LCH** | Lightness, Chroma, Hue | **Percepcijska ujednačenost.** Isti brojčani koraci izgledaju kao isti vizuelni koraci, što HSL samo glumi. |
| **OKLCH** | OK Lightness, Chroma, Hue | **Moderni izbor za CSS.** Ispravlja pomjeranje nijanse u plavim tonovima koje muči LCH. Podržavaju ga svi aktuelni pretraživači, pogodan je za dizajn tokene. |
| **CMYK** | Cyan, Magenta, Yellow, Key | **Orijentacija za štampu.** Približna konverzija za dogovor sa štamparijom, konačne vrijednosti određuje njen kolor profil. |

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

## Sitnice koje štede vrijeme

- **Historija se čuva sama.** Posljednjih 24 boje prežive osvježavanje stranice. Ostaju samo u memoriji vašeg pretraživača i nikamo se ne šalju.
- **Kapaljka za boje.** U pretraživačima s EyeDropper API-jem (Chrome i Edge) birate boju bilo gdje na ekranu, čak i izvan prozora pretraživača. Boju s fotografije ili iz datoteke s logotipom pronađite u [online kapaljci za boje](https://acrafto.com/bs/online-birac-boja/).
- **Upravljanje tastaturom.** Krug i platno zasićenosti i svjetline reaguju na strelice, tako da boju doradite u malim koracima.
- **Predefinisane boje** nude uobičajene osnovne boje kad vam treba samo brzi početak.

## Često postavljana pitanja

### Kako pretvoriti OKLCH u HEX?

Nalijepite vrijednost `oklch()` u polje OKLCH i svi 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 van sRGB opsega, a one se odsijecaju na ono što sRGB može prikazati. Vrlo zasićen `oklch()` zato na ekranu sa širokim gamutom neće izgledati isto kao njegova HEX varijanta.

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

Da. Sve aktuelne verzije Chromea, Edgea, Firefoxa i Safarija podržavaju `oklch()`, i postao je omiljen zapis za dizajn tokene (Tailwind CSS 4 u njemu definiše cijelu paletu). Za vrlo stare pretraživače stavite HEX kao rezervu u red prije njega. Ovaj alat vam daje obje vrijednosti.

### Zašto se harmonije promijene kad prebacim na RYB krug?

Zato što ono što je "nasuprot" zavisi od rasporeda nijansi po krugu. RYB krug raspoređuje pigmentne osnovne boje ravnomjerno, pa komplementarni parovi odgovaraju onome što znaju slikari: crvena i zelena, plava i narandžasta, žuta i ljubičasta. Krugovi HSV i HSL raspoređuju nijanse prema miješanju svjetla, pa pare crvenu sa cijan bojom. Nijedan pristup nije pogrešan: RYB odgovara likovnom obrazovanju, HSV i HSL onome što rade ekrani.

### Mogu li vjerovati CMYK vrijednostima za štampu?

Uzmite ih kao orijentaciju. Stvarna konverzija za štampu zavisi od [ICC profila](https://en.wikipedia.org/wiki/ICC_profile) (na engleskom) štampača, papira i mastila. Ista RGB boja izađe drugačije na sjajnom i na nepremazanom papiru. Vrijednosti ovdje računa standardna formula koja vas dovede blizu, ali konačan otisak je stvar štamparije.

### Gdje je dugme za kapaljku u Firefoxu ili Safariju?

Namjerno je skriveno. [EyeDropper API](https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API) (MDN, na engleskom), na kojem dugme počiva, za sada podržavaju samo pretraživači zasnovani na Chromiumu (Chrome, Edge, Opera). Ostale funkcije alata rade svuda, nedostaje samo biranje boje s ekrana. Ako vam treba boja sa slike, koristite [online kapaljku za boje](https://acrafto.com/bs/online-birac-boja/), koja radi u svim pretraživačima.

### Ostaje li moja historija boja privatna?

Da. Historija je sačuvana u localStorage vašeg pretraživača, na vašem uređaju. Ništa što odaberete, nalijepite ili kopirate se ne šalje nikuda. Cijeli alat radi kao JavaScript u pretraživaču, što možete provjeriti 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))
- Hrvatski (hr): [Kotač boja](https://acrafto.com/hr/online-birac-boja-pretvornik/) ([Markdown](https://acrafto.com/hr/online-birac-boja-pretvornik/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))
- 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))