Vlad Merzhevich
U HTML-u, boja se specificira na jedan od dva načina: korištenjem heksadecimalnog koda i imenom nekih boja. Metoda koja se najčešće koristi je zasnovana na heksadecimalnom sistemu, kao najuniverzalnijem.
Heksadecimalne boje
HTML koristi heksadecimalne brojeve za određivanje boja. Heksadecimalni sistem je, za razliku od decimalnog, zasnovan, kao što mu ime govori, 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 definiciji brojevnog sistema, heksadecimalnom broju prethodi znak funte #, 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 je sljedeća.
Ovdje je boja pozadine web stranice postavljena na #FA8E47. Znak funte # ispred broja znači da je heksadecimalan. Prve dvije cifre (FA) definiraju crvenu komponentu boje, treća do četvrta znamenka (8E) zelenu komponentu, a posljednje dvije cifre (47) plavu komponentu. Krajnji rezultat je ova boja.
| FA | + | 8E | + | 47 | = | FA8E47 |
Svaka od tri boje - crvena, zelena i plava - može imati vrijednosti od 00 do FF, što na kraju formira 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 dodavanjem sve tri komponente nastaje bela.
Da biste olakšali navigaciju u heksadecimalnim bojama, uzmite u obzir neka pravila.
- Ako su vrijednosti komponenti boje iste (na primjer: #D6D6D6), tada će se dobiti siva nijansa. Što je broj veći, boja je svjetlija, a vrijednosti se mijenjaju od #000000 (crno) do #FFFFFF (bijelo).
- Jarko crvena boja se formira ako je crvena komponenta maksimalna (FF), a ostale 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) se dobija mešanjem crvene sa zelenom. To se jasno vidi na krugu boja (slika 6.1), koji predstavlja primarne boje (crvena, zelena, plava) i komplementarne ili komplementarne. 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 u blizini. Dakle, cijan (#00FFFF) se dobija kombinacijom plave i zelene.
Rice. 6.1. Krug u boji
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, kao što je Adobe Photoshop. Na sl. 6.2 prikazuje prozor za izbor boje u ovom programu, linija zaokružuje rezultirajuću heksadecimalnu vrijednost trenutne boje. Možete ga kopirati i zalijepiti u svoj kod.
Rice. 6.2. Birač boja u Photoshopu
Web Colors
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. Ovo ima veze sa načinom na koji se grafika prikazuje kada pretraživač radi sa sopstvenom paletom i ne može da prikaže boju koju nema u paleti. U ovom slučaju, boja se zamjenjuje kombinacijom piksela drugih, njoj bliskih, boja koje imitiraju datu. Kako bi boja ostala ista u različitim pretraživačima, uvedena je paleta takozvanih web boja. Web boje su one boje, za svaku komponentu od kojih je - crvena, zelena i plava - postavljena jedna od šest vrijednosti - 0 (00), 51 (33), 102 (66), 153 (99), 204 (KZ), 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 ista prikazuje 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
Da ne biste zapamtili kolekciju 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 | Hex 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 kako ćete odrediti boju - njenim imenom ili korištenjem heksadecimalnih brojeva. Po svom djelovanju ove metode su jednake. Primjer 6-1 pokazuje kako postaviti boju pozadine i 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 raznolikost, vrijednost atributa teksta je postavljena na heksadecimalni broj, a bgcolor je postavljena na rezerviranu ključnu riječ teal .>>Upravljanje bojama
Heksadecimalne RGB vrijednosti boja
Metode za opisivanje i obradu boja međusobno se razlikuju po tome za koji konačni prikaz su namijenjene. Uporedimo, na primjer, prikaze boja za poligrafiju i za kompjuterske monitore. U prvom slučaju, osnova je 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 proporcijama, ove tri osnovne boje daju različite nijanse boja, osim čisto crne, ili u potpunom odsustvu boja daju bijeli papir. Ako im dodamo crno, dobićemo CMYK- metoda prijenosa boja kada se tražena boja dobije oduzimanjem nedostajućih boja od bijele.
U drugom slučaju, osnova je 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 čisto crnu boju ekrana, a bilo koja od traženih boja je data odnosom svake od tri boje. U ovom slučaju ćemo dobiti RGB- Metoda prijenosa boje. Primarne boje mogu imati značenje 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 brojevni sistem, za razliku od decimalnog, nema deset cifara u nizu cifara, već šesnaest - otuda i naziv. Shodno tome, neponavljajuće varijante kombinacija dvije cifre mogu biti samo - 256 , za nastavak niza cifara nakon 9 pisma od A prije F, pa će red izgledati ovako -
| 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F. |
U ovom slučaju, boja je data sa tri heksadecimalna broja, od kojih se svaki sastoji od dvije znamenke. Prvi broj određuje intenzitet crvena boje, prosječne 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 postaviti 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: crvena, plava i zelena gradacija.
| 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 s literalima niza
Radi lakšeg korišćenja, neke boje i njihove kombinacije dobile su nazive koje prepoznaju svi pretraživači i 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 | ||||
| Alice plava | antikno bijelo | Aqua | akvamarin | ||||
| Azure | Bež | Bisque | blanchedalmond | ||||
| Blueviolet | Brown | Burlywood | Cadetblue | ||||
| chartreuse | Čokolada | Coral | Cornflowerblue | ||||
| Cornssilk | Crimson | cijan | tamno plava | ||||
| Darkcyan | darkgoldenrod | tamno siva | tamno zelena | ||||
| Darkkhaki | Darkmagenta | Darkolivegreen | darkrange | ||||
| Darkorchid | tamno crvena | tamni losos | Tamnomorska zelena | ||||
| tamno plava | tamno siva | tamnotirkizno | Darkviolet | ||||
| Deeppink | duboko nebo plavo | Dimgray | dodger blue | ||||
| Vatrogasna cigla | Cvjetno bijela | šumsko zeleno | Fuschia | ||||
| Gainsboro | ghost white | Zlato | Goldenrod | ||||
| siva | Greenyellow | Honeydew | hotpink | ||||
| Indian Red | Indigo | Ivory | Kaki | ||||
| Lavanda | Lavenderblush | Lemonchiffon | svijetlo plavo | ||||
| lagani koral | lightcyan | lightcoldenrodyellow | svijetlo zelena | ||||
| svijetlo siva | Lightpink | lagani losos | Svijetlo zelena | ||||
| Lightskyblue | Svijetlo siva | svijetlo čelično plava | svijetložuta | ||||
| kreč | Limegreen | posteljina | Magenta | ||||
| maroon | srednje akvamarin | srednje plava | Srednja orhideja | ||||
| Srednje ljubičasta | Mediumseagreen | Mediumslateblue | Mediumspringgreen | ||||
| srednje tirkizno | srednjeljubičasta crvena | ponoćno plavo | mintcream | ||||
| mistiroza | Navajowhite | mornarica | oldlace | ||||
| Maslina | Oliverab | narandžasto crvena | Orhideja | ||||
| palegoldenrod | Palegreen | paletirkizno | palevioletred | ||||
| papayawhip | Peachpuff | Peru | Pink | ||||
| Šljiva | Puder plava | Rosybrown | kraljevsko plavo | ||||
| saddlebrown | seagreen | Školjka | Sienna | ||||
| Srebro | nebo plavo | Slateblue | Slategray | ||||
| Snijeg | Springgreen | čelično plava | Tan | ||||
| Teal | Thistle | Paradajz | Tirkizna | ||||
| ljubičasta | Pšenica | Whitesmoke | žuto zeleno |
Korištenje sigurnog birača 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, mešanjem i zamenom boja samostalno. Kao rezultat toga, ponekad korisnik ne vidi baš ono što mu je webmaster želio pokazati. Izlaz iz ove situacije pronađen je u korišćenju palete, čija će svaka boja zagarantovano biti ista od strane svih pretraživača na različitim platformama. Ova tzv garantovano paleta, poznata i kao sigurno paleta. Ova paleta uključuje boje čije komponente boje poprimaju sljedeće vrijednosti: 00 ,33 ,66 ,99 , CC,FF, u svemu mogućem 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 |
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 (crna), bijela (bijela), crvena (crvena), zelena (zelena), plava (plava) itd.:
Boja teksta - crvena
Najpopularnije boje standarda World Wide Web Consortium (W3C) su:
| Boja | Ime | Boja | Ime | Boja | Ime | Boja | Ime |
|---|---|---|---|---|---|---|---|
| Crno | siva | Srebro | Bijelo | ||||
| Žuta | kreč | Aqua | Fuksija | ||||
| Crveni | Zeleno | Plava | Ljubičasta | ||||
| maroon | Maslina | mornarica | Teal |
Primjer korištenja različitih naziva boja:
Primjer: postavljanje boje prema njenom imenu
- Probajte sami"
Zaglavlje na crvenoj pozadini
Zaglavlje na narandžastoj pozadini
Zaglavlje na krečnoj pozadini
Bijeli tekst na plavoj pozadini
Zaglavlje na crvenoj pozadini
Zaglavlje na narandžastoj pozadini
Zaglavlje na krečnoj pozadini
Bijeli tekst na plavoj pozadini
Određivanje boje pomoću RGB
Kada se na monitoru prikazuju različite boje, kao osnova se uzima RGB paleta. Bilo koja boja se dobija mešanjem tri glavne: R - crveno, G - zelena (zelena), B - plava (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 ostalo je postavljeno na 0. Boju možete postaviti i kao procenat. Svaki od parametara pokazuje 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 unija dva znaka u jednu vrijednost. Na primjer, najveći broj 255 u decimalnom obliku odgovara najvećem FF u heksadecimalnom. Za razliku od decimalnog sistema, heksadecimalnom broju prethodi znak funte. # , na primjer, #FF0000 se prikazuje kao crvena jer je crvena postavljena na svoju najvišu vrijednost (FF), a druge boje su postavljene na minimalnu vrijednost (00). Znakovi nakon heš simbola # može se pisati i velikim i malim slovima. Heksadecimalni sistem dozvoljava upotrebu skraćenog oblika kao što je #rgb, gde je svaki znak ekvivalentan dvaput. Dakle, unos #f7O treba smatrati #ff7700.
Primjer: Boja HEX
- 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 najčešće korištenih boja (naziv, HEX i RGB):
| engleski naslov | Rusko ime | Uzorak | HEX | RGB | ||
|---|---|---|---|---|---|---|
| Amarant | amarant | #E52B50 | 229 | 43 | 80 | |
| Amber | Amber | #FFBF00 | 255 | 191 | 0 | |
| Aqua | plavo zeleno | #00FFFF | 0 | 255 | 255 | |
| Azure | Azure | #007FFF | 0 | 127 | 255 | |
| Crno | Crno | #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 zelena | #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 | |
| siva | Siva | #808080 | 128 | 128 | 128 | |
| Zeleno | Zeleno | #00FF00 | 0 | 255 | 0 | |
| Indigo | Indigo | #4B0082 | 75 | 0 | 130 | |
| Jade | Jade | #00A86B | 0 | 168 | 107 | |
| kreč | Lime | #CCFF00 | 204 | 255 | 0 | |
| Malahit | Malahit | #0BDA51 | 11 | 218 | 81 | |
| mornarica | Mornarsko 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 | |
| Tikva | Tikva | #FF7518 | 255 | 117 | 24 | |
| Ljubičasta | Violet | #800080 | 128 | 0 | 128 | |
| Crveni | Crveni | #FF0000 | 255 | 0 | 0 | |
| Šafran | Šafran | #F4C430 | 244 | 196 | 48 | |
| morsko zeleno | zeleno more | #2E8B57 | 46 | 139 | 87 | |
| Močvarno zeleno | Bolotny | #ACB78E | 172 | 183 | 142 | |
| Teal | plavo zeleno | #008080 | 0 | 128 | 128 | |
| Ultramarin | ultramarin | #120A8F | 18 | 10 | 143 | |
| ljubičasta | Violet | #8B00FF | 139 | 0 | 255 | |
| Žuta | Žuta | #FFFF00 | 255 | 255 | 0 | |
Kodovi boja (pozadina) prema zasićenosti i nijansama.
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 određivanje određenih boja za elemente po imenu. U ovoj tabeli, neke ključne riječi (engleski nazivi boja) korištene za postavljanje svojstava boja, RGB koda, heksadecimalnog koda (HEX) i HSL koda.
| Ime | Boja | RGB | HEX | HSL | Opis |
|---|---|---|---|---|---|
| bijela | rgb(255, 255, 255) | #fffff ili #ffff | 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%) | Mornarsko 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.
Za postavljanje svojstava u ovom formatu koristi se notacija 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, dat ću primjer 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 kako bi blokovi kreirani tagom
Zatim u kodu postavite boju pozadine bloka
Pokušajte urediti ovaj primjer kako biste uključili vlastite vrijednosti, kao što je rgb(100, 100, 100) .
Podešavanje boje pomoću RGBA
CSS3 je predstavio 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 jednaka 0 odgovara punoj transparentnosti, 1 - punoj neprozirnosti (boja će biti ista kao što je postavljena u prva tri RGB kanala), a srednje vrijednosti , kao 0,4 ili 0,6 - translucencija u različitim stepenima.
Primjer koda.
Evo kako će to raditi:
Ovaj kod je vizualno sličan sljedećem, koji koristi RGB model za postavljanje 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 i bilo je zgodno računati na prste u životu. Ako u decimalnom sistemu ima deset cifara: od 0 do 9, a broj 10 je sljedeća znamenka, tada u heksadecimalnom brojevnom sistemu ima 16 cifara, a sljedeća cifra će biti 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, sumiramo ovo u tabeli:
Za pisanje heksadecimalnih brojeva većih od F (15 decimala), kao u decimalnom sistemu, oni takođe koriste uniju dve cifre, ali već heksadecimalne, što je očigledno. Dakle, da bi se decimalni broj 255 zapisao u heksadecimalu, koristi se oznaka FF.
Heksadecimalni sistem je razumljiviji računaru, brže obrađuje vrijednosti koje daje heksadecimalna vrijednost.
Da biste naveli boju u heksadecimalnom sistemu, 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 boje sa RGB" na ovoj stranici iznad.
Fig.1. Boje u RGB. Vidimo da su boje identične.
Dozvoljena je skraćena notacija za HEX kod boje: 6-cifreni broj se može napisati kao trocifreni broj. Ovo vrijedi samo ako se dvije cifre u vrijednosti boje istog kanala ponavljaju.
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 od engleskih 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 stepenima. 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ćenosti pomiče prema 0%, boja postaje sve dosadnija i postaje siva.
Treća vrijednost - lakoća (Lightness) je također postavljena kao procenat. Što je veći procenat, to će boja biti svetlija. Ekstremne vrijednosti od 0% i 100% će ukazati na crnu (nedostatak svjetla) i bijelu (izložena) boje, i nije bitno koja je boja iz kotača boja odabrana u prvom kanalu. Optimalna vrijednost može se smatrati vrijednost svjetline boje jednaka 50%.
Podešavanje boje sa HSLA
HSLA format je povezan sa HSL-om, kao što je RGB i 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 intuitivno. Na primjer, kod hsl(120,60%,50%) može predstavljati konačnu boju ako postoji slika HSL kotača boja u memoriji. Ovo se ne može reći za RGB i HEX formate, kod boja naveden u ovim formatima postaje jasan tek nakon što se prikaže na monitoru.
Novi formati u CSS3 (HSL, HSLA i RGBA) rade u pretraživačima od verzija: IE 9.0, Opera 10.0 Firefox 3.0. Kako natjerati stilove da rade na starijim pretraživačima?
Neki blok (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 koristi alfa kanal, biće prikazana u RGB formatu.
