Tule värv rgb. Stiilide värve saab määrata erineval viisil: kuueteistkümnendväärtuse järgi, nime järgi, RGB, RGBA, HSL, HSLA formaadis
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. Kuidas rohkem numbrit, seda heledam on värv, muutudes #000000 (must) asemel #FFFFFF (valge).
- 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. Sarnane on lugu ka rohelises(#00FF00) ja sinine (#0000FF).
- Kollane(#FFFF00) saadakse punase ja rohelise segamisel. See on selgelt näha värviratas(joonis 6.1), mis esitab põhivärvid (punane, roheline, sinine) ja täiendavad või täiendavad. 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. Kokku värvid 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.
| 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 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.
| 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
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!
Selle näite tulemus on näidatud joonisel fig. 2.
Riis. 2. Värvid veebilehel
Värvide määramiseks kasutatakse CSS-i värvikoode. Tavaliselt värvikoodid või värvi väärtused kasutatakse elemendi esiplaani värvi (näiteks teksti, linkide värv) või elemendi tausta (tausta, ploki värv) määramiseks. 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 graafikult tarkvara, 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 |
Minecrafti koodid värvid või Minecraft koodid vormindamist, lubage igal mängijal lisada lilli ja vormindada teksti igal võimalikul viisil otse Minecraftis. Värvikoodid vahemikus &0-9 kuni &a-f. Lisage need teksti ette. Mängijate sõnumid võivad sisaldada värvikoode, mis võimaldavad teil oma lausetele värvi lisada.
Värvid ja vorminduskoodid
Sõnumites olev ampersand (&), millele järgneb kuueteistkümnendsüsteem, annab kliendile märku teksti kuvamisel värve vahetada. Teise võimalusena saab teksti vormindada, kasutades märki &, millele järgneb täht. Saate lisada raamatutele erinevaid värve, käsuplokid, serveri nimi, serveri kirjeldus (motd), maailmade nimed, märgid ja isegi mängijate nimed.
Alloleva värvitabeli abil on väga lihtne oma teksti vormindada konfiguratsioonides või mängus. &r kasutatakse kõigi koodide kustutamiseks, st. &mAAA&rBBB kuvatakse kui AAA BBB.
Teie mugavuse huvides esitame Minecraftis olemasolevate värvikoodide tabeli:
| Kood | Nimi | Tehniline nimetus | Sümboli värv | Sümboli varju värv | ||||||
|---|---|---|---|---|---|---|---|---|---|---|
| R | G | B | hex | R | G | B | hex | |||
| &0 | Must | must | 0 | 0 | 0 | 000000 | 0 | 0 | 0 | 000000 |
| &1 | Tumesinine | tumesinine | 0 | 0 | 170 | 0000AA | 0 | 0 | 42 | 00002A |
| &2 | tumeroheline | tumeroheline | 0 | 170 | 0 | 00AA00 | 0 | 42 | 0 | 002A00 |
| &3 | Tumesinine-roheline | tume_aqua | 0 | 170 | 170 | 00AAAA | 0 | 42 | 42 | 002A2A |
| &4 | Tumepunane | tume_punane | 170 | 0 | 0 | AA0000 | 42 | 0 | 0 | 2A0000 |
| &5 | Tume violetne | tumelilla | 170 | 0 | 170 | AA00AA | 42 | 0 | 42 | 2A002A |
| &6 | Kuldne | kullast | 255 | 170 | 0 | FFAA00 | 42 | 42 | 0 | 2A2A00 |
| &7 | Hall | hall | 170 | 170 | 170 | AAAAAA | 42 | 42 | 42 | 2A2A2A |
| &8 | Tumehall | tumehall | 85 | 85 | 85 | 555555 | 21 | 21 | 21 | 151515 |
| &9 | Sinine | sinine | 85 | 85 | 255 | 5555FF | 21 | 21 | 63 | 15153F |
| &a | Roheline | roheline | 85 | 255 | 85 | 55FF55 | 21 | 63 | 21 | 153F15 |
| &b | sinine Roheline | aqua | 85 | 255 | 255 | 55FFFF | 21 | 63 | 63 | 153F3F |
| jne | Punane | punane | 255 | 85 | 85 | FF5555 | 63 | 21 | 21 | 3F1515 |
| &d | Helelilla | helelilla | 255 | 85 | 255 | FF55FF | 63 | 21 | 63 | 3F153F |
| &e | Kollane | kollane | 255 | 255 | 85 | FFFF55 | 63 | 63 | 21 | 3F3F15 |
| &f | Valge | valge | 255 | 255 | 255 | FFFFFF | 63 | 63 | 63 | 3F3F3F |
Mõnikord on see vajalik joon alla, joon alla, esile mingi tekst. Selleks kasutatakse teksti vormindamist. Seda kasutatakse samamoodi nagu värve (enne teksti, mille me paneme kood, näiteks &lMinecraft= Minecraft.
Teie mugavuse huvides on allpool vormindamise koodide tabel:
| Kood | Nimi |
|---|---|
| &k | maagiline tekst |
| &l | Pisipilt |
| &m | Läbikriipsutatud tekst |
| &n | Allajoonitud tekst |
| &o | Kaldkiri |
| &r | Tekst ilma vormindamiseta |
