Kao što znate, boja može uticati na stanje osobe: i psihičko i fizičko. Svaki dan, gledajući web stranice na Internetu, oči procjenjuju milione boja i nijansi. Web dizajner koji poznaje psihologiju boja može manipulirati raspoloženjem posjetitelja kako bi postigao bilo koji cilj.
To je zbog činjenice da su neke nijanse umirujuće, dok su druge, naprotiv, uzbudljive. Zatim ćemo govoriti o tome kako se boja sintetizira i prikazuje pomoću kompjuterske tehnologije.
RGB je model boja koji predstavlja metodu dobijanja svih boja i njihovih nijansi miješanjem u različitim omjerima tri glavne komponente, a to su:
- Crvena boja ( Crveni);
- zelena boja ( Zeleno);
- plava boja ( Plava).
Odatle dolazi skraćeni naziv RGB. Ove boje su izabrane kao glavne s razlogom: razlog je fiziologija retine ljudskog oka i kako ih ono percipira:
RGB model je i danas najpopularniji i koristi se za reprodukciju boja na TV ekranima i kompjuterskim monitorima. Kako proizvođači daju svoje proizvode različitim karakteristikama, 1996. stvoren je objedinjeni sistem sinteze boja zasnovan na RGB-u pod nazivom sRGB, na kojem su sarađivali Microsoft i HP.
Numerički prikaz boja
Kao što je ranije spomenuto, RGB boje se formiraju miješanjem glavnih boja. Da bi se opisao intenzitet svakog od njih, usvojena je šema u kojoj je boja predstavljena opsegom 0-255 (8 bita), što u heksadecimalnom sistemu odgovara 00-FF.
Odnosno, primarne boje će izgledati ovako:
- Crvena - RGB (255,0,0);
- Zelena - RGB (0.255.0);
- Plava - RGB (0,0,255);
Ako intenzitet boje poprimi vrijednosti manje od 255, tada se dobijaju različite nijanse crvene, zelene i plave. Ispod je tabela njihove gradacije, kao i heksadecimalne vrijednosti svake od nijansi:
RGB tabele boja
Naravno, pored gradacija osnovnih boja, postoje i mješovite, a njihov broj je prilično velik. Stoga je kreirana tabela RGB boja u kojoj su prikazane sve postojeće nijanse, kao i njihovi nazivi i numerički prikazi ( decimalni i heksadecimalni).
Možete se upoznati s tim ovdje. Ova tabela znatno olakšava život web dizajnerima, jer za nekoliko sekundi možete pronaći željenu nijansu i saznati njen brojčani prikaz.
Sigurna RGB paleta boja
Međutim, u jednom trenutku se pojavio problem prikazivanja boja u različitim pretraživačima, pa je za njegovo rješavanje sastavljena takozvana "sigurna" paleta RGB boja koje su izvedene matematičkim proračunima.
Kada pretraživač ne može ispravno prikazati boju, pokušava se približiti željenoj miješanjem susjednih boja i najvjerovatnije će rezultat biti potpuno neprihvatljiv:
Koristeći RGB kodove boja iz ove palete, web programer ne može se bojati prikazivanja boja na stranicama svojih web stranica kada ih gledaju na različitim pretraživačima, platformama i monitorima. Iako u ovom trenutku tabela sigurnih boja gubi na važnosti ( tehnički napredak i dalje ne miruje), kada ga koristite, možete, kako kažu, dobro spavati.
Zlatna boja u RGB modelu
Po prvi put riječ "zlato" upotrijebljena je početkom XIV vijeka za opisivanje boje hemijskog elementa zvanog Aurum - zlato. U RGB, zlato je predstavljeno sljedećim brojčanim vrijednostima:
- RGB (255, 215, 0) - decimalni sistem;
- HEX # FFD700 - heksadecimalni sistem.
Bež boja u RGB modelu
Bež boja zauzima prilično značajno mjesto u istoriji, čak i ako nije najizrazitija. Mnogi spomenici kulture, posebno antičke skulpture, napravljeni su od kamena sapunice i sapunice, koji imaju bež nijansu. U RGB, bež ima sljedeće numeričke reprezentacije.
Vlad Merzhevich
U HTML-u, boja se specificira na jedan od dva načina: korištenjem heksadecimalnog koda i imenom nekih boja. Uglavnom se koristi metoda zasnovana na heksadecimalnom sistemu brojeva, kao najuniverzalnija.
Heksadecimalne boje
Heksadecimalni brojevi se koriste za određivanje boja u HTML-u. Heksadecimalni sistem, za razliku od decimalnog, zasnovan je, kao što mu ime kaže, na broju 16. Brojevi će biti sledeći: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 , A, B, C , D, E, F. Brojevi od 10 do 15 zamjenjuju se latiničnim slovima. Table 6.1 pokazuje korespondenciju između decimalnih i heksadecimalnih brojeva.
Brojevi veći od 15 u heksadecimalnom sistemu formiraju se kombinovanjem dva broja u jedan (tabela 6.2). Na primjer, 255 decimalno je FF heksadecimalno.
Da bi se izbjegla zabuna u definiciji brojevnog sistema, hash znak # stavlja se ispred heksadecimalnog broja, na primjer # aa69cc. U ovom slučaju registar nije bitan, pa je dozvoljeno upisati # F0F0F0 ili # f0f0f0.
Tipična boja koja se koristi u HTML-u izgleda ovako.
Ovdje je boja pozadine web stranice postavljena na # FA8E47. Haš simbol # ispred broja znači da je heksadecimalan. Prve dvije cifre (FA) definiraju crvenu komponentu boje, treće do četvrte cifre (8E) su zelene, a posljednje dvije cifre (47) su plave. Kao rezultat, dobijate ovu boju.
| FA | + | 8E | + | 47 | = | FA8E47 |
Svaka od tri boje - crvena, zelena i plava - može poprimiti vrijednosti od 00 do FF, što rezultira 256 nijansi. Dakle, ukupan broj boja može biti 256x256x256 = 16.777.216 kombinacija. Model boja zasnovan na crvenoj, zelenoj i plavoj komponenti naziva se RGB (crvena, zelena, plava; crvena, zelena, plava). Ovaj model je aditivni (od dodati - dodati), u kojem se dodavanjem sve tri komponente dobija bela boja.
Da biste olakšali navigaciju u heksadecimalnim bojama, uzmite u obzir neka pravila.
- Ako su vrijednosti komponenti boje iste (na primjer: # D6D6D6), tada ćete dobiti sivu nijansu. Što je broj veći, boja je svjetlija, vrijednosti variraju od # 000000 (crno) do #FFFFFF (bijelo).
- Jarko crvena boja se formira ako je crvena komponenta postavljena na maksimum (FF), a ostale komponente na nulu. Boja # FF0000 je najcrvenija moguća crvena nijansa. Isti je slučaj sa zelenom (# 00FF00) i plavom (# 0000FF).
- Žuta (#FFFF00) se dobija mešanjem crvene sa zelenom. To je jasno vidljivo na krugu boja (slika 6.1), gdje su prikazane primarne boje (crvena, zelena, plava) i komplementarne ili komplementarne boje. Tu spadaju žuta, cijan i ljubičasta (takođe se zovu magenta). Općenito, bilo koja boja se može dobiti miješanjem obližnjih boja. Dakle, cijan (# 00FFFF) se dobija kombinacijom plave i zelene.
Rice. 6.1. Krug u boji
Heksadecimalne boje ne moraju se birati empirijski. U tu svrhu je prikladan grafički uređivač koji može raditi s različitim modelima boja, na primjer, Adobe Photoshop. Na sl. 6.2 prikazuje prozor za izbor boje u ovom programu, rezultujuća heksadecimalna vrijednost trenutne boje je ocrtana linijom. Možete ga kopirati i zalijepiti u svoj kod.
Rice. 6.2. Prozor za odabir boje u Photoshopu
Web boje
Ako postavite kvalitet boje monitora na 8 bita (256 boja), tada se ista boja može različito prikazati u različitim pretraživačima. To je zbog načina na koji se grafika prikazuje, gdje pretraživač radi sa svojom paletom i ne može prikazati boju koju nema u paleti. U ovom slučaju, boja se zamjenjuje kombinacijom piksela drugih, njoj bliskih boja koje imitiraju navedenu. Kako bi boja ostala nepromijenjena u različitim pretraživačima, uveli smo paletu takozvanih web boja. Web boje su one boje, za čiju komponentu - crvenu, zelenu i plavu - postavljena je jedna od šest vrijednosti - 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC ), 255 (FF). Zagrade označavaju heksadecimalnu vrijednost ove komponente. Ukupan broj boja iz svih mogućih kombinacija daje 6x6x6 - 216 boja. Primjer web boje je # 33FF66.
Glavna karakteristika web boje je da se pojavljuje ista u svim pretraživačima. Trenutno je relevantnost web boja vrlo mala zbog povećanja kvaliteta monitora i proširenja njihovih mogućnosti.
Boje po imenu
Kako ne biste pamtili skup brojeva, umjesto toga možete koristiti nazive najčešće korištenih boja. Table 6.3 navodi imena popularnih naziva boja.
| Naziv boje | Boja | Opis | Heksadecimalna vrijednost |
|---|---|---|---|
| crna | Crno | #000000 | |
| plava | Plava | # 0000FF | |
| fuksija | Svijetlo ljubičasta | # FF00FF | |
| siva | Tamno siva | #808080 | |
| zeleno | Zeleno | #008000 | |
| kreč | Svijetlo zelena | # 00FF00 | |
| maroon | Tamno crvena | #800000 | |
| mornarica | Mornarsko plava | #000080 | |
| maslina | Maslina | #808000 | |
| ljubičasta | Tamno ljubičasta | #800080 | |
| crvena | Crveni | # FF0000 | |
| srebro | Svijetlo siva | # C0C0C0 | |
| teal | Plavo zeleno | #008080 | |
| bijela | Bijelo | #FFFFFF | |
| žuta | Žuta | # FFFF00 |
Nije bitno na koji način navedete boju - njenim imenom ili koristeći heksadecimalne brojeve. Ove metode su jednake u svom djelovanju. Primjer 6.1 pokazuje kako postaviti pozadinu i boju teksta web stranice.
Primjer 6.1. Boja pozadine i teksta
Primer teksta
U ovom primjeru, boja pozadine je postavljena pomoću atributa bgcolor oznake
, i boju teksta kroz atribut teksta. Za promenu, atribut teksta je postavljen na heksadecimalni broj, a bgcolor je postavljen na ključnu reč rezervisanu teal.CSS kodovi boja se koriste za određivanje boje. Obično se kodovi boja ili vrijednosti boja koriste za postavljanje boje za prednji plan elementa (na primjer, boja teksta, boja veze) ili za pozadinu elementa (boja pozadine, boja bloka). Mogu se koristiti i za promjenu boje dugmeta, ivice, markera, lebdenja i drugih dekorativnih efekata.
Možete postaviti vlastite vrijednosti boja u različitim formatima. Sljedeća tabela navodi sve moguće formate:
Navedeni formati su detaljnije opisani u nastavku.
CSS boje - heksadecimalni kodovi
Heksadecimalni kod boja je šestocifreni prikaz boje. Prve dvije cifre (RR) predstavljaju crvenu vrijednost, sljedeće dvije predstavljaju zelenu vrijednost (GG), a posljednje dvije predstavljaju plavu vrijednost (BB).
CSS boje - kratki heksadecimalni kodovi
Kratki heksadecimalni kod boje je kraći oblik šestocifrenih zapisa. U ovom formatu, svaka cifra se ponavlja kako bi se dobila ekvivalentna šestocifrena vrijednost boje. Na primjer: # 0F0 postaje # 00FF00.
Heksadecimalna vrijednost može se uzeti iz bilo kojeg grafičkog softvera kao što je Adobe Photoshop, Core Draw, itd.
Svakom heksadecimalnom kodu boje u CSS-u prethodiće heš znak "#". Slijede primjeri korištenja heksadecimalne notacije.
CSS boje - RGB vrijednosti
RGB vrijednost je kod boje, koji se postavlja pomoću svojstva rgb (). Ovo svojstvo uzima tri vrijednosti, po jednu za crvenu, zelenu i plavu. Vrijednost može biti cijeli broj, od 0 do 255, ili postotak.
Bilješka: ne podržavaju svi pretraživači svojstvo boje rgb (), pa se ne preporučuje da ga koristite.
Ispod je primjer koji prikazuje više boja koristeći RGB vrijednosti.
Generator kodova boja
Možete kreirati milione kodova boja koristeći našu uslugu.
Sigurne boje pretraživača
Ispod je tabela od 216 boja koje su najsigurnije i najzavisnije od računara. Ove CSS boje se kreću od 000000 do FFFFFF heksadecimalno. Oni su bezbedni za upotrebu jer obezbeđuju da svi računari ispravno prikazuju boju kada rade sa paletom od 256 boja.
| CSS "sigurna" tabela boja | |||||
| #000000 | #000033 | #000066 | #000099 | # 0000CC | # 0000FF |
| #003300 | #003333 | #003366 | #003399 | # 0033CC | # 0033FF |
| #006600 | #006633 | #006666 | #006699 | # 0066CC | # 0066FF |
| #009900 | #009933 | #009966 | #009999 | # 0099CC | # 0099FF |
| # 00CC00 | # 00CC33 | # 00CC66 | # 00CC99 | # 00CCCC | # 00CCFF |
| # 00FF00 | # 00FF33 | # 00FF66 | # 00FF99 | # 00FFCC | # 00FFFF |
| #330000 | #330033 | #330066 | #330099 | # 3300CC | # 3300FF |
| #333300 | #333333 | #333366 | #333399 | # 3333CC | # 3333FF |
| #336600 | #336633 | #336666 | #336699 | # 3366CC | # 3366FF |
| #339900 | #339933 | #339966 | #339999 | # 3399CC | # 3399FF |
| # 33CC00 | # 33CC33 | # 33CC66 | # 33CC99 | # 33CCCC | # 33CCFF |
| # 33FF00 | # 33FF33 | # 33FF66 | # 33FF99 | # 33FFCC | # 33FFFF |
| #660000 | #660033 | #660066 | #660099 | # 6600CC | # 6600FF |
| #663300 | #663333 | #663366 | #663399 | # 6633CC | # 6633FF |
| #666600 | #666633 | #666666 | #666699 | # 6666CC | # 6666FF |
| #669900 | #669933 | #669966 | #669999 | # 6699CC | # 6699FF |
| # 66CC00 | # 66CC33 | # 66CC66 | # 66CC99 | # 66CCCC | # 66CCFF |
| # 66FF00 | # 66FF33 | # 66FF66 | # 66FF99 | # 66FFCC | # 66FFFF |
| #990000 | #990033 | #990066 | #990099 | # 9900CC | # 9900FF |
| #993300 | #993333 | #993366 | #993399 | # 9933CC | # 9933FF |
| #996600 | #996633 | #996666 | #996699 | # 9966CC | # 9966FF |
| #999900 | #999933 | #999966 | #999999 | # 9999CC | # 9999FF |
| # 99CC00 | # 99CC33 | # 99CC66 | # 99CC99 | # 99CCCC | # 99CCFF |
| # 99FF00 | # 99FF33 | # 99FF66 | # 99FF99 | # 99FFCC | # 99FFFF |
| # CC0000 | # CC0033 | # CC0066 | # CC0099 | # CC00CC | # CC00FF |
| # CC3300 | # CC3333 | # CC3366 | # CC3399 | # CC33CC | # CC33FF |
| # CC6600 | # CC6633 | # CC6666 | # CC6699 | # CC66CC | # CC66FF |
| # CC9900 | # CC9933 | # CC9966 | # CC9999 | # CC99CC | # CC99FF |
| # CCCC00 | # CCCC33 | # CCCC66 | # CCCC99 | #CCCCCC | #CCCCFF |
| # CCFF00 | # CCFF33 | # CCFF66 | # CCFF99 | #CCFFCC | #CCFFFF |
| # FF0000 | # FF0033 | # FF0066 | # FF0099 | # FF00CC | # FF00FF |
| # FF3300 | # FF3333 | # FF3366 | # FF3399 | # FF33CC | # FF33FF |
| # FF6600 | # FF6633 | # FF6666 | # FF6699 | # FF66CC | # FF66FF |
| # FF9900 | # FF9933 | # FF9966 | # FF9999 | # FF99CC | # FF99FF |
| # FFCC00 | # FFCC33 | # FFCC66 | # FFCC99 | #FFCCCC | #FFCCFF |
| # FFFF00 | # FFFF33 | # FFFF66 | # FFFF99 | #FFFFCC | #FFFFFF |
