Värv d. Stiilide värve saab määrata erineval viisil: kuueteistkümnendsüsteemi väärtusega, nime järgi, RGB, RGBA, HSL, HSLA formaadis
HTML-is saab värvi määrata kolmel viisil:
Värvi määramine HTML-is selle nime järgi
Mõningaid värve saab määrata nende nime järgi, kasutades värvi nimetust inglise keel. Levinumad märksõnad: must, valge, punane, roheline, sinine jne:
Teksti värv – punane
World Wide Web Consortium (W3C) standardi populaarseimad värvid:
| Värv | Nimi | Värv | Nimi | Värv | Nimi | Värv | Nimi |
|---|---|---|---|---|---|---|---|
| Must | Hall | Hõbedane | Valge | ||||
| Kollane | Laim | Aqua | Fuksia | ||||
| Punane | Roheline | Sinine | Lilla | ||||
| Maroon | Oliiv | Merevägi | Sinine |
Kasutusnäide erinevaid värve s nimed:
Näide: värvi määramine selle nime järgi
- Proovi ise"
Päis punasel taustal
Päis oranžil taustal
Rubriik laimi taustal
Valge tekst sinisel taustal
Päis punasel taustal
Päis oranžil taustal
Rubriik laimi taustal
Valge tekst sinisel taustal
Värvi määramine RGB abil
Erinevate värvide kuvamisel monitoril võetakse aluseks RGB palett. Mis tahes värvi saadakse kolme põhivärvi segamisel: R - punane, G - roheline, B - sinine. Iga värvi heledust annab üks bait ja see võib seetõttu võtta väärtusi vahemikus 0 kuni 255. Näiteks RGB(255,0,0) kuvatakse punasena, kuna punane on seatud kõrgeimale väärtusele (255) ja ülejäänud väärtuseks on määratud 0. Värvi saab määrata ka protsentides. Iga parameeter näitab vastava värvi heleduse taset. Näiteks: väärtused rgb(127, 255, 127) ja rgb(50%, 100%, 50%) määravad sama keskmise rohelise värvi:
Näide: värvi määramine RGB abil
- Proovi ise"
rgb(127, 255, 127)
rgb(50%, 100%, 50%)
rgb(127, 255, 127)
rgb(50%, 100%, 50%)
Määrake värv kuueteistkümnendsüsteemi väärtuse järgi
Väärtused R G B saab määrata ka kuueteistkümnendsüsteemi (HEX) värviväärtuste abil kujul: #RRGGBB kus RR (punane), GG (roheline) ja BB (sinine) on kuueteistkümnendsüsteemi väärtused vahemikus 00 kuni FF (sama mis kümnendarvud 0-255 ) . Kuueteistkümnendsüsteem, erinevalt kümnendsüsteemist, põhineb, nagu nimigi ütleb, arvul 16. Kuueteistkümnendsüsteemis kasutatakse järgmisi märke: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Siin asendatakse numbrid 10 kuni 15 ladina tähtedega. Arvud, mis on suuremad kui 15 kuueteistkümnendsüsteemis, esitatakse kahe märgi ühendamisel üheks väärtuseks. Näiteks, suurim arv 255 kümnendsüsteemis vastab suurimale FF väärtusele kuueteistkümnendsüsteemis. Erinevalt kümnendsüsteemist eelneb kuueteistkümnendarvule räsimärk. # Näiteks #FF0000 kuvatakse punasena, kuna punane on seatud kõrgeimale väärtusele (FF) ja ülejäänud värvid on seatud minimaalne väärtus(00). Märgid pärast räsimärki # Sisestada saab nii suur- kui ka väiketähti. Kuueteistkümnendsüsteem võimaldab kasutada lühendatud vormi #rgb, kus iga märk võrdub kahekordsega. Seega tuleks kirjet #f7O käsitleda kui #ff7700.
Näide: HEX värv
- Proovi ise"
punane: #FF0000
roheline: #00FF00
sinine: #0000FF
punane: #FF0000
roheline: #00FF00
sinine: #0000FF
punane+roheline=kollane: #FFFF00
punane+sinine=lilla: #FF00FF
roheline+sinine=tsüaan: #00FFFF
Levinud värvide loend (nimi, HEX ja RGB):
| Ingliskeelne nimi | Vene nimi | Näidis | HEX | RGB | ||
|---|---|---|---|---|---|---|
| Amarant | Amarant | #E52B50 | 229 | 43 | 80 | |
| Merevaik | Merevaik | #FFBF00 | 255 | 191 | 0 | |
| Aqua | Sinine Roheline | #00FFFF | 0 | 255 | 255 | |
| Azure | Azure | #007FFF | 0 | 127 | 255 | |
| Must | Must | #000000 | 0 | 0 | 0 | |
| Sinine | Sinine | #0000FF | 0 | 0 | 255 | |
| Bondi sinine | Bondi rannavesi | #0095B6 | 0 | 149 | 182 | |
| Messing | Messing | #B5A642 | 181 | 166 | 66 | |
| Pruun | Pruun | #964B00 | 150 | 75 | 0 | |
| Cerulean | Azure | #007BA7 | 0 | 123 | 167 | |
| Tume kevadroheline | Tume kevadroheline | #177245 | 23 | 114 | 69 | |
| Smaragd | Smaragd | #50C878 | 80 | 200 | 120 | |
| Baklažaan | Baklažaan | #990066 | 153 | 0 | 102 | |
| Fuksia | Fuksia | #FF00FF | 255 | 0 | 255 | |
| Kuldne | Kuldne | #FFD700 | 250 | 215 | 0 | |
| Hall | Hall | #808080 | 128 | 128 | 128 | |
| Roheline | Roheline | #00FF00 | 0 | 255 | 0 | |
| Indigo | Indigo | #4B0082 | 75 | 0 | 130 | |
| Jade | Jade | #00A86B | 0 | 168 | 107 | |
| Laim | Laim | #CCFF00 | 204 | 255 | 0 | |
| Malahhiit | Malahhiit | # 0BDA51 | 11 | 218 | 81 | |
| Merevägi | Tumesinine | #000080 | 0 | 0 | 128 | |
| ooker | ooker | #CC7722 | 204 | 119 | 34 | |
| Oliiv | Oliiv | #808000 | 128 | 128 | 0 | |
| Oranž | Oranž | #FFA500 | 255 | 165 | 0 | |
| Virsik | Virsik | #FFE5B4 | 255 | 229 | 180 | |
| Kõrvits | Kõrvits | #FF7518 | 255 | 117 | 24 | |
| Lilla | violetne | #800080 | 128 | 0 | 128 | |
| Punane | Punane | #FF0000 | 255 | 0 | 0 | |
| Safran | Safran | #F4C430 | 244 | 196 | 48 | |
| Mereroheline | Roheline meri | #2E8B57 | 46 | 139 | 87 | |
| Rabaroheline | Bolotny | #ACB78E | 172 | 183 | 142 | |
| Sinine | Sinine Roheline | #008080 | 0 | 128 | 128 | |
| Ultramariin | Ultramariin | #120A8F | 18 | 10 | 143 | |
| violetne | violetne | #8B00FF | 139 | 0 | 255 | |
| Kollane | Kollane | #FFFF00 | 255 | 255 | 0 | |
Värvikoodid (taust) küllastuse ja tooni järgi.
Värvide määramiseks kasutatakse CSS-i värvikoode. Tavaliselt kasutatakse värvikoode või värviväärtusi elemendi esiplaani värvi (nt teksti värv, lingi värv) või elemendi taustavärvi (taustavärv, ploki värv) värvi määramiseks. Neid saab kasutada ka nupu, äärise, markeri, hõljutuse ja muude dekoratiivsete efektide värvi muutmiseks.
Saate määrata oma värviväärtused erinevates vormingutes. Järgmises tabelis on loetletud kõik võimalikud vormingud:
Loetletud vorminguid kirjeldatakse üksikasjalikumalt allpool.
CSS-värvid – kuueteistkümnendkoodid
Kuueteistkümnendsüsteemi värvikood on värvi kuuekohaline esitus. Kaks esimest numbrit (RR) tähistavad punast väärtust, järgmised kaks numbrit roheline väärtus(GG) ja viimased on sinine väärtus (BB).
CSS-värvid – lühikesed kuueteistkümnendkoodid
Lühike hex värvikood on kuuekohalise märgistuse lühem vorm. Selles vormingus korratakse iga numbrit samaväärse kuuekohalise värviväärtuse saamiseks. Näiteks: #0F0 muutub #00FF00.
Kuueteistkümnendsüsteemi väärtuse saab võtta mis tahes graafikult tarkvara, nagu näiteks Adobe Photoshop, Core Draw jne.
Igale CSS-i kuueteistkümnendsüsteemi värvikoodile eelneb räsimärk "#". Allpool on näited kuueteistkümnendsüsteemi tähistuste kasutamisest.
CSS-värvid – RGB väärtused
RGB väärtus on värvikood, mis määratakse atribuudi rgb() abil. Sellel atribuudil on kolm väärtust: üks punase, rohelise ja sinise jaoks. Väärtus võib olla täisarv vahemikus 0 kuni 255 või protsent.
Märge: Kõik brauserid ei toeta värviomadust rgb(), seega pole soovitatav seda kasutada.
Allpool on näide, mis näitab mitut värvi, kasutades RGB väärtusi.
Värvikoodi generaator
Meie teenuse abil saate luua miljoneid värvikoode.
Brauseri turvalised värvid
Allpool on tabel 216 värviga, mis on kõige turvalisemad ja arvutist sõltumatumad. Need CSS-i värvid on vahemikus 000 000 kuni FFFFFF kuueteistkümnendkoodini. Neid on ohutu kasutada, kuna need tagavad, et 256 värvipaletiga töötades kuvavad kõik arvutid värve õigesti.
| "Ohutud" värvide tabel CSS-is | |||||
| #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 |
Vlad Merževitš
HTML-is määratakse värv kahel viisil: kuueteistkümnendkoodi abil ja teatud värvide nimede järgi. Valdavalt kasutatakse kuueteistkümnendsüsteemil põhinevat meetodit, kuna see on kõige universaalsem.
Kuueteistkümnendsüsteemi värvid
HTML kasutab värvide määramiseks kuueteistkümnendsüsteemi numbreid. Kuueteistkümnendsüsteem, erinevalt kümnendsüsteemist, põhineb, nagu nimigi ütleb, arvul 16. Arvud on järgmised: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. Numbrid 10 kuni 15 asendatakse ladina tähtedega. Tabelis 6.1 näitab kümnend- ja kuueteistkümnendarvude vastavust.
Arvud, mis on suuremad kui 15 kuueteistkümnendsüsteemis, saadakse kahe arvu üheks liitmisel (tabel 6.2). Näiteks kümnendsüsteemis olev arv 255 vastab kuueteistkümnendsüsteemis arvule FF.
Et vältida segadust numbrisüsteemi määratlemisel, eelneb kuueteistkümnendarvule räsimärk #, näiteks #aa69cc. Sellisel juhul ei oma suurtäht tähtsust, seega on lubatud kirjutada #F0F0F0 või #f0f0f0.
Tüüpiline HTML-is kasutatav värv näeb välja selline.
Siin on veebilehe taustavärviks seatud #FA8E47. Räsimärk # numbri ees tähendab, et see on kuueteistkümnendsüsteem. Esimesed kaks numbrit (FA) määravad värvi punase komponendi, kolmas kuni neljas number (8E) määravad rohelise komponendi ja kaks viimast numbrit (47) määravad sinise komponendi. Lõpptulemus on selline värv.
| F.A. | + | 8E | + | 47 | = | FA8E47 |
Kõik kolm värvi – punane, roheline ja sinine – võivad võtta väärtusi vahemikus 00 kuni FF, mille tulemuseks on kokku 256 tooni. Seega võib värvide koguarv olla 256x256x256 = 16 777 216 kombinatsiooni. Punasel, rohelisel ja sinisel komponentidel põhinevat värvimudelit nimetatakse RGB-ks (punane, roheline, sinine; punane, roheline, sinine). See mudel on aditiivne (alates add - add), milles kõigi kolme komponendi lisamine moodustab valge värvi.
Kuueteistkümnendsüsteemi värvides navigeerimise hõlbustamiseks võtke arvesse mõningaid reegleid.
- Kui värvikomponentide väärtused on samad (näiteks: #D6D6D6), on tulemuseks hall toon. Kuidas suurem arv, seda heledam on värv, väärtused vahemikus #000000 (must) kuni #FFFFFF (valge).
- Helepunane värv moodustub, kui punane komponent muudetakse maksimaalseks (FF) ja ülejäänud komponendid nullitakse. Värv väärtusega #FF0000 on punaseim võimalik punane toon. Olukord on sarnane roheline(#00FF00) ja sinine (#0000FF).
- Kollane(#FFFF00) saadakse punase ja rohelise segamisel. See on selgelt näha värvirattal (joonis 6.1), mis esitab põhivärvid (punane, roheline, sinine) ja täiendavad või täiendavad värvid. Nende hulka kuuluvad kollane, tsüaan ja violetne (nimetatakse ka magentaks). Üldiselt saab mis tahes värvi saada, kui segada sellele lähedasi värve. Seega saadakse tsüaan (#00FFFF) sinise ja rohelise kombineerimisel.
Riis. 6.1. Värviring
Kuueteistkümnendsüsteemi väärtustel põhinevaid värve ei pea empiiriliselt valima. Selleks sobib graafiline redaktor, mis suudab töötada erinevate värvimudelitega, näiteks Adobe Photoshop. Joonisel fig. Joonis 6.2 näitab selles programmis värvi valimise akent, mille tulemuseks oleva praeguse värvi kuueteistkümnendsüsteemi väärtus on joonega välja toodud. Saate selle oma koodi kopeerida ja kleepida.
Riis. 6.2. Aken värvide valimiseks Photoshopis
Veebi värvid
Kui seate monitori värviedastuskvaliteediks 8 bitti (256 värvi), saab sama värvi kuvada erinevad brauserid omal moel. See on tingitud graafika kuvamisviisist, kui brauser töötab oma paletiga ega suuda kuvada värve, mida paletis pole. Sel juhul asendatakse värv muude, sellele lähedaste värvide pikslite kombinatsiooniga, mis imiteerivad antud värvi. Tagamaks, et värv jääks erinevates brauserites samaks, võeti kasutusele nn veebivärvide palett. Veebivärvid on need värvid, mille iga komponent - punane, roheline ja sinine - on seatud ühele kuuest väärtusest - 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC) , 255 (FF). Selle komponendi kuueteistkümnendväärtus on näidatud sulgudes. Kokku värvid kõigist võimalikest kombinatsioonidest annab 6x6x6 - 216 värvi. Veebivärvi näide on #33FF66.
Veebivärvi peamine omadus on see, et see kuvatakse kõigis brauserites ühesugusena. IN Sel hetkel Veebivärvide asjakohasus on monitoride kvaliteedi paranemise ja nende võimaluste laienemise tõttu väga väike.
Värvid nime järgi
Et vältida numbrite komplekti meeldejätmist, võite selle asemel kasutada sageli kasutatavate värvide nimesid. Tabelis 6.3 näitab populaarsete värvinimede nimesid.
| Värvi nimi | Värv | Kirjeldus | Kuueteistkümnendväärtus |
|---|---|---|---|
| must | Must | #000000 | |
| sinine | Sinine | #0000FF | |
| fuksia | Helelilla | #FF00FF | |
| hall | Tumehall | #808080 | |
| roheline | Roheline | #008000 | |
| lubi | Heleroheline | #00FF00 | |
| kastanipunane | Tumepunane | #800000 | |
| merevägi | Tumesinine | #000080 | |
| oliiv | Oliiv | #808000 | |
| lilla | Tumelilla | #800080 | |
| punane | Punane | #FF0000 | |
| hõbedane | Helehall | #C0C0C0 | |
| sinine | Sinine Roheline | #008080 | |
| valge | Valge | #FFFFFF | |
| kollane | Kollane | #FFFF00 |
Pole tähtis, kas määrate värvi selle nime või kuueteistkümnendsüsteemi numbrite abil. Need meetodid on oma mõju poolest võrdsed. Näide 6.1 näitab, kuidas määrata veebilehe tausta- ja tekstivärve.
Näide 6.1. Tausta ja teksti värv
Näidistekst
Selles näites määratakse taustavärv märgendi atribuudi bgcolor abil
ja teksti värvi atribuudi teksti kaudu. Variatsiooni jaoks on tekstiatribuudiks seatud kuueteistkümnendsüsteem ja atribuudiks bgcolor seatakse reserveeritud märksõna teal . 28.11.14 11,1 tuhatKahjuks ei saa kodulehel veel maitseelamusi kuvada. Kuid seda saab täielikult kompenseerida värvivalik. Lõppude lõpuks võimaldavad html-värvid kuvada mis tahes miljonitest toonidest. nii" värvilised pliiatsid Tema komplektis on palju rohkem kui seitse.
Värviskeem html-vormingus
html-is saab värvi määrata mitmes vormingus:
1. Kuueteistkümnendväärtusena – kasutatakse kuueteistkümnendsüsteemis määratud koodi. Sellised värvikoodid html-is koosnevad kolmest kuueteistkümnendsüsteemi numbrite paarist. Iga paar vastutab varju küllastumise eest oma põhivärviga:
- Esimene numbripaar vastutab punase värvi eest;
- Teine paar on rohelise värvi sisu jaoks;
- Viimane on sinise sisu tõttu.
Koodi algusesse (enne numbreid) asetatakse räsimärk. Seda tähistab kuueteistkümnend värvikood. Lisaks numbritele 1 kuni 9 kasutab see numbrisüsteem tähti Ladina tähestik(A, B, C, D, E, F).
Näiteks html-i valge värvikood näeb välja nagu #FFFFFF:
2. Märksõna – HTML toetab praegu umbes 147 märksõna. Kuid mitte kõik need sõnad pole ainulaadsed. Mõned neist viitavad samale värvitoonile.
Halli värvi tähistab kaks märksõna: hall ja hall . Nende kuueteistkümnendkoodi (HEX) annab sama väärtus #808080.
Näide:
#808080
3. RGB-vormingus – see html-i värvikodeering põhineb kolme väärtuse kasutamisel, mis on seatud vahemikus 0 kuni 255. Igaüks neist määrab tooni küllastuse ühe põhivärviga:
- R – punane (punane);
- G – roheline (roheline);
- B – sinine (sinine).
Värvinumber RGB-vormingus kirjutatakse järgmisel kujul: rgb(0, 210, 100).
background-color:rgb(100,186,43)
4. RGBA-vormingus - see on täiustatud RGB-vorming, kus neljas väärtus määrab vormis värvide läbipaistvuse kümnend 0 kuni 1.
Kasutusnäide:
background-color:rgba(100;86;143;0.2)
taustavärv:rgba(100,86,143,0,5)
taustavärv:rgba(100,86,143,0,8)
taustavärv:rgba(100,86,143,1)
HTML-värvitabelid ja värvigeneraatorid
Nii suure valiku värviseadete vormingute puhul on lihtne segadusse sattuda. Seetõttu leiutati spetsiaalne värvitabel. See pakub 147 värvitoonide põhinimetust koos kõigi peamiste värvistandardite vastavuskoodidega. Lisaks on iga väli varustatud ribaga visuaalseks värvivalikuks. Üks neist tabelitest on esitatud veebisaidil colorcheme.ru:
Kuid isegi sellise sobitamise struktureerimise korral võib õige tooni valimine olla keeruline. Ja pole tõsi, et värvikoodide tabel sisaldab seda, mida vajate.
Et sellest takistusest mööda hiilida ja õige varjundi valimine võimalikult lihtsaks teha, on välja töötatud interaktiivsed veebiteenused. Nende kasutajaliides võib üksteisest veidi erineda.
Veebisaidil html-color-codes.info näeb värvigeneraator välja järgmine:
Ja teenuse color-picker.appsmaster.co raames rakendatakse seda tööriista veidi erinevalt:
Generaatori iga värvi küllastus määratakse spetsiaalsete liugurite abil. Visuaalselt kuvatakse varju raami ja ristküliku värviga vasakul küljel. Allosas kuvatakse 3 väljal põhivormingus värvikoodi.
Kuid värvigeneraator pole saadaval mitte ainult spetsialiseeritud saitidel. Peaaegu kõik graafilised redaktorid on varustatud sarnase tööriistaga. Näiteks Photoshop:
Ohutusmeetmed värviga töötamisel
Ja see oli kaua aega tagasi, vaid 256 värvi toetavate videokaartide ajastul. Neil kaugetel aegadel OS suudab kuvada ainult teatud arvu kaheksabitiseid toone ilma moonutusteta.
Seejärel töötati välja suurepärane ohutute värvide tabel. See määras 216 tooni, mida sai kuvada ilma moonutusteta üheski tolleaegses brauseris. Ja tänaseni see" suurepärane käsikiri» on mõnes allikas endiselt saadaval:
Tänapäeval on kõik muutunud. Seetõttu tühistatakse kõik HTML-i värviga töötamise ohutuseeskirjad täielikult. Moodne arvutiriistvara toetab ju enam kui 16 miljonit erinevat tooni. Ja 216 turvalist värvi on unustusehõlma vajunud.
Värvide määramiseks kasutatakse kuueteistkümnendarvu. Kuueteistkümnendsüsteem, erinevalt kümnendsüsteemist, põhineb, nagu nimigi ütleb, arvul 16. Arvud on järgmised: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. Numbrid 10 kuni 15 asendatakse ladina tähtedega. Arvud, mis on suuremad kui 15 kuueteistkümnendsüsteemis, saadakse kahe arvu ühendamisel üheks. Näiteks kümnendsüsteemis olev arv 255 vastab kuueteistkümnendsüsteemis arvule FF. Et vältida segadust numbrisüsteemi määramisel, asetatakse kuueteistkümnendsüsteemi ette räsimärk #, näiteks #666999. Kõik kolm värvi - punane, roheline ja sinine - võivad võtta väärtusi vahemikus 00 kuni FF. Seega on värvisümbol jagatud kolmeks komponendiks #rrggbb, kus kaks esimest sümbolit tähistavad värvi punast komponenti, kaks keskmist - rohelist ja kaks viimast - sinist. Lubatud on kasutada lühendatud vormi #rgb, kus iga märk tuleb kahekordistada. Seega tuleks kirjet #fe0 käsitleda kui #ffee00.
Nimepidi
| Internet Explorer | Chrome | Ooper | Safari | Firefox | Android | iOS |
| 4.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Brauserid toetavad mõnda värvi nende nime järgi. Tabelis 1 näitab nimesid, kuueteistkümnendkoodi, RGB, HSL väärtusi ja kirjeldust.
| Nimi | Värv | Kood | RGB | HSL | Kirjeldus |
|---|---|---|---|---|---|
| valge | #ffffff või #ffff | rgb(255 255 255) | hsl (0,0%, 100%) | Valge | |
| hõbedane | #c0c0c0 | rgb(192 192 192) | hsl (0,0%, 75%) | Hall | |
| hall | #808080 | rgb(128 128 128) | hsl (0,0%, 50%) | Tumehall | |
| must | #000000 või #000 | rgb(0,0,0) | hsl(0,0%,0%) | Must | |
| kastanipunane | #800000 | rgb(128,0,0) | hsl (0,100%, 25%) | Tumepunane | |
| punane | #ff0000 või #f00 | rgb(255,0,0) | hsl(0,100%,50%) | Punane | |
| oranž | #ffa500 | rgb(255 165, 0) | hsl(38,8 100%, 50%) | Oranž | |
| kollane | #ffff00 või #ff0 | rgb(255 255, 0) | hsl (60 100%, 50%) | Kollane | |
| oliiv | #808000 | rgb(128 128, 0) | hsl (60 100%, 25%) | Oliiv | |
| lubi | #00ff00 või #0f0 | rgb(0,255,0) | hsl (120 100%, 50%) | Heleroheline | |
| roheline | #008000 | rgb(0,128,0) | hsl (120 100%, 25%) | Roheline | |
| aqua | #00ffff või #0ffff | rgb(0 255 255) | hsl (180 100%, 50%) | Sinine | |
| sinine | #0000ff või #00f | rgb(0,0,255) | hsl (240 100%, 50%) | Sinine | |
| merevägi | #000080 | rgb(0,0,128) | hsl (240 100%, 25%) | Tumesinine | |
| sinine | #008080 | rgb(0,128,128) | hsl (180 100%, 25%) | Sinine Roheline | |
| fuksia | #ff00ff või #f0f | rgb(255;0;255) | hsl(300,100%,50%) | Roosa | |
| lilla | #800080 | rgb(128;0;128) | hsl(300,100%,25%) | violetne |
RGB kasutamine
| Internet Explorer | Chrome | Ooper | Safari | Firefox | Android | iOS |
| 5.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Saate määrata värvi punase, rohelise ja sinise kümnendkoha väärtuste abil. Iga kolme värvikomponendi väärtus on vahemikus 0 kuni 255. Lubatud on ka värvi määramine protsentides, kusjuures 100% vastab arvule 255. Esmalt määrake rgb märksõna ja seejärel sulgudes värvikomponendid. , eraldades komadega, näiteks rgb(255 , 128, 128) või rgb(100%, 50%, 50%).
RGBA
| Internet Explorer | Chrome | Ooper | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
RGBA-vorming on süntaksilt sarnane RGB-ga, kuid sisaldab alfakanalit, mis määrab elemendi läbipaistvuse. Väärtus 0 on täielikult läbipaistev, 1 on läbipaistmatu ja vahepealne väärtus, näiteks 0,5, on poolläbipaistev.
RGBA lisati CSS3-le, seega tuleb CSS-kood selle versiooni suhtes valideerida. Tuleb märkida, et CSS3 standard on alles väljatöötamisel ja mõned funktsioonid võivad muutuda. Näiteks taustavärvi atribuudile lisatud RGB-vormingus värv valideeritakse, kuid tausta atribuudile lisatud värv ei kehti enam. Samal ajal saavad brauserid mõlema atribuudi värvist üsna õigesti aru.
HSL
| Internet Explorer | Chrome | Ooper | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 9.6+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
HSL-vormingu nimi on tuletatud esimeste tähtede kombinatsioonist Hue (toon), Saturate (küllastus) ja Lightness (heledus). Toon on värviväärtus värvirattal (joonis 1) ja see on antud kraadides. 0° vastab punasele, 120° rohelisele ja 240° sinisele. Tooni väärtus võib varieeruda vahemikus 0 kuni 359.
Riis. 1. Värviratas
Küllastus on värvi intensiivsus ja seda mõõdetakse protsendina vahemikus 0% kuni 100%. Väärtus 0% näitab värvi puudumist ja halli varjundit, 100% on küllastuse maksimaalne väärtus.
Heledus määrab, kui hele on värv ja määratakse protsendina vahemikus 0% kuni 100%. Madalad väärtused muudavad värvi tumedamaks ja suured väärtused heledamaks; äärmuslikud väärtused 0% ja 100% vastavad mustvalgele.
HSLA
| Internet Explorer | Chrome | Ooper | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
HSLA-vorming on süntaksilt sarnane HSL-iga, kuid sisaldab alfakanalit, mis määrab elemendi läbipaistvuse. Väärtus 0 on täielikult läbipaistev, 1 on läbipaistmatu ja vahepealne väärtus, näiteks 0,5, on poolläbipaistev.
RGBA, HSL ja HSLA värviväärtused lisatakse CSS3-le, seega kontrollige nende vormingute kasutamisel oma koodi versiooni kehtivust.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
Hoiatus
Kõik saidil loetletud lõvide püüdmise meetodid on teoreetilised ja põhinevad arvutusmeetoditel. Autorid ei taga teie ohutust nende kasutamisel ega võta vastutust tulemuste eest. Pidage meeles, et lõvi on kiskja ja ohtlik loom!
Tulemus see näide näidatud joonisel fig. 2.
Riis. 2. Värvid veebilehel