Online Birač Boja
Izaberite boju na točku, fino je podesite na platnu za zasićenje, i pročitajte je u svakom formatu koji vaš projekat koristi — od #RRGGBB do oklch(). Ovaj birač radi i ono što drugi alati preskaču: tri geometrije točka uključujući tradicionalni slikarski RYB točak, harmonije koje same grade paletu, alfa kanal i izvoz cele palete jednim klikom kao CSS promenljive, SCSS ili JSON. Sve se izračunava lokalno, u vašem pretraživaču.
RYB vs RGB: tri točka, ne jedan
Izbornik Režim točka menja samu geometriju točka:
- HSV i HSL su digitalni točkovi — nijanse su raspoređene onako kako ih ekrani mešaju svetlom. Razlikuju se po ponašanju kvadratnog platna: kod HSV-a najsvetliji ugao je čista nijansa, dok HSL čiste nijanse postavlja na 50% svetline, sa belom iznad.
- RYB (slikarski) raspoređuje nijanse onako kako su ih učili slikari: crvena, žuta i plava kao osnovne boje, sa narandžastom, zelenom i ljubičastom između njih. Njegova praktična vrednost se vidi kod harmonija — na RYB točku komplementarna boja crvenoj je zelena, a plavoj narandžasta, klasični pigmentni parovi, dok digitalni točak crvenu pari sa cijan bojom. Ako vam se “komplementarna” paleta iz uobičajenog birača ikada učinila pogrešnom, sada znate zašto.
Harmonije boja koje grade paletu umesto vas
Izaberite pravilo pod Harmonija boja i točak označava prateće boje, koje se prikazuju kao gotova paleta:
- Komplementarna — jedna suprotna boja. Najjači kontrast; koristite je za jedan akcenat naspram dominantne brend boje.
- Split-komplementarna — dva suseda komplementarne boje. Skoro isti kontrast, mnogo lakše za uravnotežiti.
- Trijadna — tri ravnomerno raspoređene nijanse. Živahno, a stabilno; neka jedna dominira, a ostale dve koristite umereno.
- Tetradna (kvadrat) — četiri nijanse. Bogate šeme za ilustracije i vizuelizaciju podataka; teško ih je uravnotežiti u interfejsu.
- Analogna — neposredni susedi. Nizak kontrast, dobro za pozadine i gradijente.
- Monohromatska — jedna nijansa u različitim stepenima svetline. Najsigurniji izbor za stanja interfejsa (hover, aktivno, onemogućeno).
Panel palete kopira ceo set jednim klikom, u formatu koji izaberete: obični HEX, RGB, HSL, OKLCH, spremne CSS custom properties (--color-1: …), SCSS promenljive ili JSON za predaju kodu.
Konverzija HEX, RGB, HSL, OKLCH i CMYK: nalepite bilo šta, pročitajte sve
Polja za unos prihvataju praktično svaku notaciju boje koju im date: #f80, #ff8800, osmocifreni hex sa alfa kanalom, rgb() / rgba(), hsl(), hwb(), lch(), oklch(), oklab(), cmyk(), 0xFF8800 ili nazive boja iz CSS-a poput rebeccapurple. Šta god unesete, dobijate sedam usklađenih izlaza: HEX, RGB, HSL, HSV, LCH, OKLCH i CMYK, svaki sa sopstvenim dugmetom za kopiranje.
Povucite klizač Neprozirnost (alfa) ispod pregleda i izlazi prelaze u svoje providne oblike — #RRGGBBAA, rgba(), hsla() — a pregled se prikazuje preko šahovnice kako biste mogli da procenite providnost.
Pronađite najbliži Tailwind CSS token boje
Dve pomoćne oznake ispod pregleda imenuju boju za vas: najbliža CSS imenovana boja (korisno za brze prototipove i za dogovaranje oko boja) i najbliži Tailwind token (npr. orange-500), tako da ostajete unutar svog dizajn sistema umesto da izmišljate jednokratne vrednosti. Klikom na oznaku je kopirate.
Ovo odgovara na pitanje koje se postavlja pri svakom predavanju dizajna: dizajner mi je poslao hex kod — koja Tailwind klasa mu najviše odgovara? Poklapanje se računa u odnosu na podrazumevanu paletu Tailwind CSS 4, tako da token koji dobijete možete odmah da nalepite u naziv klase.
Koji format da koristite?
| Format | Pun naziv | Kada ga koristiti? |
|---|---|---|
| HEX | Heksadecimalni | Podrazumevani izbor za veb. Kompaktan, univerzalno podržan, lako se kopira. 8 cifara dodaje alfa kanal. |
| RGB | Crvena, Zelena, Plava | Kako ekrani razmišljaju. Tri kanala svetlosti, 0–255. Format koji očekuje većina API-ja i canvas koda. |
| HSL | Nijansa, Zasićenost, Svetlina | Za ljude koji podešavaju ručno. “Malo svetlije” ili “manje zasićeno” je promena jednog broja. |
| HSV | Nijansa, Zasićenost, Vrednost | Grafički softver. Model iza birača u Photoshopu i GIMP-u. |
| LCH | Svetlina, Hroma, Nijansa | Perceptualno uniforman. Jednaki koraci u brojevima izgledaju kao jednaki vizuelni koraci — ono što HSL samo glumi da jeste. |
| OKLCH | OK Svetlina, Hroma, Nijansa | Moderan izbor za CSS. Ispravlja pomeranje nijansi u plavim tonovima koje ima LCH; 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 dogovor sa dizajnerima za štampu — konačne vrednosti uvek dolaze iz kolor profila štampača. |
Male stvari koje štede vreme
- Istorija se pamti sama. Poslednjih 24 boje sa kojima ste radili prežive osvežavanje stranice — čuvaju se isključivo u lokalnom skladištu vašeg pretraživača, nikada se ne šalju nikuda.
- Kapaljka (eyedropper). U pretraživačima koji podržavaju EyeDropper API (Chrome i Edge) možete uzeti boju sa bilo kog mesta na ekranu, čak i van prozora pretraživača.
- Upravljanje tastaturom. Točak i platno za zasićenje reaguju na strelice za precizno podešavanje na nivou piksela.
- Predefinisane boje pokrivaju uobičajene osnovne boje kada vam treba samo brza polazna tačka.
Često postavljana pitanja (FAQ)
Kako da konvertujem OKLCH u HEX?
Nalepite vrednostoklch() u polje OKLCH i svi ostali izlazi se odmah ažuriraju, uključujući HEX. Radi i obrnuto — unesite HEX kod i pročitajte odgovarajuću oklch() vrednost. Jedno upozorenje: OKLCH može da opiše boje van sRGB gamuta, a one se odsecaju kanal po kanal na ono što sRGB može da prikaže, pa vrlo zasićen oklch() i njegova HEX forma neće izgledati identično na ekranu sa širokim gamutom.
Da li je oklch() bezbedan za upotrebu u produkcijskom CSS-u?
Da. Sve aktuelne verzije Chrome-a, Edge-a, Firefox-a i Safari-ja podržavajuoklch(), i on je postao preporučena notacija za dizajn tokene (Tailwind CSS 4 svoju celu paletu definiše u njemu). Za veoma stare pretraživače, u prethodnom redu ponudite HEX kao rezervnu vrednost — ovaj alat vam daje obe vrednosti.