Online Birač Boja
Odaberite boju na točku, fino je podesite na platnu zasićenosti 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 točka uključujući slikarski RYB točak, 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 pretraživaču.
Tri točka, ne jedan
Selektor Način točka mijenja samu geometriju točka:
- HSV i HSL su digitalni točkovi — nijanse su raspoređene onako kako ih ekrani miješaju svjetlom. Razlikuju se po tome kako se ponaša kvadratno platno: kod HSV-a je najsvjetliji ugao č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 slikari: crvena, žuta i plava kao osnovne boje, a narandžasta, zelena i ljubičasta između njih. Njegova praktična vrijednost vidi se u harmonijama — na RYB točku, komplementarna boja crvenoj je zelena, a plavoj narandžasta, klasični pigmentni parovi, dok digitalni točak crvenu pari s cijan bojom. Ako vam se “komplementarna” paleta iz nekog običnog birača ikada učinila pogrešnom, sada znate zašto.
Harmonije koje same sastave paletu
Odaberite pravilo pod Harmonija boja i točak će označiti prateće boje, koje se odmah pojavljuju kao gotova paleta:
- Komplementarna — jedna suprotna boja. Najjači kontrast; koristite za jedan akcent naspram dominantne brend boje.
- Podijeljeno-komplementarna — dva susjeda komplementarne boje. Skoro isto toliko kontrasta, a mnogo lakše za balansirati.
- Trijadna — tri ravnomjerno raspoređene nijanse. Živahno, a stabilno; neka jedna dominira, a preostale dvije koristite oskudno.
- Tetradna (kvadrat) — četiri nijanse. Bogate šeme za ilustracije i vizualizaciju podataka; teško ih je balansirati u dizajnu korisničkog sučelja.
- Analogna — neposredni susjedi. Nizak kontrast, dobro za pozadine i gradijente.
- Monohromatska — jedna nijansa u stepenovanoj svjetlini. Najsigurniji izbor za stanja sučelja (hover, aktivno, onemogućeno).
Panel palete kopira cijeli set jednim klikom, u formatu koji odaberete: obični HEX, RGB, HSL, OKLCH, spremne za lijepljenje CSS custom properties (--color-1: …), SCSS varijable ili JSON za predaju kodu.
Nalijepite bilo šta, pročitajte sve
Polja za unos prihvataju praktično svaku notaciju boje koju im date: #f80, #ff8800, osmocifreni hex s alfom, rgb() / rgba(), hsl(), hwb(), lch(), oklch(), oklab(), cmyk(), 0xFF8800, ili CSS nazive boja poput rebeccapurple. Šta god unesete, vraća se sedam usklađenih izlaza: HEX, RGB, HSL, HSV, LCH, OKLCH i CMYK, svaki sa svojim dugmetom za kopiranje.
Dvije oznake ispod pregleda imenuju boju umjesto vas: najbliži CSS naziv boje (koristan za brze prototipove i za razgovor o bojama) i najbliži Tailwind token (npr. orange-500), tako da možete ostati unutar svog dizajn sistema umjesto da izmišljate posebne vrijednosti.
Povucite klizač Neprozirnost (alfa) ispod pregleda i izlazi prelaze na svoje prozirne oblike — #RRGGBBAA, rgba(), hsla() — dok se pregled prikazuje preko šahovnice kako biste lakše procijenili providnost.
Koji format koristiti?
| Format | Puni naziv | Kada ga koristiti? |
|---|---|---|
| HEX | Hexadecimal | Standard za web. Kompaktan, univerzalno podržan, lako se kopira. 8 cifara dodaje alfu. |
| RGB | Crvena, Zelena, Plava | Kako razmišljaju ekrani. Tri kanala svjetla, 0–255. Format koji očekuje većina API-ja i canvas koda. |
| HSL | Nijansa, Zasićenost, Svjetlina | Za ljude koji ručno uređuju. “Malo svjetlije” ili “manje zasićeno” postaje jedna izmijenjena brojka. |
| HSV | Nijansa, Zasićenost, Vrijednost | Grafički softver. Model iza birača boja u Photoshopu i GIMP-u. |
| LCH | Svjetlina, Hroma, Nijansa | Percepcijski ujednačen. Jednaki numerički koraci izgledaju kao jednaki vizuelni koraci — ono što HSL samo glumi. |
| OKLCH | OK Svjetlina, Hroma, Nijansa | Moderni izbor u CSS-u. Ispravlja pomjeranje nijanse koje LCH ima kod plavih tonova; podržan u svim aktuelnim pretraživačima i idealan za sisteme dizajn tokena. |
| CMYK | Cijan, Magenta, Žuta, Key (crna) | Orijentacija za štampu. Približna konverzija za razgovor sa štamparskim dizajnerima — konačne vrijednosti uvijek dolaze iz štamparskog kolor profila. |
Sitnice koje štede vrijeme
- Historija se čuva sama. Posljednjih 24 boje s kojima ste radili preživi osvježavanje stranice — čuva se samo u lokalnoj memoriji vašeg pretraživača, nikada se ne šalje nikuda.
- Kapaljka za boje. U pretraživačima koji podržavaju EyeDropper API (Chrome i Edge) možete odabrati boju bilo gdje na ekranu, čak i izvan prozora pretraživača.
- Upravljanje tastaturom. Točak i platno zasićenosti reaguju na strelice za precizno podešavanje piksel po piksel.
- Predefinisane boje pokrivaju uobičajene osnovne boje kada vam treba samo brza polazna tačka.
Često postavljana pitanja (FAQ)
Je li oklch() siguran za upotrebu u produkcijskom CSS-u?
Da. Sve aktuelne verzije Chromea, Edgea, Firefoxa i Safarija podržavajuoklch(), a postao je preferirana notacija za dizajn tokene (Tailwind CSS 4 definiše cijelu svoju paletu u njemu). Za vrlo stare pretraživače, u prethodnom redu ponudite HEX rezervnu vrijednost — ovaj alat daje obje vrijednosti.