Kao što znate, boja može uticati na stanje osobe: i mentalno i fizičko. Svaki dan, dok pretražujete 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 određene ciljeve.
To je zbog činjenice da neke nijanse smiruju, a neke, naprotiv, uzbuđuju. 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. Budući da proizvođači svojim proizvodima daju različite karakteristike, 1996. godine stvoren je objedinjeni sistem sinteze boja zasnovan na RGB-u pod nazivom sRGB, na kojem su Microsoft i HP radili zajedno.
Numerički prikaz boje
Kao što je ranije spomenuto, RGB boje se formiraju miješanjem primarnih boja. Da bi se opisao intenzitet svakog od njih, usvojena je šema u kojoj je boja predstavljena rasponom 0-255 (8 bita), što u heksadecimalnom zapisu 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 ima vrijednosti manje od 255, tada se dobijaju različite nijanse crvene, zelene i plave. Slijedi tabela njihovih gradacija, kao i heksadecimalne vrijednosti svake od nijansi:
RGB tablice boja
Naravno, pored gradacija primarnih 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 njihova imena i numerički prikazi ( u decimalnom i heksadecimalnom obliku).
Možete ga pogledati ovdje. Ova tablica znatno olakšava život web dizajnerima, jer za nekoliko sekundi možete pronaći potrebnu nijansu i saznati njen brojčani prikaz.
Sigurna RGB paleta boja
Međutim, u jednom trenutku se pojavio problem sa prikazivanjem 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šat će dobiti nešto što mu je potrebno miješanjem susjednih boja i najvjerovatnije će rezultat biti potpuno neprihvatljiv:
Korištenjem RGB kodova boja iz ove palete, web programer može biti bezbrižan u pogledu prikaza boja na stranicama svoje web stranice kada se gleda pomoću različitih pretraživača, platformi i monitora. Iako u ovom trenutku tabela sigurnih boja gubi na važnosti ( tehnološki napredak i dalje ne miruje), kada ga koristite možete, kako kažu, mirno spavati.
Zlatna boja u RGB modelu
Reč „zlato“ je prvi put upotrebljena početkom 14. veka da opiše boju hemijskog elementa zvanog Aurum – zlato. U RGB modelu, zlatna boja je predstavljena 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 modelu, bež boja ima sljedeće numeričke prikaze.
Heksadecimalni brojevi se koriste za određivanje boja. Heksadecimalni sistem, za razliku od decimalnog, baziran 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. Brojevi veći od 15 u heksadecimalnom sistemu formiraju se kombinovanjem dva broja u jedan. Na primjer, broj 255 u decimalnom obliku odgovara broju FF u heksadecimalnom. Da bi se izbjegla zabuna u određivanju brojevnog sistema, ispred heksadecimalnog broja stavlja se heš simbol #, na primjer #666999. Svaka od tri boje - crvena, zelena i plava - može imati vrijednosti od 00 do FF. Dakle, simbol boje je podijeljen na tri komponente #rrggbb, pri čemu prva dva simbola označavaju crvenu komponentu boje, srednja dva - zelenu, a zadnja dva - plavu. Dozvoljeno je koristiti skraćeni oblik #rgb, gdje svaki znak treba udvostručiti. Dakle, unos #fe0 treba smatrati #ffee00.
Po imenu
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 4.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Pretraživači podržavaju neke boje svojim imenom. U tabeli 1 prikazuje nazive, heksadecimalni kod, RGB, HSL vrijednosti i opis.
| Ime | Boja | Kod | RGB | HSL | Opis |
|---|---|---|---|---|---|
| bijela | #fffff ili #fff | rgb(255,255,255) | hsl(0,0%,100%) | Bijelo | |
| srebro | #c0c0c0 | rgb(192,192,192) | hsl(0,0%,75%) | Siva | |
| siva | #808080 | rgb(128,128,128) | hsl(0,0%,50%) | Tamno siva | |
| crna | #000000 ili #000 | rgb(0,0,0) | hsl(0,0%,0%) | Crno | |
| maroon | #800000 | rgb(128,0,0) | hsl(0,100%,25%) | Tamno crvena | |
| crvena | #ff0000 ili #f00 | rgb(255,0,0) | hsl(0,100%,50%) | Crveni | |
| narandžasta | #ffa500 | rgb(255,165,0) | hsl(38.8,100%,50%) | Narandžasta | |
| žuta | #ffff00 ili #ff0 | rgb(255,255,0) | hsl(60,100%,50%) | Žuta | |
| maslina | #808000 | rgb(128,128,0) | hsl(60,100%,25%) | Maslina | |
| kreč | #00ff00 ili #0f0 | rgb(0,255,0) | hsl(120,100%,50%) | Svijetlo zelena | |
| zeleno | #008000 | rgb(0,128,0) | hsl(120,100%,25%) | Zeleno | |
| aqua | #00ffff ili #0ff | rgb(0,255,255) | hsl(180,100%,50%) | Plava | |
| plava | #0000ff ili #00f | rgb(0,0,255) | hsl(240,100%,50%) | Plava | |
| mornarica | #000080 | rgb(0,0,128) | hsl(240,100%,25%) | Tamno plava | |
| teal | #008080 | rgb(0,128,128) | hsl(180,100%,25%) | Plavo zeleno | |
| fuksija | #ff00ff ili #f0f | rgb(255,0,255) | hsl(300,100%,50%) | Pink | |
| ljubičasta | #800080 | rgb(128,0,128) | hsl(300,100%,25%) | Violet |
Koristeći RGB
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 5.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Možete definirati boju koristeći crvene, zelene i plave vrijednosti u decimalnim terminima. Svaka od tri komponente boje ima vrijednost od 0 do 255. Također je dozvoljeno specificirati boju kao postotak, pri čemu 100% odgovara broju 255. Prvo navedite rgb ključnu riječ, a zatim navedite komponente boje u zagradama , odvojeno zarezima, na primjer rgb(255, 128, 128) ili rgb(100%, 50%, 50%).
RGBA
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
RGBA format je po sintaksi sličan RGB-u, ali uključuje alfa kanal koji specificira transparentnost elementa. Vrijednost 0 je potpuno transparentna, 1 je neprozirna, a srednja vrijednost poput 0,5 je poluprozirna.
RGBA je dodat u CSS3, tako da se CSS kod mora provjeriti u odnosu na ovu verziju. Treba napomenuti da je CSS3 standard još uvijek u razvoju i da se neke karakteristike mogu promijeniti. Na primjer, boja u RGB formatu dodana svojstvu background-color je potvrđena, ali boja dodana svojstvu background-a više nije važeća. Istovremeno, pretraživači sasvim ispravno razumiju boju za oba svojstva.
HSL
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 9.6+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
Naziv HSL formata izveden je iz kombinacije prvih slova Hue (nijansa), Saturate (zasićenost) i Lightness (svjetlina). Nijansa je vrijednost boje na krugu boja (slika 1) i data je u stepenima. 0° odgovara crvenoj, 120° zelenoj, a 240° plavoj. Vrijednost nijanse može varirati od 0 do 359.
Rice. 1. Točak boja
Zasićenost je intenzitet boje i mjeri se u procentima od 0% do 100%. Vrijednost od 0% označava da nema boje i ima nijansu sive, 100% je maksimalna vrijednost za zasićenje.
Svjetlost određuje koliko je svijetla boja i određena je kao postotak od 0% do 100%. Niske vrijednosti čine boju tamnijom, a visoke vrijednosti čine boju svjetlijom; ekstremne vrijednosti od 0% i 100% odgovaraju crno-bijeloj.
HSLA
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
HSLA format je po sintaksi sličan HSL-u, ali uključuje alfa kanal za određivanje transparentnosti elementa. Vrijednost 0 je potpuno transparentna, 1 je neprozirna, a srednja vrijednost poput 0,5 je poluprozirna.
Vrijednosti boja RGBA, HSL i HSLA se dodaju u CSS3, pa provjerite valjanost verzije koda kada koristite ove formate.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
Upozorenje
Sve metode hvatanja lavova navedene na stranici su teorijske i bazirane na računskim metodama. Autori ne jamče vašu sigurnost prilikom njihove upotrebe i odriču se bilo kakve odgovornosti za rezultate. Zapamtite, lav je grabežljivac i opasna životinja!
Rezultat ovog primjera prikazan je na sl. 2.
Rice. 2. Boje na web stranici
Kodovi boja u CSS-u se koriste za specifikaciju boja. Obično se kodovi boja ili vrijednosti boja koriste za postavljanje boje ili za boju prednjeg plana elementa (npr. boja teksta, boja veze) ili za boju pozadine elementa (boja pozadine, boja bloka). Mogu se koristiti i za promjenu boje gumba, obruba, markera, lebdenja i drugih dekorativnih efekata.
Možete odrediti svoje vrijednosti boja u različitim formatima. Sljedeća tabela navodi sve moguće formate:
Navedeni formati su detaljnije opisani u nastavku.
CSS Boje - Hex 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 notacije od šest znakova. 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 "#". Ispod su primjeri korištenja heksadecimalnih 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 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.
Boje sigurne za pregledač
Ispod je tabela od 216 boja koje su najsigurnije i nezavisne od računara. Ove boje u CSS-u se kreću od 000000 do FFFFFF heksadecimalnog koda. Oni su bezbedni za upotrebu jer obezbeđuju da svi računari ispravno prikazuju boju kada rade sa paletom od 256 boja.
| Tabela "sigurnih" boja u CSS-u | |||||
| #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 |
>>Upravljanje bojama
Heksadecimalne vrijednosti RGB boja
Metode opisivanja i obrade boje razlikuju se jedna od druge po tome za koju konačnu reprezentaciju su namijenjene. Uporedimo, na primjer, prikaz boja za štampu i za kompjuterske monitore. U prvom slučaju uzima se osnova bijela boja papira na koji se naknadno nanose tri osnovne boje: plava, ljubičasta I žuta. Miješajući se jedna s drugom i sa bijelom bojom papira u različitim omjerima, ove tri osnovne boje daju različite nijanse boja, osim čisto crne, ili u potpunom odsustvu boja daju bijeli papir. Ako im dodamo crnu boju, dobićemo CMYK-metoda prenošenja boje kada se tražena boja dobije oduzimanjem boja koje nedostaju od bijele.
U drugom slučaju uzima se osnova crna boja ekrana monitora, čija svaka ćelija svijetli u jednoj od tri boje: crvena-crveni, zeleno-zeleno i plava-plava. Tada, u potpunom odsustvu bilo kakvog sjaja, dobijamo čistu crnu boju ekrana, a bilo koja od traženih boja je data odnosom svake od tri boje. U ovom slučaju ćemo dobiti RGB-način prenosa boje. Primarne boje mogu varirati od 0
prije 255
, ili od 0%
prije 100%
, ili se može predstaviti kao heksadecimalna vrijednost. Na slici ispod možete vidjeti rezultate miješanja primarnih boja.
Heksadecimalni sistem brojeva, za razliku od decimalnog, nema deset cifara, već šesnaest - otuda i naziv. Shodno tome, mogu postojati samo neponavljajuće varijante kombinacija od dvije cifre - 256 , za nastavak niza brojeva nakon 9 pisma od A prije F, dakle, serija će izgledati ovako -
| 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F. |
U ovom slučaju, boja je određena sa tri heksadecimalna broja, od kojih se svaki sastoji od dvije znamenke. Prvi broj određuje intenzitet crvena boje, srednje- zeleno, zadnja stvar- plava boje. Svi brojevi mogu imati vrijednosti u rasponu od 00 prije FF(od 0 do 255). Na primjer: zelena boja je data kao #00FF00, crvena - kao #FF0000, plava - kao #0000FF, bijela - kao #FFFFFF, potpuno odsustvo boje ili crne boje se daje kao #000000 .
U donjem obrascu možete odrediti bilo koje heksadecimalne vrijednosti za svaku od tri boje i vidjeti rezultat njihovog miješanja klikom na polje za izlaz.
Primjeri nekih heksadecimalnih RGB vrijednosti boja: gradacije crvene, plave i zelene.
| pogled | kod | pogled | kod | pogled | kod | pogled | kod | pogled | kod | pogled | kod |
| #010000 | #800000 | #000100 | #008000 | #000001 | #000080 | ||||||
| #100000 | #900000 | #001000 | #009000 | #000010 | #000090 | ||||||
| #200000 | #A00000 | #002000 | #00A000 | #000020 | #0000A0 | ||||||
| #300000 | #B00000 | #003000 | #00B000 | #000030 | #0000B0 | ||||||
| #400000 | #C00000 | #004000 | #00C000 | #000040 | #0000C0 | ||||||
| #500000 | #D00000 | #005000 | #00D000 | #000050 | #0000D0 | ||||||
| #600000 | #E00000 | #006000 | #00E000 | #000060 | #0000E0 | ||||||
| #700000 | #FF0000 | #007000 | #00FF00 | #000070 | #0000FF |
Određivanje boje pomoću string literala
Radi lakšeg korišćenja, nekim bojama i njihovim kombinacijama dodeljena su imena koja prepoznaju svi pretraživači, a postalo je moguće postaviti mnoge od njih po imenu. Tabela ispod prikazuje neke od naziva boja:
| pogled | Ime | pogled | Ime | pogled | Ime | pogled | Ime |
| Bijelo | Crveni | Narandžasta | Žuta | ||||
| Zeleno | Plava | Ljubičasta | Crno | ||||
| Aliceblue | Antiquewhite | Aqua | Akvamarin | ||||
| Azure | Bež | Bisque | Blanchedalmond | ||||
| Blueviolet | Brown | Burlywood | Cadetblue | ||||
| Chartreuse | Čokolada | Coral | Cornflowerblue | ||||
| Cornssilk | Crimson | Cyan | Tamno plava | ||||
| Darkcyan | Darkgoldenrod | Tamno siva | Tamno zelena | ||||
| Darkkhaki | Darkmagenta | darkivegreen | Darkorange | ||||
| Darkorchid | Tamno crvena | Darklosos | Darkseagreen | ||||
| Darkslateblue | Darkslategray | Tamnotirkizno | Darkviolet | ||||
| Deeppink | Deepskyblue | Dimgray | Dodgerblue | ||||
| Vatrogasna cigla | Floralwhite | Forestgreen | Fuschia | ||||
| Gainsboro | Ghostwhite | Zlato | Goldenrod | ||||
| siva | Greenyellow | Honeydew | Hotpink | ||||
| Indianred | Indigo | Ivory | Kaki | ||||
| Lavanda | Lavanda rumenilo | Lemonchiffon | Svijetlo plavo | ||||
| Lightcoral | Lightcyan | Lightcoldenrodyellow | Svetlozelena | ||||
| Svijetlo siva | Lightpink | Lightlosos | Lightseagreen | ||||
| Lightskyblue | Lightslategray | Lightsteelblue | Svijetložuta | ||||
| Lime | Limegreen | Posteljina | Magenta | ||||
| Maroon | Mediumaquamarine | Srednje plava | Mediumorchid | ||||
| Srednje ljubičasta | Mediumseagreen | Mediumslateblue | Mediumspringgreen | ||||
| Srednje tirkizno | Srednjevioletred | Midnightblue | Mintcream | ||||
| Mistyrose | Navajowhite | mornarica | Oldlace | ||||
| Maslina | Oliverab | Orangered | Orhideja | ||||
| Palegoldenrod | Palegreen | Paletteurquoise | Palevioletred | ||||
| Papayawhip | Peachpuff | Peru | Pink | ||||
| Šljiva | Powderblue | Rosybrown | Royalblue | ||||
| Saddlebrown | Seagreen | Školjka | Sienna | ||||
| Srebro | Nebo plavo | Slateblue | Slategray | ||||
| Snijeg | Springgreen | Steelblue | Tan | ||||
| Teal | Thistle | Paradajz | Tirkizna | ||||
| Violet | Pšenica | Whitesmoke | Žutozelena |
Korištenje sigurne palete boja
Nažalost, na različitim platformama, sa različitim sistemskim postavkama, ispravna reprodukcija boja je problem. Stvar je u tome što pretraživač uvek pokušava da prilagodi paletu boja dokumenta sistemskim postavkama i mogućnostima monitora, nezavisno mešanjem boja i njihovom zamenom. Kao rezultat toga, ponekad korisnik ne vidi tačno ono što mu je webmaster želio pokazati. Izlaz iz ove situacije pronađen je u korišćenju palete, čija je svaka boja zagarantovana podjednako od strane svih pretraživača na različitim platformama. Ovo je tzv garantovano paleta, tzv sigurno palete. Ova paleta uključuje boje čije komponente boje imaju sljedeće vrijednosti: 00 ,33 ,66 ,99 , CC,FF, na sve moguće načine 216 njihove kombinacije.
| pogled | kod | pogled | kod | pogled | kod | pogled | kod | pogled | kod | pogled | kod |
| FFFFFF | CCCCCC | 999999 | 666666 | 333333 | 000000 | ||||||
| CCCC66 | CCCC33 | 999966 | 999933 | 999900 | 666600 | ||||||
| CCFF66 | CCFF00 | CCFF33 | CCCC99 | 666633 | 333300 | ||||||
| 99FF00 | 99FF33 | 99CC66 | 99CC00 | 99CC33 | 669900 | ||||||
| CCFF99 | 99FF99 | 66CC00 | 66CC33 | 669933 | 336600 | ||||||
| 66FF00 | 66FF33 | 33FF00 | 33CC00 | 339900 | 009900 | ||||||
| 33FF33 | 00FF33 | 00FF00 | 00CC00 | 33CC33 | 00CC33 | ||||||
| CCFFCC | 99CC99 | 66CC66 | 669966 | 336633 | 003300 | ||||||
| 99FF99 | 66FF66 | 33FF66 | 00FF66 | 339933 | 006600 | ||||||
| 66FF99 | 33FF99 | 00FF99 | 33CC66 | 00CC66 | 009933 | ||||||
| 66CC99 | 33CC99 | 00CC99 | 339966 | 009966 | 006633 | ||||||
| 99FFCC | 66FFCC | 33FFCC | 00FFCC | 33CCCC | 009999 | ||||||
| CCFFFF | 99FFFF | 66FFFF | 33FFFF | 00FFFF | 00CCCC | ||||||
| 99CCCC | 66CCCC | 339999 | 669999 | 006666 | 336666 | ||||||
| 66CCFF | 33CCFF | 00CCFF | 3399CC | 0099CC | 003333 | ||||||
| 99CCFF | 3399FF | 0099FF | 6699CC | 336699 | 006699 | ||||||
| 0066FF | 3366CC | 0066CC | 0033FF | 003399 | 003366 | ||||||
| 6699FF | 3366FF | 0000FF | 0000CC | 0033CC | 000033 | ||||||
| 3333FF | 3300FF | 3300CC | 3333CC | 000099 | 000066 | ||||||
| 9999CC | 6666FF | 6666CC | 666699 | 333399 | 333366 | ||||||
| CCCCFF | 9999FF | 6666FF | 6600FF | 330099 | 330066 | ||||||
| 9966CC | 9966FF | 6600CC | 6633CC | 663399 | 330033 | ||||||
| CC99FF | CC66FF | 9933FF | 9900FF | 660099 | 663366 | ||||||
| CC66FF | CC33FF | CC00FF | 9900CC | 996699 | 660066 | ||||||
| CC99CC | CC66CC | CC33CC | CC00CC | 990099 | 993399 | ||||||
| FFCCFF | FF99FF | FF66FF | FF33FF | FF00FF | CC3399 | ||||||
| FF66CC | FF00CC | FF33CC | CC6699 | CC0099 | 990066 | ||||||
| FF99CC | FF3399 | FF0099 | CC0066 | 993366 | 660033 | ||||||
| FF6699 | FF3399 | FF0066 | CC3366 | 996666 | 663333 | ||||||
| CC9999 | CC6666 | CC3333 | CC0000 | 990033 | 330000 | ||||||
| FFCCCC | FF9999 | FF6666 | FF3333 | FF0000 | CC0033 | ||||||
| FF6633 | CC3300 | FF3300 | FF0000 | CC0000 | 990000 | ||||||
| FFCC99 | FFCC66 | FF6600 | CC6633 | 993300 | 660000 | ||||||
| FF9900 | FF9933 | CC9966 | CC6600 | 996633 | 663300 | ||||||
| FFCC66 | FFCC00 | FFCC33 | CC9900 | CC9933 | 996600 | ||||||
| FFFFCC | FFFF99 | FFFF66 | FFFF33 | FFFF00 | CCCC00 |
Boja u CSS-u se može postaviti na različite načine:
- po imenu,
- po heksadecimalnoj vrijednosti,
- u RGB i RGBA formatima,
- u HSL i HSLA formatima.
Postavite boju po imenu
Preglednici podržavaju navođenje nekih boja za elemente po imenu. Ova tabela sadrži neke ključne riječi (engleska imena boja) koje se koriste za specificiranje svojstava boja, RGB koda, heksadecimalnog koda (HEX) i HSL koda.
| Ime | Boja | RGB | HEX | HSL | Opis |
|---|---|---|---|---|---|
| bijela | rgb(255, 255, 255) | #fffff ili #fff | hsl(0, 0%, 100%) | Bijelo | |
| srebro | rgb(192, 192, 192) | #c0c0c0 | hsl(0, 0%, 75%) | Siva | |
| siva | rgb(128, 128, 128) | #808080 | hsl(0, 0%, 50%) | Tamno siva | |
| crna | rgb(0, 0, 0) | #000000 ili #000 | hsl(0, 0%, 0%) | Crno | |
| maroon | rgb(128, 0, 0) | #800000 | hsl(0, 100%, 25%) | Tamno crvena | |
| crvena | rgb(255, 0, 0) | #ff0000 ili #f00 | hsl(0, 100%, 50%) | Crveni | |
| narandžasta | rgb(255, 165, 0) | #ffa500 | hsl(38.8, 100%, 50%) | Narandžasta | |
| žuta | rgb(255, 255, 0) | #ffff00 ili #ff0 | hsl(60, 100%, 50%) | Žuta | |
| maslina | rgb(128, 128, 0) | #808000 | hsl(60, 100%, 25%) | Maslina | |
| kreč | rgb(0, 255, 0) | #00ff00 ili #0f0 | hsl(120, 100%, 50%) | Svijetlo zelena | |
| zeleno | rgb(0, 128, 0) | #008000 | hsl(120, 100%, 25%) | Zeleno | |
| aqua | rgb(0, 255, 255) | #00ffff ili #0ff | hsl(180, 100%, 50%) | Plava | |
| plava | rgb(0, 0, 255) | #0000ff ili #00f | hsl(240, 100%, 50%) | Plava | |
| mornarica | rgb(0,0,128) | #000080 | hsl(240, 100%, 25%) | Tamno plava | |
| teal | rgb(0, 128, 128) | #008080 | hsl(180, 100%, 25%) | Plavo zeleno | |
| fuksija | rgb(255, 0, 255) | #ff00ff ili #f0f | hsl(300, 100%, 50%) | Pink | |
| ljubičasta | rgb(128, 0, 128) | #800080 | hsl(300, 100%, 25%) | Violet |
Ovo je primjer upotrebe naziva boja, nazivi boja su uzeti iz proširene tabele.
Evo kako ovaj kod radi:
Podešavanje boje pomoću RGB
RGB je aditivni model boja. Na engleskom dodatak- dodatak. RGB je skraćenica od engleskih riječi: Red, Green, Blue - crvena, zelena, plava). Iz ovoga je jasno da se u RGB modelu boje sintetiziraju dodavanjem tri boje (crvena, zelena, plava) u različitim količinama.
Miješanjem crvene, zelene i plave boje možete dobiti nekoliko miliona nijansi. Sve moguće kombinacije su pohranjene u memoriji računara.
Pređi na stvar.
Da biste postavili svojstva u ovom formatu, koristite oznaku rgb(r, g, b) , gdje su r, g, b tri kanala za svaku boju (crvena, zelena, plava). Vrijednosti za svaki kanal su postavljene u rasponu od 0 do 255.
Primjer koda.
Da sve bude jasno, evo primjera koda:
Ovako bi ovaj primjer trebao funkcionirati:
Fig.1. Boje u RGB. Objašnjenja na primjer.
Na početku stranice kreiramo klasu div.rgb, potrebna je za blokove koje kreira tag
Zatim, u kodu postavljamo boju pozadine bloka
Pokušajte urediti ovaj primjer i specificirati svoje vrijednosti, na primjer rgb(100, 100, 100) .
Podešavanje boje pomoću RGBA
CSS3 ima novi alat za rad sa bojom - RGBA format. Može se nazvati evolucijom RGB modela, ali uz dodatak jednog novog kanala - A ili alfa kanala. Ovaj kanal postavlja transparentnost boje. Njegove vrijednosti su postavljene u rasponu od 0 do 1. Vrijednost 0 odgovara punoj transparentnosti, 1 - punoj neprozirnosti (boja će biti ista kao što je specificirana u prva tri RGB kanala), a srednje vrijednosti kao 0,4 ili 0,6 - prozirnost u različitim stepenima.
Primjer koda.
Evo kako će to funkcionirati:
Ovaj kod je vizualno sličan sljedećem, koji koristi RGB model za specificiranje vrijednosti boje:
Evo njegovog rezultata:
Vrijednost alfa kanala jednaka nuli čini bilo koju boju nevidljivom - apsolutno transparentnom; vrijednost jednaka jedan prevodi boju u RGB kodu bez promjena. Svojstvo rgba(255,0,0,1.0) pokazuje crvenu boju rgb(255, 0, 0) .
Po heksadecimalnoj vrijednosti (HEX kod)
U svakodnevnom životu koristimo decimalni sistem brojanja. Njegovo porijeklo je vrlo jednostavno - imamo deset prstiju na rukama, a brojanje na prste bilo je zgodno u životu. Ako decimalni sistem ima deset cifara: od 0 do 9, a broj 10 je sljedeća znamenka, onda heksadecimalni brojni sistem ima 16 cifara, a sljedeća cifra je broj 16.
Za označavanje kodova boja, obične decimalne cifre od 0 do 9 koriste se kao heksadecimalne cifre, a latinična slova od A do F se koriste za označavanje brojeva od 10 do 15, odnosno (0, 1, 2, 3, 4, 5 , 6, 7, 8, 9, A, B, C, D, E, F). Radi jasnoće, stavimo ovo u tabelu:
Za pisanje heksadecimalnih brojeva većih od F (15 u decimalnom sistemu), kao iu decimalnom sistemu, oni takođe koriste kombinaciju dve cifre, ali već heksadecimalne, što je očigledno. Dakle, da zapišete decimalni broj 255 u heksadecimalnom zapisu, koristite FF zapis.
Heksadecimalni sistem je razumljiviji računaru i brže obrađuje vrednosti podešene heksadecimalnom vrednošću.
Da biste naveli boju u heksadecimalnom obliku, prethodite numeričkoj vrijednosti znakom "#", na primjer: #FFC0CB. Sama vrijednost #FFC0CB sastoji se od tri heksadecimalne cifre FF, C0 i CB. Značenje ovog unosa je isto kao i podešavanje boje u RGB formatu (rgb(r, g, b)) - svaka heksadecimalna cifra u HEX kodu označava zasićenost boje u svom kanalu RGB modela.
Ovaj kod će prikazati sljedeće elemente:
A evo i slike sa rezultatom iz odeljka "Podešavanje boja pomoću RGB" na ovoj stranici iznad.
Fig.1. Boje u RGB. Vidimo da su boje identične.
Dozvoljena je skraćena notacija HEX koda u boji: 6-cifreni broj se može napisati kao trocifreni broj. Ovo vrijedi samo kada se ponove dvije cifre u vrijednosti boje jednog kanala.
Odnosno, sljedeća skraćenica je prihvatljiva:
Na primjer, boja #ff22aa može biti napisana kao #f2a, ili boja #44aa22 može biti napisana kao #4a2.
Postavljanje boje pomoću HSL-a
CSS3 ima novi format za određivanje boja.
HSL format je skraćenica za engleske riječi: Hue (nijansa), Saturate (zasićenost) i Lightness (svjetlina).
Nijansa u HSL-u je vrijednost boje na posebnom kotaču boja (slika 2) i određena je u stupnjevima. Ako povučemo analogije sa RGB modelom, onda 0° odgovara crvenoj, 120° odgovara zelenoj, a 240° odgovara plavoj.
Vrijednost nijanse će se promijeniti od 0 do 359.
Slika 2. HSL točak boja. Druga vrijednost - zasićenost (Saturate) je postavljena kao postotak. Pri 100% zasićenosti, boja je što je moguće "sočnija"; kako se indikator zasićenja kreće prema 0%, boja postaje dosadnija i postaje siva.
Treća vrijednost, Lightness, također je postavljena kao postotak. Što je veći procenat, to će boja biti svetlija. Ekstremne vrijednosti od 0% i 100% će označavati crnu (bez svjetla) i bijelu (preeksponirana) boje, respektivno, i nije bitno koja je boja iz kotača boja odabrana u prvom kanalu. Optimalna vrijednost svjetline boje je 50%.
Podešavanje boje pomoću HSLA
HSLA format je povezan sa HSL, baš kao što je RGB sa RGBA. U HSLA formatu, kao iu RGBA, dodat je alfa kanal koji je odgovoran za transparentnost boja.
Boja specificirana u HSL formatu je lakša za čitanje. Možemo reći da je intuitivan. Na primjer, kod hsl(120,60%,50%) može predstavljati konačnu boju ako postoji slika HSL kotača boja u memoriji. Isto se ne može reći za RGB i HEX formate; kod boja specificiran u ovim formatima postaje jasan tek nakon što se vizualizira na monitoru.
Novi formati u CSS3 (HSL, HSLA i RGBA) rade u pretraživačima počevši od verzija: IE 9.0, Opera 10.0 Firefox 3.0. Kako mogu učiniti da stilovi rade na starijim pretraživačima?
Someblosk (boja pozadine: rgb(255,50,50); boja pozadine: rgba(255,50,50,0.85))
Kada koristite ovaj kod u starijim pretraživačima, boja pozadine za klasu .someblosk, iako neće koristiti alfa kanal, biće prikazana u RGB formatu.
