Kao što znate, boja može utjecati na stanje osobe: i psihičko i fizičko. Svaki dan, gledajući web stranice na Internetu, oči procjenjuju milijune 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 računalne tehnologije.
RGB je model boja koji predstavlja metodu dobivanja svih boja i njihovih nijansi miješanjem u različitim omjerima tri glavne komponente, a to su:
- Crvena boja ( Crvena);
- zelena boja ( Zelena);
- plava boja ( Plava).
Odatle dolazi i skraćeni naziv RGB. Ove boje su odabrane kao glavne s razlogom: razlog je fiziologija mrežnice ljudskog oka i način na koji ih ono percipira:
RGB model i danas je najpopularniji i koristi se za reprodukciju boja na TV ekranima i računalnim monitorima. Kako proizvođači daju svoje proizvode različitim karakteristikama, 1996. je stvoren jedinstveni RGB sustav sinteze boja nazvan sRGB, na kojem su Microsoft i HP surađivali.
Numerički prikaz boja
Kao što je ranije spomenuto, RGB boje nastaju miješanjem glavnih boja. Za opisivanje intenziteta svakog od njih usvojena je shema u kojoj je boja predstavljena rasponom 0-255 (8 bita), što u heksadecimalnom sustavu 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 dobivaju različite nijanse crvene, zelene i plave. Ispod je tablica njihove gradacije, kao i heksadecimalne vrijednosti svake od nijansi:
RGB tablice boja
Naravno, osim gradacija primarnih boja, postoje i mješovite, a njihov broj je prilično velik. Stoga je stvorena tablica RGB boja u kojoj su prikazane sve postojeće nijanse, njihovi nazivi i brojčani prikazi ( decimalni i heksadecimalni).
S njim se možete upoznati ovdje. Ova tablica znatno olakšava život web dizajnerima, jer u nekoliko sekundi možete pronaći željenu nijansu i saznati njezin brojčani prikaz.
Sigurna RGB paleta boja
Međutim, u jednom trenutku pojavio se problem prikazivanja boja u različitim preglednicima, a za njegovo rješavanje sastavljena je takozvana "sigurna" paleta RGB boja koje su izvedene matematičkim izračunima.
Kada preglednik ne može ispravno prikazati boju, pokušava se približiti željenoj miješanjem susjednih boja, a rezultat će najvjerojatnije biti potpuno neprihvatljiv:
Koristeći RGB kodove boja iz ove palete, web programer se ne može bojati prikazivanja boja na stranicama svojih web stranica kada ih gledaju s različitim preglednicima, platformama i monitorima. Iako u ovom trenutku tablica sigurnih boja gubi na važnosti ( tehnički napredak još uvijek ne miruje), kada ga koristite, možete, kako kažu, dobro spavati.
Zlatna boja u RGB modelu
Po prvi put riječ "zlato" korištena je početkom XIV stoljeća za opisivanje boje kemijskog elementa nazvanog Aurum - zlato. U RGB-u zlato je predstavljeno sljedećim brojčanim vrijednostima:
- RGB (255, 215, 0) - decimalni sustav;
- HEX # FFD700 - heksadecimalni sustav.
Bež boja u RGB modelu
Bež boja zauzima prilično značajno mjesto u povijesti, čak i ako nije najizrazitija. Mnogi spomenici kulture, posebno antičke skulpture, izrađeni su od kamena sapunice i sapunice, koji imaju bež nijansu. U RGB-u, bež ima sljedeće numeričke prikaze.
Vlad Merzhevich
U HTML-u boja se specificira na jedan od dva načina: pomoću heksadecimalnog koda i imenom nekih boja. Uglavnom se koristi metoda koja se temelji na heksadecimalnom brojevnom sustavu, kao najuniverzalnija.
Heksadecimalne boje
Heksadecimalni brojevi se koriste za određivanje boja u HTML-u. Heksadecimalni sustav, za razliku od decimalnog sustava, temelji se, kako mu ime govori, na broju 16. Brojevi će biti sljedeć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. Stol 6.1 prikazuje korespondenciju između decimalnih i heksadecimalnih brojeva.
Brojevi veći od 15 u heksadecimalnom sustavu nastaju spajanjem dva broja u jedan (tablica 6.2). Na primjer, 255 decimalno je FF heksadecimalno.
Kako bi se izbjegla zabuna u definiciji brojevnog sustava, hash znak # stavlja se ispred heksadecimalnog broja, na primjer # aa69cc. U ovom slučaju registar nije bitan, pa je dopušteno napisati # F0F0F0 ili # f0f0f0.
Tipična boja koja se koristi u HTML-u izgleda ovako.
Ovdje je boja pozadine web stranice postavljena na # FA8E47. Hash simbol # ispred broja znači da je heksadecimalan. Prve dvije znamenke (FA) definiraju crvenu komponentu boje, treće do četvrte znamenke (8E) su zelene, a posljednje dvije znamenke (47) su plave. Kao rezultat, dobivate 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 koji se temelji na crvenoj, zelenoj i plavoj komponenti naziva se RGB (crvena, zelena, plava; crvena, zelena, plava). Ovaj model je aditivni (od add - dodati), u kojem dodavanjem sve tri komponente tvori bijelu boju.
Da biste olakšali navigaciju u heksadecimalnim bojama, uzmite u obzir neka pravila.
- Ako su vrijednosti komponenti boje iste (na primjer: # D6D6D6), tada dobivate sivu nijansu. Što je broj veći, boja je svjetlija, vrijednosti variraju od # 000000 (crno) do #FFFFFF (bijelo).
- Jarko crvena boja nastaje ako se crvena komponenta postavi 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 dobiva miješanjem crvene sa zelenom. To je jasno vidljivo na kotaču boja (slika 6.1), gdje su prikazane primarne boje (crvena, zelena, plava) i komplementarne ili komplementarne boje. To uključuje žutu, cijan i ljubičastu (također se naziva magenta). Općenito, bilo koja boja se može dobiti miješanjem obližnjih boja. Dakle, cijan (# 00FFFF) se dobiva kombinacijom plave i zelene.
Riža. 6.1. Krug boja
Heksadecimalne boje ne treba birati empirijski. U tu svrhu prikladan je grafički uređivač koji može raditi s različitim modelima boja, na primjer, Adobe Photoshop. Na sl. 6.2 prikazuje prozor za odabir boje u ovom programu, a rezultirajuća heksadecimalna vrijednost trenutne boje je ocrtana linijom. Možete ga kopirati i zalijepiti u svoj kod.
Riža. 6.2. Prozor za odabir boje u Photoshopu
Web boje
Ako kvalitetu boje monitora postavite na 8 bita (256 boja), tada se ista boja može različito prikazati u različitim preglednicima. To je zbog načina na koji se grafika prikazuje, gdje preglednik 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 oponašaju navedenu. Kako bi boja ostala nepromijenjena u različitim preglednicima, uveli smo paletu takozvanih web boja. Web boje su one boje, za čiju je komponentu - crvenu, zelenu i plavu - postavljena 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 značajka web boje je da se pojavljuje ista u svim preglednicima. Trenutno je relevantnost web boja vrlo mala zbog povećanja kvalitete 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. Stol 6.3 navodi nazive popularnih naziva boja.
| Naziv boje | Boja | Opis | Heksadecimalna vrijednost |
|---|---|---|---|
| crno | Crno | #000000 | |
| plava | Plava | # 0000FF | |
| fuksija | Svijetlo ljubičasta | # FF00FF | |
| siva | Tamno siva | #808080 | |
| zelena | Zelena | #008000 | |
| vapno | Svijetlo zelena | # 00FF00 | |
| kesten | Tamno crvena | #800000 | |
| mornarica | mornarsko plava | #000080 | |
| maslina | Maslina | #808000 | |
| ljubičasta | Tamnoljubičasta | #800080 | |
| Crvena | Crvena | # FF0000 | |
| srebro | Svijetlo siva | # C0C0C0 | |
| teal | Plavo zeleno | #008080 | |
| bijelim | Bijeli | #FFFFFF | |
| žuta boja | Žuta boja | # FFFF00 |
Nije važno na koji ćete način boju odrediti - njezinim imenom ili pomoću heksadecimalnih brojeva. 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
Primjer teksta
U ovom primjeru, boja pozadine postavljena je pomoću atributa bgcolor oznake
, a boja teksta kroz atribut teksta. Za promjenu, atribut teksta je postavljen na heksadecimalni broj, a bgcolor je postavljena na ključnu riječ rezervirana teal.CSS kodovi boja koriste se 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). Također se mogu koristiti za promjenu boje gumba, obruba, markera, lebdenja i drugih ukrasnih efekata.
Možete postaviti vlastite vrijednosti boja u različitim formatima. Sljedeća tablica navodi sve moguće formate:
Navedeni formati su detaljnije opisani u nastavku.
CSS boje - heksadecimalni kodovi
Heksadecimalni kod boja je šesteroznamenkasti prikaz boje. Prve dvije znamenke (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 šesteroznamenkastih zapisa. U ovom formatu svaka znamenka se ponavlja kako bi se dobila ekvivalentna šesteroznamenkasta 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 prethodit će hash znak "#". Slijede primjeri korištenja heksadecimalnog zapisa.
CSS boje - RGB vrijednosti
RGB vrijednost je kod boje koji se postavlja pomoću svojstva rgb (). Ovo svojstvo ima 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 preglednici svojstvo boje rgb (), pa se ne preporučuje da ga koristite.
Ispod je primjer koji prikazuje više boja pomoću RGB vrijednosti.
Generator kodova boja
Pomoću naše usluge možete stvoriti milijune kodova boja.
Sigurne boje preglednika
Ispod je tablica od 216 boja koje su najsigurnije i najneovisnije o računalu. Ove CSS boje se kreću od 000000 do FFFFFF heksadecimalno. Sigurni su za korištenje jer osiguravaju da sva računala ispravno prikazuju boju kada rade s paletom od 256 boja.
| CSS "sigurna" tablica 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 |
