Krug boja
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, 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.
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, 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 (na engleskom). Sintaksu i podršku u pretraživačima sažima MDN (na engleskom). Kako radi model za štampu, opisuje Wikipedia u članku o CMYK-u (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.
- 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 vrijednostoklch() 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žavajuoklch(), 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.