Roheline värv RGB-s. Stiilide värve saab määrata erineval viisil: kuueteistkümnendväärtuse järgi, nime järgi, RGB, RGBA, HSL, HSLA formaadis

20.10.2019 Küttekehad

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.

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 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.

  • Kui värvikomponentide väärtused on samad (näiteks: #D6D6D6), saadakse hall toon. Mida suurem arv, seda heledam on värv ja väärtused muutuvad #000000-st (must) #FFFFFF-iks (valgeks).
  • Erkpunane värv tekib siis, kui punane komponent on seatud maksimaalseks (FF) ja ülejäänud komponendid on seatud nulli. Värv väärtusega #FF0000 on punaseim võimalik punase varjund. Sama kehtib ka rohelise (#00FF00) ja sinise (#0000FF) puhul.
  • 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, segades sellega külgnevaid värve. Niisiis, tsüaan (#00FFFF) saadakse 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. 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

Veebivärvid

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.

Värvid nime järgi

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.

Tab. 6.3. Mõnede värvide nimed
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

Värvid

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.

CSS-värvid – kuueteistkümnendkoodid

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).

CSS-värvid – lühikesed kuueteistkümnendkoodid

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.

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 seda soovitatav kasutada.

Allpool on näide, mis näitab mitut värvi, kasutades RGB väärtusi.

Värvikoodi generaator

Meie teenusega saate luua miljoneid värvikoode.

Turvalise brauseri 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 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
26.02.15 8,9K

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:

  • Punane värv ( Punane);
  • roheline värv ( Roheline);
  • Sinine värv ( Sinine).

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:


RGB-mudel on tänapäeval endiselt kõige populaarsem ja seda kasutatakse värvide taasesitamiseks teleriekraanidel ja arvutimonitoridel. Kuna tootjad varustavad oma tooteid erinevate omadustega, loodi 1996. aastal ühtne RGB-põhine värvisünteesisüsteem sRGB, mille kallal Microsoft ja HP ​​koos töötasid.

Numbriline värviesitus

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:

  • Punane - RGB (255.0.0);
  • Roheline - RGB (0,255,0);
  • Sinine - RGB (0,0,255);

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:

RGB värvikaardid

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.

Ohutu RGB värvipalett

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.

Kuldne värv RGB mudelis

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:

  • RGB (255, 215, 0) - kümnendsüsteem;
  • HEX #FFD700 - kuueteistkümnendsüsteem.

Beež värv RGB mudelis

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.

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 nime järgi. Tabelis. 1 näitab nimesid, kuueteistkümnendkoodi, väärtusi RGB-s, HSL-vormingus ja kirjeldust.

Tab. 1. Värvinimetused
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

RGB-ga

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%).

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 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.

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 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.

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-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

Värvid

Hoiatus

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!

Arrrgh!

Selle näite tulemus on näidatud joonisel fig. 2.

Riis. 2. Värvid veebilehel

CSS-i värvi saab määrata mitmel viisil:

  • nimepidi,
  • kuueteistkümnendväärtuse järgi,
  • RGB- ja RGBA-vormingus,
  • HSL- ja HSLA-vormingus.

Määrake värv nime järgi

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.

Tab. 1. Värvide nimetused, nende RGB, HEX ja HSL kood.
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.

RGB-st CSS-i

Keskmine türkiissinine
pruun
karmiinpunane
sinililla
rolleledrab

See kood töötab järgmiselt.

Värvi seadistamine RGB abil

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:

RGB-st CSS-i

rgb(255, 0, 0)
rgb(0, 255, 0)
rgb(0, 0, 255)

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

kuvatakse õiges suuruses: 240 x 40 pikslit . Määrame atribuudile line-height (rea kõrgus) väärtuse - 40px, st võrdub ploki kõrgusega, see võimaldab teksti plokis kuvada
vertikaali keskel. horisontaalselt keskele tekst, kasutades reeglit ( teksti joondamine : keskel ;).

Järgmisena määrake koodis ploki taustavärv

stiiliatribuudi kasutamine taustaomaduste abil ja väärtuste määramine rgb(255, 0, 0) , rgb(0, 255, 0) ja rgb(0, 0, 255) . See tähendab, et vaheldumisi muudame ühe kanali võimalikult küllastunud ja ülejäänud kanaleid ei kasutata sünteesiks, kuna nende väärtus on null.

Proovige seda näidet redigeerida, et lisada oma väärtused, näiteks rgb(100, 100, 100) .

Värvi määramine RGBA abil

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.

RGBA kuni CSS3

See toimib järgmiselt.

See kood on visuaalselt sarnane järgmisega, mis kasutab värviväärtuse määramiseks RGB-mudelit:

RGBA kuni CSS3

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) .

Kuueteistkümnendsüsteemi väärtuse järgi (HEX-kood)

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.

HEX-kood CSS-is

#FF0000
#00FF00
#0000FF

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 .

Värvi seadistamine HSL-iga

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.


Joonis 2. HSL värviratas.

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%.

Värviseade HSLA-ga

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.