Kotač boja

Odaberite boju na kotaču, dotjerajte je na platnu za zasićenost i svjetlinu, i pročitajte je natrag u svakom formatu kojim govori vaš projekt, od #RRGGBB do oklch(). Ovaj alat radi i ono što drugi birači boja preskaču: tri geometrije kotača uključujući tradicionalni slikarski RYB kotač, 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 pregledniku.

RYB ili RGB? Tri kotača boja umjesto jednog

Odabirnik Način kotača mijenja raspored nijansi na kotaču:

• HSV i HSL su digitalni kotači. Nijanse su raspoređene onako kako ih miješa svjetlo na zaslonu. Razlikuju se u kvadratnom platnu: kod HSV-a najsvjetliji kut je čista nijansa, dok HSL čiste nijanse smješta na sredinu svjetline s bijelom iznad.
• RYB (slikarski) raspoređuje nijanse onako kako ih znaju slikari: crvena, žuta i plava kao primarne boje, s narančastom, zelenom i ljubičastom između njih (model RYB na Wikipediji, na engleskom). Razliku uočite najviše kod harmonija. Na RYB kotaču komplementarna boja crvenoj je zelena, a komplementarna boja plavoj je narančasta, klasični pigmentni parovi iz likovnog. Digitalni kotač spaja crvenu s cijan bojom. Ako vam se “komplementarna” paleta iz običnog birača boja ikad učinila pogrešnom, sad znate zašto.

Harmonije boja koje vam same sastave paletu

U polju Harmonija boja odaberite pravilo. Kotač će označiti pripadajuće boje, a ispod se prikaže gotova paleta:

• Komplementarna: jedna suprotna boja. Najjači kontrast, dobra za jedan naglasak uz glavnu boju brenda.
• Razdvojeno-komplementarna: dva susjeda komplementarne boje. Gotovo jednako jak kontrast, mnogo lakše ga je uravnotežiti.
• Trijadna: tri ravnomjerno raspoređene nijanse. Živopisno, a stabilno, kad jedna dominira, a druge dvije koristite štedljivo.
• Tetradna (kvadrat): četiri nijanse. Bogate kombinacije za ilustracije i grafikone, teško ih je uravnotežiti u sučelju aplikacije.
• Analogna: najbliži susjedi. Smirena kombinacija za pozadine i prijelaze.
• Monokromatska: jedna nijansa u nekoliko razina svjetline. Najsigurniji izbor za stanja gumba (hover, aktivno, onemogućeno).

Cijelu paletu kopirate jednim klikom u formatu koji odaberete: obični HEX, RGB, HSL, OKLCH, CSS varijable (--color-1: …) spremne za lijepljenje, SCSS varijable ili JSON za kod. Drži li paleta dovoljan kontrast i za ljude koji teže razlikuju nijanse, brzo provjerite na snimci zaslona nakon pretvorbe u sive tonove.

Pretvorba HEX, RGB, HSL, OKLCH i CMYK: zalijepite bilo što, dobijete sve

Polja za unos prihvaćaju gotovo svaki zapis boje: #f80, #ff8800, osmeroznamenkasti hex s prozirnošću, rgb() i rgba(), hsl(), hwb(), lch(), oklch(), oklab(), cmyk(), 0xFF8800 i imenovane CSS boje poput rebeccapurple. Što god unesete, dobijete sedam usklađenih izlaza: HEX, RGB, HSL, HSV, LCH, OKLCH i CMYK, svaki sa svojim gumbom za kopiranje.

Klizač Neprozirnost (alfa) ispod pregleda prebacuje izlaze u prozirne zapise #RRGGBBAA, rgba() i hsla(). Pregled se pritom iscrtava na kockastoj podlozi, tako da prozirnost odmah vidite.

Najbliži Tailwind CSS token za bilo koju boju

Dva oblačića 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 sustava i ne izmišljate jednokratne vrijednosti. Klikom na oblačić ga kopirate.

Time se rješava pitanje koje se pojavi kod svakog predavanja dizajna: dizajner mi je poslao hex kod, koja mu Tailwind klasa najbolje odgovara? Podudaranje se računa prema zadanoj paleti Tailwind CSS-a 4 (vidi dokumentaciju Tailwinda, na engleskom), tako da token možete odmah upotrijebiti u nazivu klase.

Koji format boje upotrijebiti?

Format	Puni naziv	Kada ga koristiti
HEX	Hexadecimal	Zadana opcija za web. Kratak, podržan posvuda, lako se kopira. Osam znamenki dodaje prozirnost.
RGB	Red, Green, Blue	Tako razmišljaju zasloni. 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 promjenu jednog broja.
HSV	Hue, Saturation, Value	Grafički programi. Model na kojem se temelji birač boja u Photoshopu i GIMP-u.
LCH	Lightness, Chroma, Hue	Percepcijska ujednačenost. Isti brojčani koraci izgledaju kao isti vizualni koraci, što HSL samo glumi.
OKLCH	OK Lightness, Chroma, Hue	Moderan izbor za CSS. Ispravlja pomake nijanse u plavim tonovima koji muče LCH. Podržavaju ga svi trenutni preglednici, pogodan za dizajnerske tokene.
CMYK	Cyan, Magenta, Yellow, Key	Orijentacija za tisak. Približna konverzija za dogovor s tiskarom, konačne vrijednosti određuje njegov profil boja.

Zašto je OKLCH percepcijski ujednačeniji od starijih modela, objašnjava autor prostora Oklab Björn Ottosson u izvornom članku (na engleskom). Sintaksu i podršku preglednika sažima MDN (na engleskom). Kako radi tiskarski model, opisuje Wikipedija o CMYK-u.

Sitnice koje štede vrijeme

• Povijest se pamti sama. Zadnjih 24 boje prežive osvježavanje stranice. Ostaju samo u pohrani vašeg preglednika i nikamo se ne šalju.
• Kapaljka za boje. U preglednicima s EyeDropper API-jem (Chrome i Edge) boju odaberete s bilo kojeg mjesta na zaslonu, čak i izvan prozora preglednika. Boju s fotografije ili iz datoteke s logotipom saznajte u online pipeti za boje.
• Upravljanje tipkovnicom. Kotač i platno za zasićenost i svjetlinu reagiraju na tipke sa strelicama, tako da boju dotjerate u malim koracima.
• Predefinirane boje nude uobičajene osnovne boje kad vam treba samo brz početak.

Često postavljana pitanja

Kako pretvoriti OKLCH u HEX?

Zalijepite vrijednost oklch() u polje OKLCH i 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 izvan raspona sRGB, a one se odsijeku na ono što sRGB prikazuje. Vrlo zasićen oklch() zato na zaslonu sa širokim gamutom neće izgledati isto kao njegov HEX oblik.

Mogu li oklch() koristiti u produkcijskom CSS-u?

Da. Sve trenutne verzije Chromea, Edgea, Firefoxa i Safarija podržavaju oklch(), koji je postao omiljen zapis za dizajnerske tokene (Tailwind CSS 4 u njemu definira cijelu paletu). Za vrlo stare preglednike stavite HEX kao zamjenu u redak prije. Ovaj alat vam daje obje vrijednosti.

Zašto se harmonije mijenjaju kad prijeđem na RYB kotač?

Zato što ono što je "suprotno" ovisi o rasporedu nijansi po krugu. RYB kotač ravnomjerno raspoređuje pigmentne primarne boje, pa komplementarni parovi odgovaraju onome što znaju slikari: crvena i zelena, plava i narančasta, žuta i ljubičasta. Kotači HSV i HSL raspoređuju nijanse prema miješanju svjetla, pa spajaju crvenu s cijan bojom. Nijedan pristup nije pogrešan: RYB odgovara likovnom obrazovanju, HSV i HSL onome što rade zasloni.

Mogu li vjerovati vrijednostima CMYK za tisak?

Shvatite ih kao orijentaciju. Stvarna konverzija za tisak ovisi o ICC profilu (na engleskom) tiskara, papira i tinte. Ista RGB boja ispadne drukčije na kunstdruk papiru, a drukčije na nepremazanom. Vrijednosti ovdje računa standardna formula, koja vas dovede blizu, ali konačni otisak određuje tiskara.

Gdje je gumb kapaljke u Firefoxu ili Safariju?

Namjerno je skriven. EyeDropper API (MDN, na engleskom), na kojem gumb počiva, trenutno podržavaju samo preglednici temeljeni na Chromiumu (Chrome, Edge, Opera). Ostale značajke alata rade posvuda, nedostaje samo biranje boje sa zaslona. Ako trebate boju sa slike, upotrijebite online pipetu za boje, koja radi u svim preglednicima.

Ostaje li moja povijest boja privatna?

Da. Povijest je pohranjena u localStorage vašeg preglednika, na vašem uređaju. Ništa što odaberete, zalijepite ili kopirate nikamo se ne šalje. Cijeli alat radi kao JavaScript u pregledniku, što provjerite na kartici Mreža u razvojnim alatima.