Birač boja

Kako koristiti birač boja

1. Klikni uzorak ispod Odaberi boju da otvoriš birač boja svog preglednika, zatim odaberi boju. Vrijednost možeš i upisati ili zalijepiti u polje Kod boje: HEX kod poput #1E90FF, rgb(30, 144, 255), hsl(210 100% 56%) ili CSS naziv poput tomato.
2. Veliki pregled ažurira se odmah, a HEX kod ispisan je crnom ili bijelom bojom, već prema tome što se bolje čita na toj pozadini.
3. Pod Kodovi boje kopiraj format koji trebaš gumbom Kopiraj pokraj njega: HEX, RGB, HSL, HSV ili CMYK.
4. Klikni Nasumična boja kad želiš inspiraciju ili Uzmi sa zaslona (u preglednicima koji to podržavaju, poput Chromea i Edgea) da uzmeš bilo koji piksel sa zaslona, uključujući druge prozore.

Sve se odvija u tvom pregledniku: nijedna boja ni slika ne šalje se na poslužitelj.

Što znači svaki kod boje

• HEX je šesteroznamenkasti heksadecimalni zapis koji se koristi u HTML-u i CSS-u. Svaki par znamenki jedan je kanal (crveni, zeleni, plavi) 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 programa za dizajn i programskih biblioteka.
• HSL opisuje boju tonom (kut od 0° do 360° na krugu boja), zasićenošću i svjetlinom. Zgodan je za posvjetljivanje ili potamnjivanje boje promjenom samo jednog broja.
• HSV (zvan i HSB) koristi ton, zasićenost i vrijednost (svjetlinu). 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 jednostavna su pretvorba: K = 1 − max(R, G, B), zatim C = (1 − R − K) / (1 − K), a isto za M i Y. To je standardna udžbenička formula, ali ne koristi ICC profil. Stvarni tisak ovisi o stroju, papiru i tintama, pa će tiskara pretvoriti tvoje boje svojim profilom i rezultat se može razlikovati. Ove brojeve koristi kao polazište, a ne kao dokaz za tisak.

Čitanje omjera kontrasta

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

Savjeti

• HEX kodove možeš zalijepiti bez znaka #: radi i 1e90ff, kao i kratki oblici poput f60.
• Vrijednosti s prozirnošću, poput rgb(0 0 0 / 50%), prihvaćaju se; birač prikazuje neprozirnu boju.
• Vlastiti dijalog boja preglednika razlikuje se među sustavima. Ako trebaš preciznu vrijednost, upis u polje Kod boje uvijek je točan.