Birač boja

Kako koristiti birač boja

1. Klikni uzorak ispod Odaberi boju da otvoriš birač boja svog preglednika, pa odaberi boju. Možeš i upisati ili zalijepiti vrijednost u polje Kôd boje: HEX kôd poput #1E90FF, rgb(30, 144, 255), hsl(210 100% 56%) ili CSS naziv poput tomato.
2. Veliki pregled se odmah ažurira, a HEX kôd je ispisan crnom ili bijelom bojom, zavisno od toga šta se bolje čita na toj pozadini.
3. U dijelu Kodovi boje kopiraj format koji ti treba dugmetom Kopiraj pored njega: HEX, RGB, HSL, HSV ili CMYK.
4. Klikni Nasumična boja kad ti treba inspiracija ili Uzmi s ekrana (u preglednicima koji to podržavaju, poput Chromea i Edgea) da uzmeš bilo koji piksel s ekrana, uključujući druge prozore.

Sve se događa u tvom pregledniku: nijedna boja ni slika se nigdje ne šalje.

Šta znači svaki kôd boje

• HEX je šestocifreni heksadecimalni zapis koji se koristi u HTML-u i CSS-u. Svaki par cifara je jedan kanal (crvena, zelena, plava) od 00 do FF, pa #1E90FF znači crvena 30, zelena 144, plava 255.
• RGB daje ista tri kanala kao decimalne brojeve od 0 do 255. To očekuje većina softvera za dizajn i programskih biblioteka.
• HSL opisuje boju tonom (ugao od 0° do 360° na krugu boja), zasićenjem i svjetlinom. Zgodan je da boju posvijetliš ili potamniš promjenom samo jednog broja.
• HSV (zvan i HSB) koristi ton, zasićenje i vrijednost (osvijetljenost). To je model iza kvadrata boja u Photoshopu, Figmi i mnogim drugim uređivačima.
• CMYK izražava boju kao postotke cijan, magenta, žute i crne tinte.

O CMYK vrijednostima

CMYK kodovi su jednostavna pretvorba: K = 1 − max(R, G, B), zatim C = (1 − R − K) / (1 − K), isto za M i Y. To je standardna udžbenička formula, ali ne koristi ICC profil. Prava štampa zavisi od mašine, papira i tinti, pa će štamparija pretvoriti tvoje boje svojim profilom i rezultat se može razlikovati. Koristi ove brojeve kao polazište, a ne kao dokaz za štampu.

Čitanje omjera kontrasta

Ispod HEX koda pregled prikazuje Kontrast na bijeloj i Kontrast na crnoj, izračunate WCAG 2 formulom relativne luminancije. Omjer 4,5:1 ili veći potreban je za običan tekst na nivou AA, a 3:1 za veliki tekst i elemente sučelja. Ako tvoja boja na bijeloj dostiže samo 3:1, čuvaj je za velike naslove ili ikone, a za tekst koristi tamniju nijansu.

Savjeti

• HEX kodove možeš zalijepiti i bez znaka #: 1e90ff takođe radi, kao i skraćeni oblici poput f60.
• Vrijednosti s prozirnošću, poput rgb(0 0 0 / 50%), se prihvataju; birač prikazuje neprozirnu boju.
• Dijalog za boje u samom pregledniku razlikuje se među sistemima. Ako ti treba tačna vrijednost, upisivanje u polje Kôd boje uvijek je tačno.