U HTML-u, boja se može specificirati na tri načina:
Postavljanje boje u HTML-u prema njenom imenu
Neke boje se mogu specificirati njihovim imenom, koristeći naziv boje na engleskom kao vrijednost. Najčešće ključne riječi: crna, bijela, crvena, zelena, plava, itd.:
Boja teksta – crvena
Najpopularnije boje standarda World Wide Web Consortium (W3C):
Boja | Ime | Boja | Ime | Boja | Ime | Boja | Ime |
---|---|---|---|---|---|---|---|
Crna | Grey | Srebro | Bijelo | ||||
Žuta | Lime | Aqua | Fuksija | ||||
Crveni | Zeleno | Plava | Ljubičasta | ||||
Maroon | Maslina | Mornarica | Teal |
Primjer korištenja različitih naziva boja:
Primjer: navođenje boje po njenom imenu
- Probajte sami »
Zaglavlje na crvenoj pozadini
Zaglavlje na narandžastoj pozadini
Idemo na krečnu pozadinu
Bijeli tekst na plavoj pozadini
Zaglavlje na crvenoj pozadini
Zaglavlje na narandžastoj pozadini
Idemo na krečnu pozadinu
Bijeli tekst na plavoj pozadini
Određivanje boje pomoću RGB
Kada se na monitoru prikazuju različite boje, RGB paleta se koristi kao osnova. Bilo koja boja se dobija mešanjem tri osnovne boje: R - crveno, G - zelena, B - plava. Svjetlina svake boje je data jednim bajtom i stoga može imati vrijednosti od 0 do 255. Na primjer, RGB(255,0,0) se prikazuje kao crvena jer je crvena postavljena na najveću vrijednost (255) i ostatak je postavljen na 0. Boju možete postaviti i kao postotak. Svaki parametar označava nivo svjetline odgovarajuće boje. Na primjer: vrijednosti rgb(127, 255, 127) i rgb(50%, 100%, 50%) će postaviti istu zelenu boju srednje zasićenosti:
Primjer: Određivanje boje pomoću RGB-a
- Probajte sami »
rgb(127, 255, 127)
rgb(50%, 100%, 50%)
rgb(127, 255, 127)
rgb(50%, 100%, 50%)
Postavite boju po heksadecimalnoj vrijednosti
Vrijednosti R G B također se može specificirati koristeći heksadecimalne (HEX) vrijednosti boja u obliku: #RRGGBB gdje su RR (crvena), GG (zelena) i BB (plava) heksadecimalne vrijednosti od 00 do FF (isto kao decimalna 0-255 ) . Heksadecimalni sistem, za razliku od decimalnog sistema, zasnovan je, kao što mu ime govori, na broju 16. Heksadecimalni sistem koristi sledeće znakove: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Ovdje su brojevi od 10 do 15 zamijenjeni latiničnim slovima. Brojevi veći od 15 u heksadecimalnom sistemu su predstavljeni kombinovanjem dva znaka u jednu vrednost. Na primjer, najveći broj 255 u decimalnom obliku odgovara najvišoj vrijednosti FF u heksadecimalnom. Za razliku od decimalnog sistema, heksadecimalnom broju prethodi heš simbol. # , na primjer, #FF0000 je prikazano kao crveno jer je crvena postavljena na najvišu vrijednost (FF), a ostale boje su postavljene na minimalnu vrijednost (00). Znakovi iza heš simbola # Možete pisati i velikim i malim slovima. Heksadecimalni sistem vam omogućava da koristite skraćeni oblik #rgb, gdje je svaki znak ekvivalentan dvostrukom. Dakle, unos #f7O treba smatrati #ff7700.
Primjer: HEX boja
- Probajte sami »
crvena: #FF0000
zeleno: #00FF00
plava: #0000FF
crvena: #FF0000
zeleno: #00FF00
plava: #0000FF
crvena+zelena=žuta: #FFFF00
crvena+plava=ljubičasta: #FF00FF
zeleno+plavo=cijan: #00FFFF
Lista uobičajenih boja (ime, HEX i RGB):
engleski naziv | Rusko ime | Uzorak | HEX | RGB | ||
---|---|---|---|---|---|---|
Amarant | Amarant | #E52B50 | 229 | 43 | 80 | |
Amber | Amber | #FFBF00 | 255 | 191 | 0 | |
Aqua | Plavo-zelena | #00FFFF | 0 | 255 | 255 | |
Azure | Azure | #007FFF | 0 | 127 | 255 | |
Crna | Crna | #000000 | 0 | 0 | 0 | |
Plava | Plava | #0000FF | 0 | 0 | 255 | |
Bondi Blue | Bondi beach water | #0095B6 | 0 | 149 | 182 | |
Brass | Brass | #B5A642 | 181 | 166 | 66 | |
Brown | Brown | #964B00 | 150 | 75 | 0 | |
Cerulean | Azure | #007BA7 | 0 | 123 | 167 | |
Tamno proljetno zelena | Tamno proljetno zeleno | #177245 | 23 | 114 | 69 | |
Emerald | Emerald | #50C878 | 80 | 200 | 120 | |
Patlidžan | Patlidžan | #990066 | 153 | 0 | 102 | |
Fuksija | Fuksija | #FF00FF | 255 | 0 | 255 | |
Zlato | Zlato | #FFD700 | 250 | 215 | 0 | |
Grey | Grey | #808080 | 128 | 128 | 128 | |
Zeleno | Zeleno | #00FF00 | 0 | 255 | 0 | |
Indigo | Indigo | #4B0082 | 75 | 0 | 130 | |
Jade | Jade | #00A86B | 0 | 168 | 107 | |
Lime | Lime | #CCFF00 | 204 | 255 | 0 | |
Malahit | Malahit | #0BDA51 | 11 | 218 | 81 | |
Mornarica | Tamno plava | #000080 | 0 | 0 | 128 | |
Oker | Oker | #CC7722 | 204 | 119 | 34 | |
Maslina | Maslina | #808000 | 128 | 128 | 0 | |
Narandžasta | Narandžasta | #FFA500 | 255 | 165 | 0 | |
Breskva | Breskva | #FFE5B4 | 255 | 229 | 180 | |
Bundeva | Bundeva | #FF7518 | 255 | 117 | 24 | |
Ljubičasta | Violet | #800080 | 128 | 0 | 128 | |
Crveni | Crveni | #FF0000 | 255 | 0 | 0 | |
Šafran | Šafran | #F4C430 | 244 | 196 | 48 | |
Sea Green | Zeleno more | #2E8B57 | 46 | 139 | 87 | |
Močvarno zeleno | Bolotny | #ACB78E | 172 | 183 | 142 | |
Teal | Plavo-zelena | #008080 | 0 | 128 | 128 | |
Ultramarin | Ultramarin | #120A8F | 18 | 10 | 143 | |
Violet | Violet | #8B00FF | 139 | 0 | 255 | |
Žuta | Žuta | #FFFF00 | 255 | 255 | 0 |
Kodovi boja (pozadina) prema zasićenosti i nijansama.
>>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 se uzima 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
to 255
, ili od 0%
to 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 to 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, zadnji- plava boje. Svi brojevi mogu imati vrijednosti u rasponu od 00 to 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 | Crna | ||||
Aliceblue | Antiquewhite | Aqua | Akvamarin | ||||
Azure | Bež | Bisque | Blanchedalmond | ||||
Blueviolet | Brown | Burlywood | Cadetblue | ||||
Chartreuse | Čokolada | Coral | Cornflowerblue | ||||
Cornssilk | Crimson | Cyan | Tamnoplava | ||||
Darkcyan | Darkgoldenrod | Darkgray | Tamnozelena | ||||
Darkkhaki | Darkmagenta | Darkolivegreen | Darkorange | ||||
Darkorchid | Darkred | Darklosos | Darkseagreen | ||||
Darkslateblue | Darkslategray | Tamnotirkizno | Darkviolet | ||||
Deeppink | Deepskyblue | Dimgray | Dodgerblue | ||||
Vatrostalna cigla | Floralwhite | Forestgreen | Fuschia | ||||
Gainsboro | Ghostwhite | Zlato | Goldenrod | ||||
Grey | Greenyellow | Honeydew | Hotpink | ||||
Indianred | Indigo | Ivory | Kaki | ||||
Lavanda | Lavenderblush | Lemonchiffon | Svijetloplava | ||||
Lightcoral | Lightcyan | Lightcoldenrodyellow | Svetlozelena | ||||
Lightgray | 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 | Skyblue | Slateblue | Slategray | ||||
Snijeg | Springgreen | Steelblue | Tan | ||||
Teal | Thistle | Paradajz | Tirkizna | ||||
Violet | Pšenica | Whitesmoke | Yellowgreen |
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štenju palete, čija će svaka boja zajamčeno biti jednako prikazana od strane svih pretraživača na različitim platformama. Ovo je tzv garantovano paleta, tzv sigurno paleta. 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 |
Vlad Merzhevich
U HTML-u, boja se specificira na jedan od dva načina: korištenjem heksadecimalnog koda i imenom određenih boja. Pretežno se koristi metoda zasnovana na heksadecimalnom brojevnom sistemu, jer je najuniverzalnija.
Heksadecimalne boje
HTML koristi heksadecimalne brojeve za određivanje boja. Heksadecimalni sistem je, za razliku od decimalnog, zasnovan, 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. U tabeli 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, broj 255 u decimalnom obliku odgovara broju FF u heksadecimalu.
Da bi se izbjegla zabuna u definiranju brojevnog sistema, heksadecimalnom broju prethodi heš simbol #, na primjer #aa69cc. U ovom slučaju, velika i mala slova nisu bitna, pa je dozvoljeno pisati #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 cifre (FA) definiraju crvenu komponentu boje, treće do četvrte cifre (8E) definiraju zelenu komponentu, a posljednje dvije cifre (47) definiraju plavu komponentu. Krajnji rezultat će biti ova boja.
F.A. | + | 8E | + | 47 | = | FA8E47 |
Svaka od tri boje - crvena, zelena i plava - može imati vrijednosti od 00 do FF, što rezultira ukupno 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). Ovaj model je aditivni (od dodati - dodati), u kojem se dodatkom sve tri komponente formira bela boja.
Da biste olakšali navigaciju heksadecimalnim bojama, uzmite u obzir neka pravila.
- Ako su vrijednosti komponenti boje iste (na primjer: #D6D6D6), rezultat će biti siva nijansa. Što je broj veći, boja je svjetlija, a vrijednosti se kreću od #000000 (crna) do #FFFFFF (bijela).
- Jarko crvena boja se formira ako je crvena komponenta maksimalna (FF), a preostale komponente postavljene na nulu. Boja s vrijednošću #FF0000 je najcrvenija moguća crvena nijansa. Isto važi i za zelenu (#00FF00) i plavu (#0000FF).
- Žuta (#FFFF00) nastaje miješanjem crvene i zelene. To je jasno vidljivo na krugu boja (slika 6.1), koji predstavlja primarne boje (crvena, zelena, plava) i komplementarne ili dodatne. To uključuje žutu, cijan i ljubičastu (takođe se naziva magenta). Općenito, bilo koja boja se može dobiti miješanjem boja koje su joj bliske. Dakle, cijan (#00FFFF) se dobija kombinacijom plave i zelene.
Rice. 6.1. Kolor boja
Boje zasnovane na heksadecimalnim vrijednostima ne moraju biti empirijski odabrane. U tu svrhu je prikladan grafički uređivač koji može raditi s različitim modelima boja, na primjer, Adobe Photoshop. Na sl. Slika 6.2 prikazuje prozor za odabir 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 izbor boja u Photoshopu
Web boje
Ako postavite kvalitet prikaza boja monitora na 8-bit (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, kada pretraživač radi sa svojom paletom i ne može prikazati boju koja nije u njegovoj paleti. U ovom slučaju, boja se zamjenjuje kombinacijom piksela drugih, njoj bliskih, boja koje imitiraju datu. Kako bi se osiguralo da boja ostane ista u različitim pretraživačima, uvedena je paleta takozvanih web boja. Web boje su one boje za koje je svaka komponenta - crvena, zelena i plava - postavljena na jednu od šest vrijednosti - 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC) , 255 (FF). Heksadecimalna vrijednost ove komponente je navedena u zagradama. 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 poboljšanja kvaliteta monitora i proširenja njihovih mogućnosti.
Boje po imenu
Da biste izbjegli pamćenje skupa brojeva, umjesto toga možete koristiti nazive najčešće korištenih boja. U tabeli 6.3 prikazuje nazive popularnih naziva boja.
Naziv boje | Boja | Opis | Heksadecimalna vrijednost |
---|---|---|---|
crna | Crna | #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 | Tamno plava | #000080 | |
maslina | Maslina | #808000 | |
ljubičasta | Tamno ljubičasta | #800080 | |
crvena | Crveni | #FF0000 | |
srebro | Svijetlo siva | #C0C0C0 | |
teal | Plavo-zelena | #008080 | |
bijela | Bijelo | #FFFFFF | |
žuta | Žuta | #FFFF00 |
Nije važno da li boju navedete njenim imenom ili koristeći heksadecimalne brojeve. Ove metode su jednake po svom djelovanju. Primjer 6.1 pokazuje kako postaviti boju pozadine i teksta web stranice.
Primjer 6.1. Boja pozadine i teksta
Primjer teksta
U ovom primjeru, boja pozadine je postavljena pomoću atributa bgcolor oznake
, i boju teksta kroz atribut teksta. Radi raznolikosti, atribut teksta je postavljen na heksadecimalni broj, a atribut bgcolor je postavljen na rezerviranu ključnu riječ teal .Heksadecimalni brojevi se koriste za određivanje boja. Heksadecimalni sistem je, za razliku od decimalnog, zasnovan, 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 heksadecimalu. 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, gdje 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%) | Grey | |
siva | #808080 | rgb(128,128,128) | hsl(0,0%,50%) | Tamno siva | |
crna | #000000 ili #000 | rgb(0,0,0) | hsl(0,0%,0%) | Crna | |
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-zelena | |
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 kotaču 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 crnoj i 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 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