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 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 vam omogućava da koristite skraćeni oblik #rgb, gdje je svaki znak jednak 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 naziv | 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 | Crni | #000000 | 0 | 0 | 0 | |
| Plava | Plava | #0000FF | 0 | 0 | 255 | |
| Bondi Blue | Plaža Bondi | #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 | |
| 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 | 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 | |
| Tikva | Tikva | #FF7518 | 255 | 117 | 24 | |
| Ljubičasta | Ljubičasta | #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 | Ljubičasta | #8B00FF | 139 | 0 | 255 | |
| Žuta | Žuta | #FFFF00 | 255 | 255 | 0 | |
Kodovi boja (pozadina) prema zasićenosti i nijansama.
Heksadecimalni brojevi se koriste za određivanje boja. Heksadecimalni sistem, za razliku od decimalnog, baziran je, 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. 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 definiciji brojevnog sistema, heksadecimalnom broju prethodi heš simbol #, na primjer #666999. Svaka od tri boje - crvena, zelena i plava - može imati vrijednosti od 00 do FF. Tako je oznaka boje podijeljena na tri komponente #rrggbb, gdje prva dva znaka označavaju crvenu komponentu boje, dva srednja zelenu, a posljednja 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 po imenu. U tabeli. 1 prikazuje nazive, heksadecimalni kod, vrijednosti u RGB, HSL formatu i opis.
| Ime | Boja | Šifra | RGB | HSL | Opis |
|---|---|---|---|---|---|
| bijela | #fffff ili #ffff | 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%) | Crni | |
| 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%) | Ljubičasta |
Sa 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 prihvatljivo postaviti boju kao postotak, dok će 100% odgovarati broju 255. Prvo se specificira ključna riječ rgb, a zatim se komponente boje navedeno 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 postavlja transparentnost elementa. Vrijednost 0 je potpuno transparentna, 1 je neprozirna, a srednja vrijednost poput 0,5 je prozirna.
RGBA je dodat u CSS3, tako da valjanost CSS koda treba da se izvrši prema ovoj verziji. Treba napomenuti da je CSS3 standard još uvijek u razvoju i da se neke njegove karakteristike mogu promijeniti. Na primjer, RGB boja dodana svojstvu background-color prolazi validaciju, ali boja dodana svojstvu background-color ne prolazi. 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 formiran je od kombinacije prvih slova Hue (nijansa), Saturate (zasićenost) i Lightness (svjetlina). Nijansa je vrijednost boje na kotaču boja (slika 1) i određena je u stepenima. 0° je crvena, 120° je zelena, a 240° je plava. Vrijednost nijanse može varirati od 0 do 359.
Rice. 1. Točak boja
Zasićenost je intenzitet boje, mjeren u procentima od 0% do 100%. Vrijednost od 0% označava da nema boje i ima nijansu sive, 100% je maksimalna vrijednost zasićenja.
Svjetlost postavlja koliko je svijetla boja i specificira se kao postotak od 0% do 100%. Male vrijednosti čine boju tamnijom, dok je visoke vrijednosti čine 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 koji postavlja transparentnost elementa. Vrijednost 0 je potpuno transparentna, 1 je neprozirna, a srednja vrijednost poput 0,5 je prozirna.
Vrijednosti boja u formatima RGBA, HSL i HSLA se dodaju u CSS3, pa kada koristite ove formate, provjerite valjanost koda u odnosu na verziju.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
Upozorenje
Sve metode hvatanja lava navedene na stranici su teorijske i bazirane na računskim metodama. Autori ne jamče vašu sigurnost kada ih koristite i odriču se bilo kakve odgovornosti za rezultat. Zapamtite, lav je grabežljivac i opasna životinja!
Rezultat ovog primjera prikazan je na sl. 2.
Rice. 2. Boje na web stranici
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 poboljš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 | Crni | #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 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 .Kodovi boja u CSS-u se koriste za specifikaciju boja. Obično se kodovi boja ili vrijednosti boja koriste za postavljanje boje za prednji plan elementa (npr. tekst, boja veze) ili pozadinu elementa (pozadina, boja bloka). Mogu se koristiti i za promjenu boje gumba, ivica, markera, lebdenja i drugih dekorativnih efekata.
Možete postaviti svoje vrijednosti boja u različitim formatima. Sljedeća tabela navodi sve moguće formate:
Ovi formati su detaljnije opisani u nastavku.
CSS boje - heksadecimalni kodovi
Heksadecimalni kod boja je šestocifreni prikaz boja. Prve dvije cifre (RR) su crvena vrijednost, sljedeće dvije su zelena vrijednost (GG), a posljednje dvije su plava vrijednost (BB).
CSS boje - kratki heksadecimalni kodovi
Kratki heksadecimalni kod boja 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 heš znak "#". Slijede primjeri upotrebe heksadecimalne notacije.
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
Pomoću naše usluge možete kreirati milione kodova boja.
Sigurne boje pretraživača
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 hex koda. Oni su bezbedni za upotrebu jer obezbeđuju da će svi računari ispravno prikazati 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 |
Nažalost, još nije moguće prikazati osjećaje okusa na stranici. Ali to se može u potpunosti nadoknaditi uz pomoć boja. Uostalom, html boje vam omogućavaju da prikažete bilo koju od miliona nijansi. pa " olovke u boji” u njegovom setu je mnogo više od sedam.
shema boja u html-u
U html-u, boja se može specificirati u nekoliko formata:
1. Kao heksadecimalna vrijednost - koristi se kod specificiran u heksadecimalnom sistemu. Takvi kodovi boja u html-u se sastoje od tri para heksadecimalnih brojeva. Svaki par je odgovoran za zasićenje nijanse svojom primarnom bojom:
- Prvi numerički par je odgovoran za crvenu boju;
- Drugi par je za sadržaj zelene boje;
- Potonji je za sadržaj plave boje.
Na početku koda (ispred brojeva) stavlja se heš oznaka. Ovo je heksadecimalni kod boje. Pored brojeva od 1 do 9, ovaj brojevni sistem koristi slova latiničnog alfabeta (A, B, C, D, E, F).
Na primjer, kod bijele boje u html-u bi izgledao kao #FFFFFF:
2. Ključna riječ - Trenutno html podržava oko 147 ključnih riječi. Ali nisu sve ove riječi jedinstvene. Neki od njih se odnose na istu nijansu boje.
Sivo je predstavljeno sa dvije ključne riječi: sivo i sivo. Njihov heksadecimalni kod (HEX) je dat istom vrijednošću #808080.
primjer:
#808080
3. U RGB formatu - ovo kodiranje boja u html-u zasniva se na korištenju tri vrijednosti podešene u rasponu od 0 do 255. Svaka od njih određuje zasićenost nijanse jednom od primarnih boja:
- R - crvena (crvena);
- G - zelena (zelena);
- B - plava (plava).
Broj boje u RGB formatu piše se na sljedeći način: rgb(0, 210, 100).
background-color:rgb(100,186,43)
4. U RGBA formatu - to je napredni RGB format, gdje četvrta vrijednost specificira prozirnost boje u obliku decimalnog razlomka od 0 do 1.
Primjer upotrebe:
background-color:rgba(100,86,143,0.2)
background-color:rgba(100,86,143,0.5)
background-color:rgba(100,86,143,0.8)
background-color:rgba(100,86,143,1)
html tabele boja i generatori boja
Sa tako širokim rasponom formata za podešavanje boja, lako se možete zbuniti. Stoga je izmišljena posebna tablica boja. U njemu su na 147 ključnih naziva nijansi boja dati kodovi korespondencije u svim glavnim standardima za predstavljanje boja. Dodatno, svako polje je opremljeno trakom za vizuelno usklađivanje boja. Jedna od ovih tablica predstavljena je na web-mjestu colorscheme.ru:
Ali čak i uz pomoć takvog strukturiranja korespondencije, odabir željene nijanse može biti težak. I nije činjenica da postoji prava u tabeli kodova boja.
Kako bi zaobišli ovu barijeru i olakšali odabir prave nijanse, razvijeni su interaktivni web servisi. Njihovo korisničko sučelje se može malo razlikovati jedno od drugog.
Na stranici html-color-codes.info generator boja izgleda ovako:
A u okviru usluge color-picker.appsmaster.co, ovaj alat je implementiran malo drugačije:
Zasićenost svake boje u generatoru se postavlja pomoću posebnih klizača. Vizuelno, nijansa se prikazuje bojom okvira i pravougaonika sa leve strane. Na dnu, 3 polja prikazuju kod boja u glavnim formatima.
Ali generator boja nije dostupan samo na specijaliziranim stranicama. Gotovo svi grafički uređivači opremljeni su sličnim alatom. Na primjer, Photoshop:
Sigurnost boja
A bilo je to davno, još u eri video kartica koje podržavaju samo 256 boja. U to vrijeme, operativni sistemi su mogli prikazati samo određeni broj osmobitnih nijansi bez izobličenja.
Tada je stvorena velika tabela sigurnih boja. Naznačio je 216 nijansi koje su se mogle prikazati bez izobličenja u bilo kojem od pretraživača tog vremena. I do danas ovo odličan rukopis» još uvijek je dostupan na nekim resursima:
Sve se promijenilo u naše vrijeme. Stoga su sva sigurnosna pravila pri radu s bojom u html-u potpuno poništena. Uostalom, savremeni kompjuterski hardver podržava više od 16 miliona različitih nijansi. A 216 sigurnih boja palo je u zaborav.
