Točak boja
Izaberite boju na točku, fino je podesite na platnu za zasićenje i svetlinu i pročitajte je u svakom formatu koji vaš projekat koristi, od #RRGGBB do oklch(). Ovaj alat radi i ono što drugi birači boja 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 ili RGB: tri točka boja umesto jednog
Izbornik Režim točka menja raspored nijansi na točku:
- HSV i HSL su digitalni točkovi. Nijanse su raspoređene onako kako ih ekrani mešaju svetlom. Razlikuju se po kvadratnom platnu: kod HSV-a najsvetliji ugao je čista nijansa, dok HSL čiste nijanse postavlja na sredinu svetline, sa belom iznad.
- RYB (slikarski) raspoređuje nijanse onako kako ih uče slikari: crvena, žuta i plava kao osnovne boje, sa narandžastom, zelenom i ljubičastom između njih (videti model RYB, na engleskom). Razlika se najviše vidi kod harmonija. Na RYB točku komplementarna boja crvenoj je zelena, a plavoj narandžasta, klasični pigmentni parovi. Digitalni točak crvenu pari sa cijan bojom. Ako vam se “komplementarna” paleta iz uobičajenog birača boja ikada učinila pogrešnom, sada znate zašto.
Harmonije boja koje same grade paletu
Izaberite pravilo u polju Harmonija boja. Točak označava prateće boje, a ispod se prikazuje gotova paleta:
- Komplementarna: jedna suprotna boja. Najjači kontrast, dobra za jedan akcenat pored glavne boje brenda.
- Split-komplementarna: dva suseda komplementarne boje. Skoro isti kontrast, mnogo lakše za uravnotežiti.
- Trijadna: tri ravnomerno raspoređene nijanse. Živahno, a stabilno, kada jedna dominira, a ostale dve koristite umereno.
- Tetradna (kvadrat): četiri nijanse. Bogate šeme za ilustracije i grafikone, teško ih je uravnotežiti u interfejsu aplikacije.
- Analogna: najbliži susedi. Miran spoj za pozadine i prelive.
- Monohromatska: jedna nijansa u više stepena svetline. Najsigurniji izbor za stanja dugmadi (hover, aktivno, onemogućeno).
Celu paletu kopirate jednim klikom, u formatu koji izaberete: obični HEX, RGB, HSL, OKLCH, spremne CSS custom properties (--color-1: …), SCSS promenljive ili JSON za kod. Da li paleta drži kontrast i za ljude koji teže razlikuju nijanse, brzo proverite tako što napravite snimak ekrana i pretvorite ga u nijanse sive.
Konverzija HEX, RGB, HSL, OKLCH i CMYK: nalepite bilo šta, dobijete sve
Polja za unos prihvataju gotovo svaku notaciju boje: #f80, #ff8800, osmocifreni hex sa alfa kanalom, rgb() i rgba(), hsl(), hwb(), lch(), oklch(), oklab(), cmyk(), 0xFF8800 i nazive CSS boja poput rebeccapurple. Šta god unesete, dobijate sedam usklađenih izlaza: HEX, RGB, HSL, HSV, LCH, OKLCH i CMYK, svaki sa sopstvenim dugmetom za kopiranje.
Klizač Neprozirnost (alfa) ispod pregleda prebacuje izlaze u njihove providne oblike #RRGGBBAA, rgba() i hsla(). Pregled se pritom iscrtava preko šahovnice, tako da providnost odmah vidite.
Najbliži Tailwind CSS token za bilo koju boju
Dve oznake ispod pregleda imenuju boju za vas: najbliža imenovana CSS boja (korisno za brze prototipove) i najbliži Tailwind token, na primer orange-500. Tako ostajete unutar svog dizajn sistema umesto da izmišljate jednokratne vrednosti. Klikom na oznaku je kopirate.
Ovo rešava pitanje koje se javlja 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 (videti dokumentaciju Tailwinda, na engleskom), tako da token možete odmah upotrebiti u nazivu klase.
Koji format boje koristiti?
| Format | Pun naziv | Kada ga koristiti |
|---|---|---|
| HEX | Hexadecimal | Podrazumevani izbor za veb. Kratak, svuda podržan, lako se kopira. Osam cifara dodaje providnost. |
| RGB | Red, Green, Blue | Onako kako razmišljaju ekrani. Tri svetlosna 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 svetlije” ili “manje zasićeno” znači promenu jednog broja. |
| HSV | Hue, Saturation, Value | Grafički programi. Model na kom se zasniva birač boja u Photoshopu i GIMP-u. |
| LCH | Lightness, Chroma, Hue | Perceptivno ujednačen. Jednaki numerički koraci izgledaju kao jednaki vizuelni koraci, što HSL samo glumi. |
| OKLCH | OK Lightness, Chroma, Hue | Savremeni izbor za CSS. Ispravlja pomeranje nijansi u plavim tonovima koje ima LCH. Podržan u svim aktuelnim pretraživačima i pogodan za dizajn tokene. |
| CMYK | Cyan, Magenta, Yellow, Key | Orijentacija za štampu. Približna konverzija za dogovor sa štamparijom, konačne vrednosti određuje njen kolor profil. |
Zašto je OKLCH perceptivno ujednačeniji od starijih modela, objašnjava autor prostora Oklab Bjorn Otoson (Björn Ottosson) u originalnom članku (na engleskom). Sintaksu i podršku u pretraživačima sažima MDN (na engleskom). Kako radi model za štampu, opisuje Vikipedija u članku o CMYK-u.
Sitnice koje štede vreme
- Istorija se pamti sama. Poslednjih 24 boje prežive osvežavanje stranice. Čuvaju se isključivo u skladištu vašeg pretraživača i nikada se ne šalju nikuda.
- Kapaljka. U pretraživačima sa EyeDropper API (Chrome i Edge) birate boju bilo gde na ekranu, čak i van prozora pretraživača. Boju sa fotografije ili datoteke sa logotipom saznaćete u online kapaljci za boje.
- Upravljanje tastaturom. Točak i platno za zasićenje i svetlinu reaguju na strelice, tako da boju doterujete u malim koracima.
- Predefinisane boje nude uobičajene osnovne boje kada vam treba samo brz početak.
Često postavljana pitanja
Kako da konvertujem OKLCH u HEX?
Nalepite vrednostoklch() u polje OKLCH i ostali izlazi, uključujući HEX, odmah se preračunavaju. Radi i obrnuto: unesite HEX i pročitajte odgovarajući oklch(). Jedna napomena: OKLCH može da opiše i boje van sRGB gamuta, a one se odsecaju na ono što sRGB može da prikaže. Vrlo zasićen oklch() zato neće izgledati isto kao njegova HEX verzija na ekranu sa širokim gamutom.
Mogu li da koristim oklch() u produkcijskom CSS-u?
Da. Sve aktuelne verzije Chrome-a, Edge-a, Firefox-a i Safari-ja podržavajuoklch(), i on je postao popularna notacija za dizajn tokene (Tailwind CSS 4 celu paletu definiše u njemu). Za vrlo stare pretraživače stavite HEX kao rezervu na red pre njega. Ovaj alat vam daje obe vrednosti.