Online Birač Boja
Odaberite boju na kotaču, dotjerajte je na platnu za zasićenost, i pročitajte je natrag u svakom formatu kojim govori vaš projekt — od #RRGGBB do oklch(). Ovaj birač radi i ono što drugi alati preskaču: tri geometrije kotača uključujući slikarski RYB kotač, preklope harmonije koji vam sami sastave paletu, alfa kanal i izvoz cijele palete jednim klikom kao CSS varijable, SCSS ili JSON. Sve se to izračunava lokalno u vašem pregledniku.
Tri kotača, ne jedan
Odabirnik Način kotača mijenja samu geometriju kotača:
- HSV i HSL su digitalni kotači — nijanse su raspoređene onako kako ih RGB zasloni miješaju u svjetlo. Razlikuju se u ponašanju kvadratnog platna: kod HSV-a najsvjetliji kut je čista nijansa, dok HSL čiste nijanse smješta na 50 % svjetline s bijelom iznad.
- RYB (slikarski) raspoređuje nijanse onako kako su ih naučili umjetnici: crvena, žuta i plava kao primarne boje, s narančastom, zelenom i ljubičastom između njih. Njegova praktična vrijednost vidi se kod harmonija — na RYB kotaču komplementarna boja crvenoj je zelena, a komplementarna boja plavoj je narančasta, klasični pigmentni parovi, dok digitalni kotač crvenu spaja s cijan bojom. Ako vam se “komplementarna” paleta iz običnog birača ikad učinila pogrešnom, sad znate zašto.
Harmonije koje vam same sastave paletu
Odaberite pravilo pod Harmonija boja i kotač će označiti pripadajuće boje, koje se prikazuju kao gotova paleta:
- Komplementarna — jedna suprotna boja. Najjači kontrast; koristite je za jedan naglasak nasuprot dominantnoj brend boji.
- Razdvojeno-komplementarna — dva susjeda komplementarne boje. Gotovo jednako jak kontrast, mnogo lakše ga je uravnotežiti.
- Trijadna — tri ravnomjerno raspoređene nijanse. Živopisno, ali stabilno; neka jedna dominira, a druge dvije koristite štedljivo.
- Tetradna (kvadrat) — četiri nijanse. Bogate kombinacije za ilustracije i vizualizaciju podataka; teško ih je uravnotežiti u sučeljima.
- Analogna — neposredni susjedi. Nizak kontrast, dobro za pozadine i gradijente.
- Monokromatska — jedna nijansa u postupnim koracima svjetline. Najsigurniji izbor za stanja sučelja (hover, aktivno, onemogućeno).
Panel s paletom kopira cijeli set jednim klikom, u formatu koji odaberete: obični HEX, RGB, HSL, OKLCH, spreman za lijepljenje CSS custom properties (--color-1: …), SCSS varijable ili JSON za predaju kodu.
Zalijepite bilo što, pročitajte sve
Polja za unos prihvaćaju gotovo svaki zapis boje koji im ponudite: #f80, #ff8800, 8-znamenkasti hex s alfa kanalom, rgb() / rgba(), hsl(), hwb(), lch(), oklch(), oklab(), cmyk(), 0xFF8800 ili CSS imena boja poput rebeccapurple. Što god unesete, dobit ćete natrag sedam usklađenih izlaza: HEX, RGB, HSL, HSV, LCH, OKLCH i CMYK, svaki sa svojim gumbom za kopiranje.
Dva pomoćna oblačića ispod pregleda imenuju boju umjesto vas: najbliža CSS imenovana boja (korisno za brze prototipove i razgovor o bojama) i najbliži Tailwind token (npr. orange-500), tako da ostanete unutar svog dizajn sustava umjesto izmišljanja jednokratnih vrijednosti.
Povucite klizač prozirnosti ispod pregleda i izlazi se prebacuju u svoje prozirne oblike — #RRGGBBAA, rgba(), hsla() — dok se pregled prikazuje na kockastoj podlozi kako biste mogli procijeniti prozirnost.
Koji format upotrijebiti?
| Format | Puni naziv | Kada ga koristiti? |
|---|---|---|
| HEX | Heksadecimalni | Zadani izbor za web. Kompaktan, univerzalno podržan, lako se kopira. 8 znamenki dodaje alfa kanal. |
| RGB | Crvena, Zelena, Plava | Kako razmišljaju zasloni. Tri svjetlosna kanala, 0–255. Format koji očekuje većina API-ja i canvas koda. |
| HSL | Nijansa, Zasićenost, Svjetlina | Za ručno podešavanje. “Malo svjetlije” ili “manje zasićeno” znači promjenu samo jednog broja. |
| HSV | Nijansa, Zasićenost, Vrijednost | Grafički softver. Model koji stoji iza birača u Photoshopu i GIMP-u. |
| LCH | Svjetlina, Kroma, Nijansa | Perceptivno uniformno. Jednaki brojčani koraci izgledaju kao jednaki vizualni koraci — ono što HSL samo glumi. |
| OKLCH | OK Svjetlina, Kroma, Nijansa | Moderni izbor za CSS. Ispravlja pomake nijanse u plavoj boji koje ima LCH; podržan u svim aktualnim preglednicima i idealan za sustave dizajnerskih tokena. |
| CMYK | Cijan, Magenta, Žuta, Key (crna) | Orijentacija za tisak. Približna konverzija za razgovor s dizajnerima tiska — konačne vrijednosti uvijek dolaze iz profila boja printera. |
Sitnice koje štede vrijeme
- Povijest se pamti sama. Zadnjih 24 boje s kojima ste radili prežive osvježavanje stranice — pohranjene isključivo u lokalnoj pohrani vašeg preglednika, nikad nikamo poslane.
- Kapaljka za boje. U preglednicima s EyeDropper API-jem (Chrome i Edge) možete odabrati boju s bilo kojeg mjesta na ekranu, čak i izvan prozora preglednika.
- Upravljanje tipkovnicom. Kotač i platno za zasićenost reagiraju na tipke sa strelicama za precizno podešavanje na razini piksela.
- Predefinirane boje pokrivaju uobičajene osnovne boje kad vam treba samo brza polazna točka.
Često postavljana pitanja (FAQ)
Je li oklch() siguran za upotrebu u produkcijskom CSS-u?
Da. Sve aktualne verzije Chromea, Edgea, Firefoxa i Safarija podržavajuoklch(), koji je postao preferirani zapis za dizajnerske tokene (Tailwind CSS 4 cijelu svoju paletu definira upravo u njemu). Za vrlo stare preglednike, poslužite HEX zamjenu u prethodnom retku — ovaj alat vam daje obje vrijednosti.