Spletni izbirnik barv
Izberite barvo na kolesu, jo fino nastavite na platnu za nasičenost, nato pa jo preberite v vsakem formatu, ki ga govori vaš projekt – od #RRGGBB do oklch(). Ta izbirnik ponuja tudi tisto, kar druga orodja izpustijo: tri geometrije kolesa, vključno s slikarskim kolesom RYB, prekrivne harmonije, ki vam same sestavijo paleto, alfa kanal in izvoz celotne palete v enem kliku kot CSS spremenljivke, SCSS ali JSON. Vse to se izračuna lokalno v vašem brskalniku.
Tri kolesa, ne le eno
Izbirnik Način kolesa spremeni samo geometrijo kolesa:
- HSV in HSL sta digitalni kolesi – odtenki so razporejeni tako, kot jih mešajo zasloni RGB. Razlikujeta se po tem, kako se obnaša kvadratno platno: pri HSV je najsvetlejši kot čisti odtenek, HSL pa čiste odtenke postavi pri 50 % svetlosti, z belo nad njimi.
- RYB (slikarsko) razporedi odtenke tako, kot so se jih naučili slikarji: rdeča, rumena in modra kot osnovne barve, med njimi pa oranžna, zelena in vijolična. Praktična vrednost se pokaže pri harmonijah – na kolesu RYB je komplement rdeče zelena, komplement modre pa oranžna, torej klasičen pigmentni par, medtem ko digitalno kolo rdečo pari s cian. Če se vam je “komplementarna” paleta iz običajnega izbirnika kdaj zdela napačna, je to razlog.
Harmonije, ki vam same sestavijo paleto
Izberite pravilo pod Barvna harmonija in kolo označi spremljevalne barve, ki se prikažejo kot pripravljena paleta:
- Komplementarna – ena nasprotna barva. Najmočnejši kontrast; uporabite jo za en poudarek ob prevladujoči barvi znamke.
- Razdeljeno komplementarna – oba soseda komplementa. Skoraj enak kontrast, a veliko lažje uravnoteženje.
- Triadna – tri enakomerno razmaknjene barve. Živahna, a stabilna kombinacija; naj ena barva prevladuje, drugi dve pa uporabite zmerno.
- Tetradna (kvadrat) – štiri barve. Bogate sheme za ilustracije in podatkovno vizualizacijo; v vmesnikih jih je težko uravnotežiti.
- Analogna – neposredni sosedi. Nizka napetost, primerna za ozadja in gradiente.
- Monokromatska – en odtenek v stopnjah svetlosti. Najvarnejša izbira za stanja vmesnika (hover, aktivno, onemogočeno).
Podokno s paleto v enem kliku kopira celoten nabor, v formatu, ki ga izberete: navaden HEX, RGB, HSL, OKLCH, za lepljenje pripravljene CSS spremenljivke (--color-1: …), SCSS spremenljivke ali JSON za predajo v kodo.
Prilepite karkoli, preberite vse
Vnosna polja sprejmejo praktično vsak zapis barve, ki ga vnesete: #f80, #ff8800, 8-mestni hex z alfo, rgb() / rgba(), hsl(), hwb(), lch(), oklch(), oklab(), cmyk(), 0xFF8800 ali imena barv CSS, kot je rebeccapurple. Kar koli vnesete, dobite nazaj sedem sinhroniziranih izpisov: HEX, RGB, HSL, HSV, LCH, OKLCH in CMYK, vsakega s svojim gumbom za kopiranje.
Dva pomožna čipa pod predogledom poimenujeta barvo namesto vas: najbližja imenovana barva CSS (uporabno za hitro prototipiranje in za pogovor o barvah) in najbližji žeton Tailwind (npr. orange-500), tako da lahko ostanete znotraj svojega oblikovnega sistema, namesto da izmišljujete enkratne vrednosti.
Povlecite drsnik Neprosojnost (alfa) pod predogledom in izpisi se preklopijo na prosojne oblike – #RRGGBBAA, rgba(), hsla() – predogled pa se prikaže nad šahovnico, da lažje presodite prosojnost.
Kateri format uporabiti?
| Format | Polno ime | Kdaj ga uporabiti? |
|---|---|---|
| HEX | Heksadecimalno | Privzeti spletni standard. Kompakten, univerzalno podprt, enostaven za kopiranje. 8 mest doda alfo. |
| RGB | Rdeča, zelena, modra | Kako razmišljajo zasloni. Tri svetlobni kanali, 0–255. Format, ki ga pričakuje večina API-jev in kode za canvas. |
| HSL | Odtenek, nasičenost, svetlost | Za ročno urejanje. “Malo svetleje” ali “manj nasičeno” je le sprememba ene številke. |
| HSV | Odtenek, nasičenost, vrednost | Grafična programska oprema. Model, na katerem temeljijo izbirniki v Photoshopu in GIMP-u. |
| LCH | Svetlost, kromatičnost, odtenek | Percepcijsko uniformno. Enaki številčni koraki dajejo enake vizualne korake – kar HSL le navidezno obljublja. |
| OKLCH | OK svetlost, kromatičnost, odtenek | Sodobna izbira za CSS. Popravi zamik odtenka pri modrih tonih, ki ga ima LCH; podprt v vseh sodobnih brskalnikih in idealen za sisteme oblikovnih žetonov. |
| CMYK | Cian, magenta, rumena, črna | Usmerjeno v tisk. Približna pretvorba za pogovor s tiskarskimi oblikovalci – končne vrednosti vedno določi barvni profil tiskarja. |
Malenkosti, ki prihranijo čas
- Zgodovina se zapomni sama. Zadnjih 24 barv, s katerimi ste delali, preživi osvežitev strani – shranjene so izključno v lokalnem pomnilniku vašega brskalnika in nikoli poslane nikamor.
- Kapalka. V brskalnikih z API-jem EyeDropper (Chrome in Edge) lahko izberete barvo kjer koli na zaslonu, tudi zunaj okna brskalnika.
- Upravljanje s tipkovnico. Kolo in platno za nasičenost se odzivata na smerne tipke za natančne prilagoditve na piksel natančno.
- Prednastavitve pokrijejo pogoste osnovne barve, kadar potrebujete le hitro izhodišče.
Pogosto zastavljena vprašanja (FAQ)
Je oklch() varen za uporabo v produkcijskem CSS-ju?
Da. Vse sodobne različice Chroma, Edga, Firefoxa in Safarija podpirajooklch(), ta pa je postal priljubljen zapis za oblikovne žetone (Tailwind CSS 4 v njem definira celotno paleto). Za zelo stare brskalnike v prejšnji vrstici dodajte rezervno vrednost HEX – to orodje vam ponudi obe vrednosti.