Vlad Merževitš
HTML-is määratakse värv kahel viisil: kuueteistkümnendkoodi abil ja mõne värvi nime järgi. Kõige sagedamini kasutatav meetod põhineb kuueteistkümnendsüsteemil kui kõige universaalsemal.
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 definitsioonis, eelneb kuueteistkümnendarvule naelmä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 on järgmine.
Siin on veebilehe taustavärviks seatud #FA8E47. Naelamärk # numbri ees tähendab, et see on kuueteistkümnendsüsteemis. Esimesed kaks numbrit (FA) määravad värvi punase komponendi, kolmas kuni neljas number (8E) rohelise komponendi ja kaks viimast numbrit (47) sinise komponendi. Lõpptulemus on selline värv.
FA | + | 8E | + | 47 | = | FA8E47 |
Kõik kolm värvi - punane, roheline ja sinine - võivad võtta väärtusi vahemikus 00 kuni FF, mis lõpuks moodustab 256 tooni. Seega võib värvide koguarv olla 256x256x256 = 16 777 216 kombinatsiooni. Punasel, rohelisel ja sinisel komponendil 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.
Kuueteistkümnendsüsteemi värvides navigeerimise hõlbustamiseks võtke arvesse mõningaid reegleid.
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. 6.2 näitab selles programmis värvi valimise akent, joon teeb ringi jooksva värvi tulemuseks oleva kuueteistkümnendsüsteemi väärtusega. Saate selle oma koodi kopeerida ja kleepida.
Riis. 6.2. Värvivalija Photoshopis
Kui määrata monitori värvikvaliteediks 8 bitti (256 värvi), siis saab sama värvi erinevates brauserites erinevalt kuvada. See on seotud sellega, kuidas graafikat renderdatakse, kui brauser töötab oma paletiga ega suuda näidata värve, mida paletis pole. Sel juhul asendatakse värv muude, sellele lähedaste värvide pikslite kombinatsiooniga, mis imiteerivad antud värvi. Et värv erinevates brauserites samaks jääks, võeti kasutusele nn veebivärvide palett. Veebivärvid on sellised värvid, mille iga komponendi - punane, roheline ja sinine - jaoks on määratud üks kuuest väärtusest - 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC), 255 (FF). Selle komponendi kuueteistkümnendväärtus on näidatud sulgudes. Värvide koguarv kõigist võimalikest kombinatsioonidest annab 6x6x6 - 216 värvi. Veebivärvi näide on #33FF66.
Veebivärvide peamine omadus on see, et seda kuvatakse kõigis brauserites samamoodi. Hetkel on veebivärvide asjakohasus monitoride kvaliteedi paranemise ja nende võimaluste laienemise tõttu väga väike.
Et numbrite kogumit mitte meelde jätta, võite selle asemel kasutada sagedamini kasutatavate värvide nimetusi. 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 | Tume violetne | #800080 | |
punane | Punane | #FF0000 | |
hõbedane | helehall | #C0C0C0 | |
sinine | sinine Roheline | #008080 | |
valge | Valge | #FFFFFF | |
kollane | Kollane | #FFFF00 |
Pole tähtis, kuidas värvi määrate – selle nime või kuueteistkümnendsüsteemi numbrite abil. Oma toimelt on need meetodid 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 text kaudu. Variatsiooni jaoks on tekstiatribuudi väärtuseks seatud kuueteistkümnendsüsteem ja bgcolor seatakse reserveeritud märksõnale teal .Värvide määramiseks kasutatakse CSS-i värvikoode. Tavaliselt kasutatakse värvikoode või värviväärtusi, et määrata värvi elemendi esiplaanile (nt tekst, lingi värv) või elemendi taustale (taust, ploki värv). Neid saab kasutada ka nuppude värvi, ääriste, markeri, hõljumise ja muude dekoratiivsete efektide muutmiseks.
Saate määrata oma värviväärtusi erinevates vormingutes. Järgmises tabelis on loetletud kõik võimalikud vormingud:
Neid vorminguid kirjeldatakse üksikasjalikumalt allpool.
Kuueteistkümnendsüsteemi värvikood on kuuekohaline värviesitus. Esimesed kaks numbrit (RR) on punane väärtus, kaks järgmist on roheline väärtus (GG) ja kaks viimast on sinine väärtus (BB).
Lühike kuueteistkümnendsüsteemi 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 graafikatarkvarast, nagu Adobe Photoshop, Core Draw jne.
Igale CSS-i kuueteistkümnendsüsteemi värvikoodile eelneb räsimärk #. Järgnevalt on toodud näited kuueteistkümnendsüsteemi kasutamise kohta.
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 seda soovitatav kasutada.
Allpool on näide, mis näitab mitut värvi, kasutades RGB väärtusi.
Meie teenusega saate luua miljoneid värvikoode.
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 kõik arvutid kuvavad 256 värvipaletiga töötamisel 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 |
Nagu teate, võib värv mõjutada inimese seisundit: nii vaimset kui ka füüsilist. Iga päev internetis sirvides hindavad silmad miljoneid värve ja toone. Veebidisainer, kes on kursis värvide psühholoogiaga, suudab kontrollida külastaja meeleolu, et saavutada mis tahes eesmärke.
See on tingitud asjaolust, et mõned toonid rahustavad ja mõned, vastupidi, erutavad. Järgmisena räägime sellest, kuidas arvutitehnoloogia abil värve sünteesitakse ja kuvatakse.
RGB on värvimudel, mis esindab meetodit kõigi värvide ja nende varjundite saamiseks, segades erinevates vahekordades kolme põhikomponenti, milleks on:
Siit pärineb ka lühendatud nimi RGB. Need värvid on valitud peamisteks põhjustel: põhjuseks on inimese silma võrkkesta füsioloogia ja see, kuidas ta neid tajub:
Nagu varem mainitud, saadakse RGB värvid põhivärvide segamisel. Kõigi nende intensiivsuse kirjeldamiseks võeti vastu skeem, milles värvi esindab vahemik 0–255 (8 bitti), mis vastab kuueteistkümnendsüsteemis 00-FF-le.
See tähendab, et põhivärvid näevad välja järgmised:
Kui värvi intensiivsus on alla 255, saadakse erinevad punase, rohelise ja sinise toonid. Järgmine on nende gradatsiooni tabel, samuti iga varjundi kuueteistkümnendsüsteemi väärtused:
Loomulikult on lisaks põhivärvide gradatsioonidele ka segatud värve ja nende arv on üsna suur. Seetõttu loodi RGB värvide tabel, milles on esitatud kõik olemasolevad toonid, samuti nende nimed ja numbrilised esitused ( kümnend- ja kuueteistkümnendsüsteemis).
Siin saate temaga tuttavaks saada. See tabel lihtsustab oluliselt veebidisainerite elu, kuna mõne sekundiga leiate soovitud tooni ja saate teada selle numbrilise esituse.
Mingil hetkel tekkis aga probleem värvide kuvamisega erinevates brauserites ning selle lahendamiseks koostati nn "turvaline" RGB värvide palett, mis tuletati matemaatiliste arvutustega.
Kui brauser ei suuda värvi õigesti kuvada, proovib ta naabervärve segades jõuda sellele, mida ta vajab, ja tõenäoliselt on tulemus täiesti vastuvõetamatu:
Kasutades selle paleti RGB-värvikoode, võib veebiarendaja olla oma saidi lehtedel värvide kuvamisel erinevate brauserite, platvormide ja monitoridega vaadates rahulik. Kuigi hetkel on ohutute värvide tabel oma tähtsust kaotamas ( tehnoloogiline areng ei seisa paigal), saate seda kasutades, nagu öeldakse, rahulikult magada.
Esimest korda kasutati sõna "kuld" XIV sajandi alguses, et kirjeldada keemilise elemendi nimega Aurum - kuld - värvi. RGB mudelis tähistatakse kulla värvi järgmiste arvväärtustega:
Beežil on ajaloos üsna märkimisväärne koht, isegi kui see pole just kõige ilmekam. Paljud kultuurimälestised, eriti antiikskulptuurid, valmistati steatiidist ja voolukivist, mis on beeži varjundiga. RGB mudelis on beežil järgmised numbrilised esitused.
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 definitsioonis, eelneb kuueteistkümnendarvule 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 jaguneb värvi tähistus kolmeks komponendiks #rrggbb, kus esimesed kaks märki tähistavad värvi punast komponenti, kaks keskmist tähistavad rohelist ja kaks viimast tähistavad sinist. Lubatud on kasutada lühendatud vormi #rgb, kus iga märk tuleb kahekordistada. Seega tuleks kirjet #fe0 käsitleda kui #ffee00.
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 nime järgi. Tabelis. 1 näitab nimesid, kuueteistkümnendkoodi, väärtusi RGB-s, HSL-vormingus ja kirjeldust.
Nimi | Värv | Kood | RGB | HSL | Kirjeldus |
---|---|---|---|---|---|
valge | #fffff 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 |
Internet Explorer | Chrome | Ooper | safari | Firefox | Android | iOS |
5.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Värvi saab määrata punase, rohelise ja sinise kümnendkoha väärtuste abil. Iga kolme värvikomponendi väärtus on vahemikus 0 kuni 255. Samuti on lubatud määrata värv protsendina, samas kui 100% vastab arvule 255. Esiteks määratakse rgb-märksõna ja seejärel määratakse värvikomponendid. määratud sulgudes, eraldatuna komadega, näiteks rgb(255 , 128, 128) või rgb(100%, 50%, 50%).
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 on lisatud CSS3-le, seega tuleks CSS-koodi valideerimine läbi viia vastavalt sellele versioonile. Tuleb märkida, et CSS3 standard on alles väljatöötamisel ja mõned selle funktsioonid võivad muutuda. Näiteks taustavärvi atribuudile lisatud RGB-värv läbib valideerimise, kuid tausta atribuudile lisatud värv mitte. Samal ajal saavad brauserid mõlema atribuudi värvist üsna õigesti aru.
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 moodustatud esimeste tähtede kombinatsioonist Hue (toon), Saturate (küllastus) ja Lightness (heledus). Toon on värviväärtus värvirattal (joonis 1) ja see on määratud kraadides. 0° on punane, 120° on roheline ja 240° on sinine. Tooni väärtus võib varieeruda vahemikus 0 kuni 359.
Riis. 1. Värviratas
Küllastus on värvi intensiivsus, mõõdetuna protsentides 0% kuni 100%. Väärtus 0% näitab värvi puudumist ja halli varjundit, 100% on maksimaalne küllastusväärtus.
Heledus määrab, kui hele on värv ja see määratakse protsendina vahemikus 0% kuni 100%. Väikesed väärtused muudavad värvi tumedamaks, suured väärtused heledamaks, äärmuslikud väärtused 0% ja 100% vastavad mustvalgele.
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-vormingus värviväärtused lisatakse CSS3-le, nii et nende vormingute kasutamisel kontrollige koodi kehtivust versiooni suhtes.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
Kõik saidil loetletud meetodid lõvi püüdmiseks on teoreetilised ja põhinevad arvutusmeetoditel. Autorid ei garanteeri teie ohutust nende kasutamisel ega võta vastutusest tulemuse eest. Pidage meeles, et lõvi on kiskja ja ohtlik loom!
Selle näite tulemus on näidatud joonisel fig. 2.
Riis. 2. Värvid veebilehel
CSS-i värvi saab määrata mitmel viisil:
Brauserid toetavad elementide teatud värvide määramist nime järgi. Selles tabelis on mõned märksõnad (ingliskeelsed värvinimed), mida kasutatakse värviomaduste, RGB-koodi, Hex-koodi (HEX) ja HSL-koodi määramiseks.
Nimi | Värv | RGB | HEX | HSL | Kirjeldus |
---|---|---|---|---|---|
valge | rgb(255, 255, 255) | #fffff või #ffff | hsl(0, 0%, 100%) | Valge | |
hõbedane | rgb(192, 192, 192) | #c0c0c0 | hsl(0, 0%, 75%) | Hall | |
hall | rgb(128, 128, 128) | #808080 | hsl(0, 0%, 50%) | Tumehall | |
must | rgb(0, 0, 0) | #000000 või #000 | hsl(0, 0%, 0%) | Must | |
kastanipunane | rgb(128, 0, 0) | #800000 | hsl(0, 100%, 25%) | Tumepunane | |
punane | rgb(255, 0, 0) | #ff0000 või #f00 | hsl(0, 100%, 50%) | Punane | |
oranž | rgb(255, 165, 0) | #ffa500 | hsl(38,8, 100%, 50%) | Oranž | |
kollane | rgb(255, 255, 0) | #ffff00 või #ff0 | hsl(60, 100%, 50%) | Kollane | |
oliiv | rgb(128, 128, 0) | #808000 | hsl(60, 100%, 25%) | Oliiv | |
lubi | rgb(0, 255, 0) | #00ff00 või #0f0 | hsl(120, 100%, 50%) | heleroheline | |
roheline | rgb(0, 128, 0) | #008000 | hsl(120, 100%, 25%) | Roheline | |
aqua | rgb(0, 255, 255) | #00ffff või #0ffff | hsl(180, 100%, 50%) | Sinine | |
sinine | rgb(0, 0, 255) | #0000ff või #00f | hsl(240, 100%, 50%) | Sinine | |
merevägi | rgb(0,0,128) | #000080 | hsl(240, 100%, 25%) | Tumesinine | |
sinine | rgb(0, 128, 128) | #008080 | hsl(180, 100%, 25%) | sinine Roheline | |
fuksia | rgb(255, 0, 255) | #ff00ff või #f0f | hsl(300, 100%, 50%) | Roosa | |
lilla | rgb(128, 0, 128) | #800080 | hsl(300, 100%, 25%) | violetne |
See on näide värvinimede kasutamisest, värvinimed on võetud laiendatud tabelist.
See kood töötab järgmiselt.
RGB on liitvärvimudel. Inglise keeles lisamine- lisamine. RGB on ingliskeelsete sõnade lühend: Red, Green, Blue – punane, roheline, sinine). Sellest on selge, et RGB mudelis sünteesitakse värve kolme värvi (punane, roheline, sinine) lisamisega erinevates kogustes.
Punast, rohelist ja sinist värvi segades saate mitu miljonit tooni. Kõik võimalikud kombinatsioonid salvestatakse arvutite mällu.
Tulge asja juurde.
Selle vormingu omaduste määramiseks kasutatakse tähistust rgb(r, g, b), kus r, g, b on iga värvi (punane, roheline, sinine) kolm kanalit. Iga kanali väärtused on seatud vahemikus 0 kuni 255.
Koodi näide.
Et kõik oleks selge, annan näite koodi:
See näide peaks toimima järgmiselt:
Joonis 1. Värvid RGB-s.Selgitused näiteks.
Lehe alguses loome klassi div.rgb, seda on vaja, et sildi tekitatud plokid
Järgmisena määrake koodis ploki taustavärv
Proovige seda näidet redigeerida, et lisada oma väärtused, näiteks rgb(100, 100, 100) .
CSS3 tutvustas värviga töötamiseks uut tööriista - RGBA-vormingut. Seda võib nimetada RGB-mudeli evolutsiooniks, kuid ühe uue kanali - A- või alfakanali - lisamisega. See kanal määrab värvi läbipaistvuse. Selle väärtused on seatud vahemikus 0 kuni 1. Väärtus 0 vastab täielikule läbipaistvusele, 1 - täielikule läbipaistvusele (värv on sama, mis on seatud kolmes esimeses RGB kanalis) ja vahepealsed väärtused , näiteks 0,4 või 0,6 – läbipaistvus erineval määral.
Koodi näide.
See toimib järgmiselt.
See kood on visuaalselt sarnane järgmisega, mis kasutab värviväärtuse määramiseks RGB-mudelit:
Siin on tema tulemus:
Nulliga võrdne alfakanali väärtus muudab mis tahes värvi nähtamatuks – täiesti läbipaistvaks, ühega võrdne väärtus tõlgib värvi RGB-koodis ilma muudatusteta. Atribuut rgba(255,0,0,1.0) näitab punast värvi rgb(255, 0, 0) .
Igapäevaelus kasutame loendamise kümnendsüsteemi. Selle päritolu on väga lihtne – meil on kätel kümme sõrme ja elus oli mugav sõrmedel lugeda. Kui kümnendsüsteemis on kümme numbrit: 0 kuni 9 ja number 10 on järgmine number, siis kuueteistkümnendsüsteemis on 16 numbrit ja järgmine number on 16.
Värvikoodide tähistamiseks kasutatakse kuueteistkümnendnumbritena tavalisi kümnendkohti vahemikus 0 kuni 9 ja ladina tähti vahemikus A kuni F kasutatakse numbrite tähistamiseks vahemikus 10 kuni 15, st (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F). Selguse huvides võtame selle kokku tabelis:
F-st (15 kümnendkoha) suuremate kuueteistkümnendarvude kirjutamiseks, nagu kümnendsüsteemis, kasutavad nad ka kahe numbri ühendust, kuid juba kuueteistkümnendsüsteemi, mis on ilmne. Niisiis, kümnendarvu 255 kirjutamiseks kuueteistkümnendsüsteemis kasutatakse tähistust FF.
Kuueteistkümnendsüsteem on arvutile arusaadavam, see töötleb kiiremini kuueteistkümnendsüsteemiga antud väärtusi.
Kuueteistkümnendsüsteemis värvi määramiseks lisage numbrilise väärtuse ette märk "#", näiteks: #FFC0CB . #FFC0CB väärtus ise koosneb kolmest kuueteistkümnendnumbrist FF, C0 ja CB. Selle kirje tähendus on sama, mis värvi määramisel RGB-vormingus (rgb(r, g, b) ) – iga kuueteistkümnendnumber HEX-koodis näitab värviküllastust selle RGB-mudelikanalis.
See kood kuvab järgmised elemendid:
Ja siin on pilt selle lehe ülaltoodud jaotisest "Värvi määramine RGB abil" tulemusega.
Joonis 1. Värvid RGB-s.Näeme, et värvid on identsed.
Lubatud on HEX-värvikoodi lühendatud märge: 6-kohalise numbri saab kirjutada 3-kohalise numbrina. See kehtib ainult siis, kui sama kanali värviväärtuse kaks numbrit korduvad.
See tähendab, et vastuvõetav on järgmine lühend:
Näiteks värvi #ff22aa saab kirjutada kui #f2a või värvi #44aa22 saab kirjutada kui #4a2 .
CSS3-l on värvide määramiseks uus formaat.
HSL-vorming on lühend ingliskeelsetest sõnadest: Hue (hue), Saturate (küllastus) ja Lightness (lightness).
Toon HSL-is on värviväärtus spetsiaalsel värvirattal (joonis 2) ja see on määratud kraadides. Kui tuua analoogiaid RGB mudeliga, siis 0° vastab punasele, 120° rohelisele ja 240° sinisele.
Tooni väärtus muutub vahemikus 0 kuni 359.
Teine väärtus - küllastus (Saturate) määratakse protsendina. 100% küllastuse juures on värv võimalikult "mahlane", kuna küllastuse indikaator liigub 0% suunas, värv muutub aina tuhmimaks ja rullub halliks.
Kolmas väärtus - kergus (Lightness) määratakse samuti protsendina. Mida suurem protsent, seda heledam on värv. Äärmuslikud väärtused 0% ja 100% näitavad vastavalt musta (valguse puudumine) ja valget (säritatud) värve ning pole vahet, milline värv värvirattast valiti esimeses kanalis. Optimaalseks väärtuseks võib pidada värvi heleduse väärtust, mis on võrdne 50%.
HSLA-vorming on seotud HSL-iga, nagu ka RGB ja RGBA. HSLA-vormingus ja ka RGBA-s on lisatud alfakanal, mis vastutab värvide läbipaistvuse eest.
HSL-vormingus määratud värvi on kergem lugeda. Võime öelda, et see on intuitiivne. Näiteks kood hsl(120,60%,50%) võib tähistada lõplikku värvi, kui mälus on pilt HSL-värvirattast. RGB- ja HEX-vormingute kohta seda öelda ei saa, nendes vormingutes määratud värvikood saab selgeks alles pärast selle kuvaril renderdamist.
Uued CSS3-vormingud (HSL, HSLA ja RGBA) töötavad brauserites alates versioonidest: IE 9.0, Opera 10.0 Firefox 3.0. Kuidas panna stiilid vanemates brauserites tööle?
Someblock ( taustavärv: rgb(255,50,50); taustavärv: rgba(255,50,50,0,85) )
Kui kasutate seda koodi vanemates brauserites, kuvatakse klassi .somebloсk taustavärv, kuigi alfakanalit ei kasutata, RGB-vormingus.