Izbirnik barv
Izberite barvo na kolesu, jo natančno prilagodite na ploskvi nasičenosti in svetlosti, nato pa jo preberite v vsakem zapisu, ki ga uporablja vaš projekt, od #RRGGBB do oklch(). Orodje ponuja tudi to, kar drugi izbirniki barv izpustijo: tri oblike kolesa, vključno s tradicionalnim slikarskim kolesom RYB, harmonije, ki same sestavijo paleto, prosojnost in izvoz cele palete v enem kliku kot CSS spremenljivke, SCSS ali JSON. Vse se izračuna v vašem brskalniku.
RYB ali RGB? Tri barvna kolesa namesto enega
Preklopnik Način kolesa spremeni razporeditev odtenkov na kolesu:
- HSV in HSL sta digitalni kolesi. Odtenki so razporejeni tako, kot jih meša svetloba na zaslonu. Razlikujeta se po kvadratni ploskvi: pri HSV je najsvetlejši kot čisti odtenek, HSL pa čiste odtenke postavi na sredino svetlosti in belo nad njih.
- RYB (slikarsko) razporedi odtenke tako, kot jih poznajo slikarji: rdeča, rumena in modra kot osnovne barve, med njimi oranžna, zelena in vijolična (model RYB na Wikipediji). Razliko opazite predvsem pri harmonijah. Na kolesu RYB je komplement rdeče zelena, komplement modre pa oranžna, torej klasičen slikarski par. Digitalno kolo pari rdečo s cian. Če se vam »komplementarna« paleta iz običajnega izbirnika barv kdaj ni zdela prava, je to razlog.
Barvne harmonije: paleta, ki se sestavi sama
V polju Barvna harmonija izberite pravilo. Kolo označi spremljevalne barve, spodaj pa se prikaže pripravljena paleta:
- Komplementarna: ena nasprotna barva. Najmočnejši kontrast, primerna za en sam poudarek ob glavni barvi znamke.
- Razdeljeno komplementarna: soseda nasprotne barve. Skoraj enako močan kontrast, a lažje uravnoteženje.
- Triadna: tri enakomerno razporejene barve. Živahna, a stabilna kombinacija, kadar ena prevladuje, drugi dve pa uporabite zmerno.
- Tetradna (kvadrat): štiri barve. Bogate sheme za ilustracije in grafe, v vmesniku aplikacije jih je težko uravnotežiti.
- Analogna: najbližji sosedi. Umirjena kombinacija za ozadja in prehode.
- Monokromatska: en odtenek v več stopnjah svetlosti. Najvarnejša izbira za stanja gumbov (ob prehodu miške, aktivno, onemogočeno).
Celotno paleto kopirate z enim klikom, in sicer v formatu, ki ga izberete: čisti HEX, RGB, HSL, OKLCH, za lepljenje pripravljene CSS spremenljivke (--color-1: …), SCSS spremenljivke ali JSON za kodo. Če želite hitro preveriti, ali barve palete ohranijo kontrast tudi za ljudi, ki težje ločijo odtenke, naredite posnetek zaslona in ga pretvorite v sivine.
Pretvorba HEX, RGB, HSL, OKLCH in CMYK: prilepite karkoli, dobite vse
Vnosna polja sprejmejo skoraj vsak zapis barve: #f80, #ff8800, osemmestni hex s prosojnostjo, rgb() in rgba(), hsl(), hwb(), lch(), oklch(), oklab(), cmyk(), 0xFF8800 in poimenovane barve CSS, kot je rebeccapurple. Ne glede na to, kaj vnesete, dobite sedem usklajenih izpisov: HEX, RGB, HSL, HSV, LCH, OKLCH in CMYK, vsakega z lastnim gumbom za kopiranje.
Drsnik Neprosojnost (alfa) pod predogledom preklopi izpise na prosojne zapise #RRGGBBAA, rgba() in hsla(). Predogled se izriše nad šahovnico, tako da prosojnost takoj vidite.
Najbližji žeton Tailwind CSS za katero koli barvo
Dva pomožna napisa pod predogledom poimenujeta barvo: najbližja poimenovana barva CSS (uporabno za hitre prototipe) in najbližji žeton Tailwind, na primer orange-500. Tako ostanete znotraj svojega oblikovnega sistema in vam ni treba izmišljati enkratnih vrednosti. S klikom na napis ga kopirate.
To reši vprašanje, ki se pojavi pri vsaki predaji oblikovanja: oblikovalec mi je poslal hex kodo, kateri razred Tailwind ji je najbližji? Ujemanje se izračuna glede na privzeto paleto Tailwind CSS 4 (glejte dokumentacijo Tailwinda, v angleščini), zato lahko žeton takoj uporabite v imenu razreda.
Kateri format barve uporabiti?
| Format | Polno ime | Kdaj ga uporabiti |
|---|---|---|
| HEX | Hexadecimal | Privzeta izbira za splet. Kratek, povsod podprt, enostaven za kopiranje. Osem mest doda prosojnost. |
| RGB | Red, Green, Blue | Tako razmišljajo zasloni. Trije svetlobni kanali od 0 do 255. Format, ki ga pričakuje večina API-jev in kode za canvas. |
| HSL | Hue, Saturation, Lightness | Za prilagajanje na oko. »Malo svetleje« ali »manj nasičeno« pomeni spremeniti eno samo številko. |
| HSV | Hue, Saturation, Value | Grafični programi. Model, na katerem temelji izbira barv v Photoshopu in GIMP-u. |
| LCH | Lightness, Chroma, Hue | Zaznavna enakomernost. Enaki številčni koraki so videti kot enaki vizualni koraki, kar HSL le navidezno obljublja. |
| OKLCH | OK Lightness, Chroma, Hue | Sodobna izbira za CSS. Odpravi zamike odtenka pri modrih tonih, ki motijo LCH. Podpirajo ga vsi sodobni brskalniki, primeren je za oblikovne žetone. |
| CMYK | Cyan, Magenta, Yellow, Key | Usmeritev za tisk. Približna pretvorba za dogovor s tiskarno, končne vrednosti določi njen barvni profil. |
Zakaj je OKLCH zaznavno bolj enakomeren od starejših modelov, pojasni avtor prostora Oklab Björn Ottosson v izvirnem članku (v angleščini). Skladnjo in podporo v brskalnikih povzema MDN (v angleščini). Kako deluje tiskarski model, opisuje Wikipedija pri geslu CMYK.
Malenkosti, ki prihranijo čas
- Zgodovina se shrani sama. Zadnjih 24 barv preživi osvežitev strani. Ostanejo le v pomnilniku vašega brskalnika in se nikamor ne pošiljajo.
- Kapalka. V brskalnikih z API-jem EyeDropper (Chrome in Edge) izberete barvo kjer koli na zaslonu, tudi zunaj okna brskalnika. Barvo s fotografije ali iz datoteke z logotipom poiščite v spletni barvni kapalki.
- Upravljanje s tipkovnico. Kolo in ploskev nasičenosti in svetlosti se odzivata na smerne tipke, tako da barvo prilagodite v majhnih korakih.
- Prednastavitve ponudijo pogoste osnovne barve, kadar potrebujete le hiter začetek.
Pogosto zastavljena vprašanja
Kako pretvoriti OKLCH v HEX?
Vrednostoklch() prilepite v polje OKLCH in drugi izpisi, vključno s HEX, se takoj preračunajo. Deluje tudi obratno: vnesite HEX in preberite ustrezen oklch(). Ena opomba: OKLCH lahko opiše tudi barve zunaj obsega sRGB, te pa se obrežejo na tisto, kar sRGB lahko prikaže. Zelo nasičen oklch() zato na zaslonu s širokim barvnim obsegom ne bo videti enako kot njegova oblika HEX.
Ali lahko oklch() uporabljam v produkcijskem CSS-ju?
Da. Vse trenutne različice Chroma, Edga, Firefoxa in Safarija podpirajooklch(), ta pa je postal priljubljen zapis za oblikovne žetone (Tailwind CSS 4 vanj zapiše celotno paleto). Za zelo stare brskalnike pred njim dodajte HEX kot rezervo. To orodje vam da obe vrednosti.