Misimbo ya rangi katika CSS hutumiwa kubainisha rangi. Kwa kawaida, misimbo ya rangi au thamani za rangi hutumiwa kuweka rangi kwa rangi ya mandhari ya mbele ya kipengele (k.m. rangi ya maandishi, rangi ya kiungo) au rangi ya mandharinyuma ya kipengele (rangi ya usuli, rangi ya zuio). Pia zinaweza kutumika kubadilisha rangi ya kitufe, mpaka, kialamisha, kielee juu na athari zingine za mapambo.
Unaweza kutaja maadili ya rangi yako katika miundo mbalimbali. Jedwali lifuatalo linaorodhesha miundo yote inayowezekana:
Miundo iliyoorodheshwa imeelezwa kwa undani zaidi hapa chini.
Rangi za CSS - Misimbo ya Hex
Msimbo wa rangi wa hexadecimal ni uwakilishi wa tarakimu sita wa rangi. Nambari mbili za kwanza (RR) zinawakilisha thamani nyekundu, mbili zinazofuata zinawakilisha thamani ya kijani (GG), na mbili za mwisho zinawakilisha thamani ya bluu (BB).
Rangi za CSS - Misimbo Fupi ya Hex
Nambari fupi ya rangi ya hex ni aina fupi ya nukuu ya herufi sita. Katika muundo huu, kila tarakimu inarudiwa ili kutoa thamani sawa ya rangi ya tarakimu sita. Kwa mfano: #0F0 inakuwa #00FF00.
Thamani ya heksadesimali inaweza kuchukuliwa kutoka kwa programu yoyote ya michoro kama vile Adobe Photoshop, Core Draw, n.k.
Kila msimbo wa rangi ya heksadesimali katika CSS utatanguliwa na ishara ya heshi "#". Ifuatayo ni mifano ya kutumia nukuu za hexadecimal.
Rangi za CSS - Maadili ya RGB
thamani ya RGB ni msimbo wa rangi ambao umewekwa kwa kutumia rgb() mali. Sifa hii inachukua thamani tatu: moja kwa nyekundu, kijani na bluu. Thamani inaweza kuwa nambari kamili, kutoka 0 hadi 255, au asilimia.
Kumbuka: Sio vivinjari vyote vinavyounga mkono mali ya rangi ya rgb(), kwa hivyo haipendekezi kuitumia.
Chini ni mfano unaoonyesha rangi nyingi kwa kutumia thamani za RGB.
Jenereta ya msimbo wa rangi
Unaweza kuunda mamilioni ya misimbo ya rangi kwa kutumia huduma yetu.
Rangi Salama za Kivinjari
Ifuatayo ni jedwali la rangi 216 ambazo ni salama zaidi na zisizotegemea kompyuta. Rangi hizi katika CSS ni kati ya 000000 hadi FFFFFF msimbo wa heksadesimali. Ni salama kutumia kwa sababu zinahakikisha kuwa kompyuta zote zinaonyesha rangi kwa usahihi wakati wa kufanya kazi na 256 palette ya rangi.
| Jedwali la rangi "salama" katika CSS | |||||
| #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 | #FFFF |
Vlad Merzhevich
Katika HTML, rangi imebainishwa katika mojawapo ya njia mbili: kutumia msimbo wa hexadecimal na kwa jina la rangi fulani. Njia kulingana na mfumo wa nambari ya hexadecimal hutumiwa sana, kwani ndiyo ya ulimwengu wote.
Rangi za hexadecimal
HTML hutumia nambari za heksadesimali kubainisha rangi. Mfumo wa hexadecimal, tofauti na mfumo wa decimal, unategemea, kama jina lake linavyopendekeza, kwenye nambari 16. Nambari zitakuwa kama ifuatavyo: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A. , B, C , D, E, F. Nambari kutoka 10 hadi 15 zinabadilishwa na barua za Kilatini. Katika meza 6.1 inaonyesha mawasiliano kati ya nambari za desimali na heksadesimali.
Nambari kubwa zaidi ya 15 katika mfumo wa hexadecimal huundwa kwa kuchanganya nambari mbili hadi moja (Jedwali 6.2). Kwa mfano, nambari 255 katika decimal inalingana na nambari FF katika hexadecimal.
Ili kuzuia mkanganyiko katika kufafanua mfumo wa nambari, nambari ya heksadesimali hutanguliwa na ishara ya hashi #, kwa mfano #aa69cc. Katika kesi hii, kesi haijalishi, hivyo inaruhusiwa kuandika #F0F0F0 au #f0f0f0.
Rangi ya kawaida inayotumiwa katika HTML inaonekana kama hii.
Hapa rangi ya mandharinyuma ya ukurasa wa wavuti imewekwa kuwa #FA8E47. Alama ya heshi # mbele ya nambari inamaanisha kuwa ni heksadesimali. Nambari mbili za kwanza (FA) zinafafanua sehemu nyekundu ya rangi, ya tatu hadi ya nne (8E) inafafanua sehemu ya kijani, na tarakimu mbili za mwisho (47) zinafafanua sehemu ya bluu. Matokeo ya mwisho yatakuwa rangi hii.
| F.A. | + | 8E | + | 47 | = | FA8E47 |
Kila moja ya rangi tatu - nyekundu, kijani na bluu - inaweza kuchukua maadili kutoka 00 hadi FF, na kusababisha jumla ya vivuli 256. Hivyo, jumla ya idadi ya rangi inaweza kuwa 256x256x256 = 16,777,216 mchanganyiko. Mfano wa rangi kulingana na vipengele nyekundu, kijani na bluu inaitwa RGB (nyekundu, kijani, bluu; nyekundu, kijani, bluu). Mfano huu ni wa kuongeza (kutoka kwa kuongeza - kuongeza), ambayo kuongeza kwa vipengele vyote vitatu huunda rangi nyeupe.
Ili kurahisisha kuvinjari rangi za hexadecimal, zingatia sheria kadhaa.
- Ikiwa maadili ya vipengele vya rangi ni sawa (kwa mfano: #D6D6D6), basi matokeo yatakuwa rangi ya kijivu. Kadiri nambari inavyokuwa juu, ndivyo rangi inavyozidi kuwa nyepesi, yenye thamani kuanzia #000000 (nyeusi) hadi #FFFFFF (nyeupe).
- Rangi nyekundu nyekundu huundwa ikiwa sehemu nyekundu inafanywa upeo (FF) na vipengele vilivyobaki vimewekwa kwa sifuri. Rangi yenye thamani ya #FF0000 ndio kivuli chekundu zaidi kinachowezekana. Vile vile ni kweli kwa kijani (#00FF00) na bluu (#0000FF).
- Njano (#FFFF00) hutengenezwa kwa kuchanganya nyekundu na kijani. Hii inaonekana wazi kwenye gurudumu la rangi (Mchoro 6.1), ambayo inatoa rangi za msingi (nyekundu, kijani, bluu) na za ziada au za ziada. Hizi ni pamoja na njano, cyan na violet (pia huitwa magenta). Kwa ujumla, rangi yoyote inaweza kupatikana kwa kuchanganya rangi karibu nayo. Kwa hivyo, cyan (#00FFFF) hupatikana kwa kuchanganya bluu na kijani.
Mchele. 6.1. Mzunguko wa rangi
Rangi kulingana na maadili ya hexadesimoli sio lazima ichaguliwe kwa nguvu. Kwa kusudi hili, mhariri wa graphic ambayo inaweza kufanya kazi na mifano tofauti ya rangi, kwa mfano, Adobe Photoshop, inafaa. Katika Mtini. Mchoro 6.2 unaonyesha dirisha la kuchagua rangi katika programu hii; thamani ya heksadesimali inayotokana ya rangi ya sasa imeainishwa na mstari. Unaweza kunakili na kuibandika kwenye msimbo wako.
Mchele. 6.2. Dirisha la kuchagua rangi katika Photoshop
Rangi za wavuti
Ukiweka ubora wa utoaji wa rangi ya kifuatiliaji kwa biti 8 (rangi 256), basi rangi sawa inaweza kuonyeshwa kwa njia tofauti katika vivinjari tofauti. Hii ni kutokana na jinsi graphics inavyoonyeshwa, wakati kivinjari kinafanya kazi na palette yake na haiwezi kuonyesha rangi ambayo haipo kwenye palette yake. Katika kesi hii, rangi inabadilishwa na mchanganyiko wa saizi za wengine, karibu nayo, rangi zinazoiga moja iliyotolewa. Ili kuhakikisha kuwa rangi inasalia sawa katika vivinjari tofauti, palette ya kinachojulikana rangi ya wavuti ilianzishwa. Rangi za wavuti ni zile rangi ambazo kila sehemu - nyekundu, kijani na bluu - imewekwa kwa moja ya maadili sita - 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC) , 255 (FF). Thamani ya hexadecimal ya sehemu hii imeonyeshwa kwenye mabano. Idadi ya jumla ya rangi kutoka kwa mchanganyiko wote unaowezekana inatoa 6x6x6 - 216 rangi. Mfano wa rangi ya wavuti ni #33FF66.
Kipengele kikuu cha rangi ya wavuti ni kwamba inaonekana sawa katika vivinjari vyote. Kwa sasa, umuhimu wa rangi za wavuti ni ndogo sana kutokana na uboreshaji wa ubora wa wachunguzi na upanuzi wa uwezo wao.
Rangi kwa jina
Ili kuepuka kukumbuka seti ya nambari, unaweza kutumia majina ya rangi zinazotumiwa sana badala yake. Katika meza 6.3 inaonyesha majina ya majina ya rangi maarufu.
| Jina la rangi | Rangi | Maelezo | Thamani ya heksadesimali |
|---|---|---|---|
| nyeusi | Nyeusi | #000000 | |
| bluu | Bluu | #0000FF | |
| fuksi | Zambarau nyepesi | #FF00FF | |
| kijivu | Kijivu giza | #808080 | |
| kijani | Kijani | #008000 | |
| chokaa | Mwanga wa kijani | #00FF00 | |
| maroon | Nyekundu iliyokolea | #800000 | |
| jeshi la majini | Bluu iliyokolea | #000080 | |
| mzeituni | Mzeituni | #808000 | |
| zambarau | Zambarau iliyokolea | #800080 | |
| nyekundu | Nyekundu | #FF0000 | |
| fedha | Kijivu nyepesi | #C0C0C0 | |
| rangi ya manjano | Bluu-kijani | #008080 | |
| nyeupe | Nyeupe | #FFFF | |
| njano | Njano | #FFFF00 |
Haijalishi ikiwa unataja rangi kwa jina lake au kwa kutumia nambari za hexadecimal. Njia hizi ni sawa katika athari zao. Mfano 6.1 unaonyesha jinsi ya kuweka usuli na rangi za maandishi ya ukurasa wa wavuti.
Mfano 6.1. Rangi ya asili na maandishi
Mfano wa maandishi
Katika mfano huu, rangi ya mandharinyuma imewekwa kwa kutumia sifa ya bgcolor ya lebo
, na rangi ya maandishi kupitia sifa ya maandishi. Kwa anuwai, sifa ya maandishi imewekwa kwa nambari ya heksadesimali, na sifa ya bgcolor imewekwa kwa neno kuu lililohifadhiwa teal .Nambari za hexadecimal hutumiwa kutaja rangi. Mfumo wa hexadecimal, tofauti na mfumo wa decimal, unategemea, kama jina lake linavyopendekeza, kwa nambari 16. Nambari zitakuwa kama ifuatavyo: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A. , B, C , D, E, F. Nambari kutoka 10 hadi 15 zinabadilishwa na barua za Kilatini. Nambari kubwa zaidi ya 15 katika mfumo wa hexadecimal huundwa kwa kuchanganya nambari mbili hadi moja. Kwa mfano, nambari 255 katika decimal inalingana na nambari FF katika hexadecimal. Ili kuepuka kuchanganyikiwa katika kuamua mfumo wa nambari, ishara ya hashi # imewekwa kabla ya nambari ya hexadecimal, kwa mfano #666999. Kila moja ya rangi tatu - nyekundu, kijani na bluu - inaweza kuchukua maadili kutoka 00 hadi FF. Kwa hivyo, alama ya rangi imegawanywa katika vipengele vitatu #rrggbb, ambapo alama mbili za kwanza zinaonyesha sehemu nyekundu ya rangi, katikati mbili - kijani, na mbili za mwisho - bluu. Inaruhusiwa kutumia fomu ya kifupi #rgb, ambapo kila herufi inapaswa kuongezwa maradufu. Kwa hivyo, kiingilio #fe0 kinapaswa kuzingatiwa kama #ffee00.
Kwa jina
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 4.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Vivinjari vinaauni baadhi ya rangi kwa majina yao. Katika meza 1 inaonyesha majina, nambari ya hexadecimal, RGB, maadili ya HSL na maelezo.
| Jina | Rangi | Kanuni | RGB | HSL | Maelezo |
|---|---|---|---|---|---|
| nyeupe | #ffffff au #ffff | rgb(255,255,255) | hsl(0.0%,100%) | Nyeupe | |
| fedha | #c0c0c0 | rgb(192,192,192) | hsl(0.0%,75%) | Kijivu | |
| kijivu | #808080 | rgb(128,128,128) | hsl(0.0%,50%) | Kijivu giza | |
| nyeusi | #000000 au #000 | rgb(0,0,0) | hsl(0.0%,0%) | Nyeusi | |
| maroon | #800000 | rgb(128,0,0) | hsl(0.100%,25%) | Nyekundu iliyokolea | |
| nyekundu | #ff0000 au #f00 | rgb(255,0,0) | hsl(0,100%,50%) | Nyekundu | |
| machungwa | #ffa500 | rgb(255,165,0) | hsl(38.8,100%,50%) | Chungwa | |
| njano | #ffff00 au #ff0 | rgb(255,255,0) | hsl(60,100%,50%) | Njano | |
| mzeituni | #808000 | rgb(128,128,0) | hsl(60,100%,25%) | Mzeituni | |
| chokaa | #00ff00 au #0f0 | rgb(0,255,0) | hsl(120,100%,50%) | Mwanga wa kijani | |
| kijani | #008000 | rgb(0,128,0) | hsl(120,100%,25%) | Kijani | |
| maji | #00ff au #0ff | rgb(0,255,255) | hsl(180,100%,50%) | Bluu | |
| bluu | #0000ff au #00f | rgb(0,0,255) | hsl(240,100%,50%) | Bluu | |
| jeshi la majini | #000080 | rgb(0,0,128) | hsl(240,100%,25%) | Bluu iliyokolea | |
| rangi ya manjano | #008080 | rgb(0,128,128) | hsl(180,100%,25%) | Bluu-kijani | |
| fuksi | #ff00ff au #f0f | rgb(255,0,255) | hsl(300,100%,50%) | Pink | |
| zambarau | #800080 | rgb(128,0,128) | hsl(300,100%,25%) | Violet |
Kwa kutumia RGB
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 5.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Unaweza kufafanua rangi kwa kutumia thamani nyekundu, kijani kibichi na samawati kwa maneno ya desimali. Kila moja ya vipengele vitatu vya rangi huchukua thamani kutoka 0 hadi 255. Pia inaruhusiwa kutaja rangi kama asilimia, na 100% inalingana na nambari 255. Kwanza, taja neno kuu la rgb, na kisha taja vipengele vya rangi kwenye mabano. , ikitenganishwa na koma, kwa mfano rgb(255 , 128, 128) au 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+ |
Umbizo la RGBA ni sawa katika sintaksia kwa RGB, lakini inajumuisha chaneli ya alpha inayobainisha uwazi wa kipengele. Thamani ya 0 ina uwazi kabisa, 1 haina uwazi, na thamani ya kati kama 0.5 ina uwazi nusu.
RGBA iliongezwa kwa CSS3, kwa hivyo msimbo wa CSS lazima uthibitishwe dhidi ya toleo hili. Ikumbukwe kwamba kiwango cha CSS3 bado kinatengenezwa na baadhi ya vipengele vinaweza kubadilika. Kwa mfano, rangi katika umbizo la RGB iliyoongezwa kwenye sifa ya rangi ya usuli imethibitishwa, lakini ile iliyoongezwa kwenye kipengele cha usuli si halali tena. Wakati huo huo, vivinjari vinaelewa kwa usahihi rangi ya mali zote mbili.
HSL
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 9.6+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
Jina la umbizo la HSL limetokana na mchanganyiko wa herufi za kwanza Hue (hue), Kueneza (kueneza) na Wepesi (wepesi). Hue ni thamani ya rangi kwenye gurudumu la rangi (Mchoro 1) na hutolewa kwa digrii. 0 ° inalingana na nyekundu, 120 ° hadi kijani, na 240 ° hadi bluu. Thamani ya hue inaweza kutofautiana kutoka 0 hadi 359.
Mchele. 1. Gurudumu la rangi
Kueneza ni ukubwa wa rangi na hupimwa kama asilimia kutoka 0% hadi 100%. Thamani ya 0% inaonyesha hakuna rangi na kivuli cha kijivu, 100% ni thamani ya juu ya kueneza.
Wepesi hubainisha jinsi rangi inavyong'aa na hubainishwa kama asilimia kutoka 0% hadi 100%. Thamani za chini hufanya rangi kuwa nyeusi, na maadili ya juu hufanya rangi kuwa nyepesi; maadili ya juu ya 0% na 100% yanahusiana na nyeusi na nyeupe.
HSLA
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
Umbizo la HSLA ni sawa katika sintaksia kwa HSL, lakini inajumuisha alfa channel ili kubainisha uwazi wa kipengele. Thamani ya 0 ina uwazi kabisa, 1 haina uwazi, na thamani ya kati kama 0.5 ina uwazi nusu.
Thamani za rangi za RGBA, HSL na HSLA huongezwa kwenye CSS3, kwa hivyo tafadhali angalia msimbo wako ili kuona uhalali wa toleo unapotumia fomati hizi.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
Onyo
Mbinu zote za kukamata simba zilizoorodheshwa kwenye tovuti ni za kinadharia na zinatokana na mbinu za kimahesabu. Waandishi hawahakikishi usalama wako unapozitumia na wanakataa kuwajibika kwa matokeo. Kumbuka, simba ni mwindaji na mnyama hatari!
Matokeo ya mfano huu yanaonyeshwa kwenye Mtini. 2.
Mchele. 2. Rangi kwenye ukurasa wa wavuti
