Kako se pišu boje?
Da li vam se ikad desilo da želite prijatelju da opišete ili prenesete ton neke boje, ali osećate da niste dobro objasnili, pa ste nezadovoljni i vi i prijatelj? Čak i ako vam se ovo nikad nije desilo, pročitajte ovaj članak, jer će vam svakako pomoći u nastavku života.
Ovo je jedna kratka zaobilaznica od moje serije članaka o boji (trenutan naziv ,,Oboji mi svet", po igrici istog imena, koja je preslatka i nežna i sve ono što je dobro u svetu). Pošto ću u svojim člancim koristiti heksadecimalne opise boja da bih vam tačno predstavila boje, palo mi je na pamet da bi možda bilo korisno i da objasnim šta su ti brojevi.
Postoje 3 glavna načina zapisivanja boja, i u ovom članku ćemo ih sve definisati i objasniti, koristeći primere. Pre samog početka vam predlažem da otvorite neki čitač boja - predlažemo Mozillin Color picker tool, koji je već postao legenda u svetu ljudi koji prave sajtove, ali bilo koji drugi je sasvim dobar.
Kada u nekom kodu želimo da nekom elementu dodelimo boju, to možemo učiniti tako što ćemo jednostavno - navesti njeno ime.
Postoje boje koje imaju svoje predodređene nazive, a to su one koje se najčešće koriste. Njihova imena su, prirodno, na engleskom, pa tako imamo red, blue, green,yellow,white, black i još silesiju drugih.
Imena boja bi trebalo da budu one boje koje im ime kazuje. Ukoliko nisu, Blogger je nešto zeznuo, samo mi javite, pa ću ispraviti.
Starija verzija CSS-a ima 17 predefinisanih boja dok novija ima čak 140 (koji skok, majku mu!).
Ovo je jednostavan način da boju ubacite u kod, ali problem nastaje ako ne znate tačno kog tona je ta određena boja, ili preciznije taj određeni naziv. Tako na primer boja ,,blue" je zapravo tamnoplava, pa ćete se neprijatno iznenaditi ukoliko ste očekivali običnu (svetlo) plavu. Svetloplava je pod nazivom ,,aqua".
U novijoj verziji (CSS3) je još teže naučiti svih 140 naziva za boje, tako da je ovaj pristup zaista produktivan samo za osnovne boje kod kojih ne želite da se mučite i tražite njihov heksadecimalni kod.
Ovo je pristup koji ću ja koristiti u celoj ovoj seriji članaka, i manje više na celom blogu, jer mislim da je najlakši (posebno ukoliko imate neki alat za određivanje boja), najekonomičniji i najelegantniji.
,,Heksa" znači 6, decimalno znači od 1 do 10, ili u ovom slučaju od 0 do 9. To nam govori da je ovo način zapisivanja boja pomoću cifara 0-9 i prvih 6 slova abecede (a,b,c,d,e,f).
Svaka boja ima svoj kod, koji ima 6 cifara, i tarabu ispred samog koda, koja pomaže kompjuteru da prepozna da je u pitanju boja.
Klasični primeri boja bi bili #ffffff i #000000 (bela i crna). Ukoliko se ceo kod sastoji samo od jedne cifre/slova, kod se može skratiti na samo 3 znaka, pa će kompjuter sasvim lako prepoznati #fff kao belu i #000 kao crnu.
Ovo se odnosi i na druge boje, ne samo na crnu i belu, pa ako negde piše #aaa, njen pun kod je.... Dopunite sami.
Druge boje su različitije, i obuhvataju tih 16 znakova u različitim kombinacijama. Kroz moju seriju (trenutno nazvanu) ,,Oboji mi svet" videćete razne primere gde sam ja iskoristila heksadecimalni zapis da preciznije opišem neku boju.
Ovde ću sad navesti samo par primera, pa vi možete da ih provučete kroz neki sajt i kažete mi koje su to boje u komentarima.
Ovo je malo ređe korišćen metod, ali koristan iz svojih sopstvenih razloga, a zvuči komplikovanije nego što zaista jeste.
Videli ste ovaj RGBA kod ukoliko ste ikad u Wordu pokušavali da napravite neku posebnu boju koje nije bilo u pojasu sa alatkama (ili kako se već zove toolbar).
RGBA je skraćenica za ,,red-green-blue-alpha".
RGB sistem se koristi da definiše koliko crvene, zelene odnosno plave ima u toj određenoj boji. rgb(0, 0, 0), što će reći da je crna odsustva bilo kakve boje.
Crna boja ima RGB kod
Bela nasuprot tome ima kod rgb(255, 255, 255). 255 je maksimum zasićenosti u ovom sistemu, pa nam to govori da je bela apsolutno prisustvo svih boja.
Kada RGB-u dodamo i ono A, dobijamo još jednu, dodatnu vrednost kojom možemo opisati našu boju.
Alpha se, u ovom kontekstu, odnosi na to koliko je ta određena boja providna, odnosno transparentna. Opseg RGB-a se kreće od 0 do 255, ali se opseg alphe/transparentnosti kreće samo od 0 do 1.
Nivo providnosti se iskazuje uz pomoć decimala, ili uz pomoć jedinice (1) koja označava da je boja potpuno čvrsta, i potpuno neprovidna, i u pomoć nule (0) koja kaže da je ta boja ili taj sloj skroz providan i da se, samim tim, uopšte ne vidi.
Ukoliko damo kod rgba(47, 189, 40, 0.5) dobićemo lepu zelenu boju koja je poluprovidna, pa možemo napola videti ono što je iza nje, ali kroz zeleni filter.
Decimale se uvek pišu sa tačkom, ne sa zarezom. Na slici iznad vidite primer za transparentnost sa vrednošću 0, 0.5 i 1, na jednoj prelepoj slici kokica.
Najčešće se, ukoliko želite da vam transparentnost bude 1, ni ne koristi RGBA oznaka, već samo RGB, a podrazumeva se da će biti totalno neprovidno. Ukoliko želite da vam bude 0, zašto uopšte koristite taj sloj?
Daću vam nekoliko primera rgba kodova, pa mi vi u komentarima recite koje su boje navedene. Imajte u vidu da neki čitači boja neće imati odmah ponuđenu aplha vrednost, pa vam možda neće odmah prepoznati kodove.
rgba(245, 236, 66, 1)
rgba(32, 139, 227, 0.4)
rgb(105, 53, 201)
rgba(195, 18, 44, 0.2)
rgba(230, 14, 18, 0)
rgba(14, 18, 230, 0.8)
RGB vrednosti se mogu zapisivati i preko procenata, pa tako možete imati boju čiji je RGB kod rgb(78%, 70%, 90%). Ovo sam ređe viđala, jer je priznatije da se koriste čisti brojevi, ali uopšte nije netačno.
Ako vam nije bilo dosta HEXA-zapisivanja, i nije vam prekardašilo sa RGBA-sistemom, dolazi vam još jedan način opisivanja boja - HSL!
HSL je skraćenica za ,,hue-saturation-lightness" iliti ton-zasićenost-osvetljenost, i samim tim možemo predpostaviti da se ovim sistemom opisuju baš ovi kvaliteti u bojama.
HSL sistemu takođe možemo dodati alphu, i pretvoriti ga u HSLA sistem.
Prva vrednost (hue) se izražava brojevima u rasponu od 0-360. Brojevi označavaju gde se ta određena boja nalazi na točku boja, pa će 0 i 360 biti crvena (jer se crvena nalazi na samom kraju vidljivog spektra), a između će biti sve ostale boje onako kako su postavljene na dugi, u nedostatku boljeg opisa.
Druga vrednost (saturation) i treća (lightness) se izražavaju procentima od 0% do 100%.
Ukoliko je saturation 0% to znači da je u pitanju neka siva, a ako je 100% u pitanju je puna boja. Ukoliko je lightness 0% onda je u pitanju crna, a ako je 100% onda je tu bela.
Sistem zapisivanja je sličan kao i za RGBA sistem, i izgleda ovako hsl(119, 88%, 48%) ili hsla(0, 100%, 46%, 0.7).
Sada vam samo ostaje da mi kažete koja je vaša omiljena boja koristeči HEXA, RGB ili HSL način zapisivanja boja. Napišite mi u komentaru!
Ovo je jedna kratka zaobilaznica od moje serije članaka o boji (trenutan naziv ,,Oboji mi svet", po igrici istog imena, koja je preslatka i nežna i sve ono što je dobro u svetu). Pošto ću u svojim člancim koristiti heksadecimalne opise boja da bih vam tačno predstavila boje, palo mi je na pamet da bi možda bilo korisno i da objasnim šta su ti brojevi.
Načini zapisa
Postoje 3 glavna načina zapisivanja boja, i u ovom članku ćemo ih sve definisati i objasniti, koristeći primere. Pre samog početka vam predlažem da otvorite neki čitač boja - predlažemo Mozillin Color picker tool, koji je već postao legenda u svetu ljudi koji prave sajtove, ali bilo koji drugi je sasvim dobar.
1. Predefinisani nazivi
Kada u nekom kodu želimo da nekom elementu dodelimo boju, to možemo učiniti tako što ćemo jednostavno - navesti njeno ime.
Postoje boje koje imaju svoje predodređene nazive, a to su one koje se najčešće koriste. Njihova imena su, prirodno, na engleskom, pa tako imamo red, blue, green,yellow,white, black i još silesiju drugih.
Imena boja bi trebalo da budu one boje koje im ime kazuje. Ukoliko nisu, Blogger je nešto zeznuo, samo mi javite, pa ću ispraviti.
Starija verzija CSS-a ima 17 predefinisanih boja dok novija ima čak 140 (koji skok, majku mu!).
Ovo je jednostavan način da boju ubacite u kod, ali problem nastaje ako ne znate tačno kog tona je ta određena boja, ili preciznije taj određeni naziv. Tako na primer boja ,,blue" je zapravo tamnoplava, pa ćete se neprijatno iznenaditi ukoliko ste očekivali običnu (svetlo) plavu. Svetloplava je pod nazivom ,,aqua".
U novijoj verziji (CSS3) je još teže naučiti svih 140 naziva za boje, tako da je ovaj pristup zaista produktivan samo za osnovne boje kod kojih ne želite da se mučite i tražite njihov heksadecimalni kod.
2. Heksadecimalni kod
Ovo je pristup koji ću ja koristiti u celoj ovoj seriji članaka, i manje više na celom blogu, jer mislim da je najlakši (posebno ukoliko imate neki alat za određivanje boja), najekonomičniji i najelegantniji.
,,Heksa" znači 6, decimalno znači od 1 do 10, ili u ovom slučaju od 0 do 9. To nam govori da je ovo način zapisivanja boja pomoću cifara 0-9 i prvih 6 slova abecede (a,b,c,d,e,f).
Svaka boja ima svoj kod, koji ima 6 cifara, i tarabu ispred samog koda, koja pomaže kompjuteru da prepozna da je u pitanju boja.
Klasični primeri boja bi bili #ffffff i #000000 (bela i crna). Ukoliko se ceo kod sastoji samo od jedne cifre/slova, kod se može skratiti na samo 3 znaka, pa će kompjuter sasvim lako prepoznati #fff kao belu i #000 kao crnu.
Ovo se odnosi i na druge boje, ne samo na crnu i belu, pa ako negde piše #aaa, njen pun kod je.... Dopunite sami.
Druge boje su različitije, i obuhvataju tih 16 znakova u različitim kombinacijama. Kroz moju seriju (trenutno nazvanu) ,,Oboji mi svet" videćete razne primere gde sam ja iskoristila heksadecimalni zapis da preciznije opišem neku boju.
Vežbanje
Ovde ću sad navesti samo par primera, pa vi možete da ih provučete kroz neki sajt i kažete mi koje su to boje u komentarima.
#ff4141 #dd4565 #641B37 #096B5E #F58013
3. RGBA numerička vrednost
Ovo je malo ređe korišćen metod, ali koristan iz svojih sopstvenih razloga, a zvuči komplikovanije nego što zaista jeste.
Videli ste ovaj RGBA kod ukoliko ste ikad u Wordu pokušavali da napravite neku posebnu boju koje nije bilo u pojasu sa alatkama (ili kako se već zove toolbar).
RGBA je skraćenica za ,,red-green-blue-alpha".
RGB sistem se koristi da definiše koliko crvene, zelene odnosno plave ima u toj određenoj boji. rgb(0, 0, 0), što će reći da je crna odsustva bilo kakve boje.
Crna boja ima RGB kod
Bela nasuprot tome ima kod rgb(255, 255, 255). 255 je maksimum zasićenosti u ovom sistemu, pa nam to govori da je bela apsolutno prisustvo svih boja.
Kada RGB-u dodamo i ono A, dobijamo još jednu, dodatnu vrednost kojom možemo opisati našu boju.
Alpha se, u ovom kontekstu, odnosi na to koliko je ta određena boja providna, odnosno transparentna. Opseg RGB-a se kreće od 0 do 255, ali se opseg alphe/transparentnosti kreće samo od 0 do 1.
Nivo providnosti se iskazuje uz pomoć decimala, ili uz pomoć jedinice (1) koja označava da je boja potpuno čvrsta, i potpuno neprovidna, i u pomoć nule (0) koja kaže da je ta boja ili taj sloj skroz providan i da se, samim tim, uopšte ne vidi.
Ukoliko damo kod rgba(47, 189, 40, 0.5) dobićemo lepu zelenu boju koja je poluprovidna, pa možemo napola videti ono što je iza nje, ali kroz zeleni filter.
Decimale se uvek pišu sa tačkom, ne sa zarezom. Na slici iznad vidite primer za transparentnost sa vrednošću 0, 0.5 i 1, na jednoj prelepoj slici kokica.
Najčešće se, ukoliko želite da vam transparentnost bude 1, ni ne koristi RGBA oznaka, već samo RGB, a podrazumeva se da će biti totalno neprovidno. Ukoliko želite da vam bude 0, zašto uopšte koristite taj sloj?
Vežbanje
Daću vam nekoliko primera rgba kodova, pa mi vi u komentarima recite koje su boje navedene. Imajte u vidu da neki čitači boja neće imati odmah ponuđenu aplha vrednost, pa vam možda neće odmah prepoznati kodove.
rgba(32, 139, 227, 0.4)
rgb(105, 53, 201)
rgba(195, 18, 44, 0.2)
rgba(230, 14, 18, 0)
rgba(14, 18, 230, 0.8)
Dodatna nastava
RGB vrednosti se mogu zapisivati i preko procenata, pa tako možete imati boju čiji je RGB kod rgb(78%, 70%, 90%). Ovo sam ređe viđala, jer je priznatije da se koriste čisti brojevi, ali uopšte nije netačno.
+1 HSL zapisivanje
Ako vam nije bilo dosta HEXA-zapisivanja, i nije vam prekardašilo sa RGBA-sistemom, dolazi vam još jedan način opisivanja boja - HSL!
HSL je skraćenica za ,,hue-saturation-lightness" iliti ton-zasićenost-osvetljenost, i samim tim možemo predpostaviti da se ovim sistemom opisuju baš ovi kvaliteti u bojama.
HSL sistemu takođe možemo dodati alphu, i pretvoriti ga u HSLA sistem.
Druga vrednost (saturation) i treća (lightness) se izražavaju procentima od 0% do 100%.
Ukoliko je saturation 0% to znači da je u pitanju neka siva, a ako je 100% u pitanju je puna boja. Ukoliko je lightness 0% onda je u pitanju crna, a ako je 100% onda je tu bela.
Sistem zapisivanja je sličan kao i za RGBA sistem, i izgleda ovako hsl(119, 88%, 48%) ili hsla(0, 100%, 46%, 0.7).
Sada vam samo ostaje da mi kažete koja je vaša omiljena boja koristeči HEXA, RGB ili HSL način zapisivanja boja. Napišite mi u komentaru!
0 коментара