Angalia kwa uangalifu mchoro. Mandharinyuma ya kidirisha kunjuzi yanafanywa kuwa nyepesi. Hii ni mbinu ya kawaida ya kubuni. Wacha tufikirie jinsi hii inaweza kutekelezwa.
Kazi
Fanya kivinjari cha rangi kiwe na uwazi.
Suluhisho
Wazo la kwanza katika hali hii ni kutumia picha ya png24 iliyo na uwazi uliowekwa tayari kwa mandharinyuma. Lakini picha hii sio lazima kabisa. Unaweza kufanya vizuri bila hiyo (na kwa hivyo bila ombi la ziada kwa seva). Wacha tujaribu kutafuta suluhisho bora.
Wazo la pili ni kutumia. Lakini katika kwa kesi hii hii si rahisi sana. Baada ya yote, basi sio msingi tu, lakini pia maandishi yatakuwa wazi. Ndiyo, kwa kweli, dirisha zima mara moja.
Bila shaka, unaweza kujaribu kuongeza chombo cha ziada na kuomba opacity tu, lakini kipengele hiki cha HTML kitakusudiwa tu kwa ajili ya mapambo na bila shaka kitakuwa kisichohitajika. Je, inawezekana kufanya bila hiyo?
Bila shaka unaweza! Ikiwa unatumia RGBA.
Umbizo la maelezo ya rangi ya RGBA
CSS3 hukuruhusu kubainisha rangi kwa kutumia vitendaji vya RGB na RGBA. Katika kesi hii, lazima tuonyeshe uwiano wa kila sehemu ya rangi ambayo byte moja imetengwa (kutoka 0 hadi 255, ikiwa mtu yeyote hajui).
Syntax ya kesi hii ni rahisi sana:
Mandharinyuma: rgb(0, 255, 0); /* kijani safi */
Kwa RGBA, parameter ya nne imeongezwa - uwazi wa alpha (kutoka 0 hadi 1).
Mandharinyuma: rgba(255, 0, 0, 0.5); /* nyekundu safi na uwazi 50% */
Hapa ndio, suluhisho la shida yetu. Weka tu rangi ya mandharinyuma na kwa kutumia rgba na kila kitu kitaonekana kama tunavyohitaji. Bila picha za ziada na vipengele!
Ninaweza kupata wapi nambari hizi?
Unaweza kuangalia vipengele vya rangi kwa kutumia zana ya eyedropper ya Photoshop.
Kuhusu uoanifu wa kivinjari
Kwa kuwa kitendakazi cha RGB ni cha zamani zaidi kuliko RGBA na kimekuwepo tangu siku za kiwango cha CSS2, ili kulinda dhidi ya vivinjari vya zamani zaidi, unaweza kutumia muundo ufuatao wa rudufu:
SomeBlock ( usuli: rgb(255, 0, 0); usuli: rgba(255, 0, 0, 0.5);)
Kwa njia hii, babu-babu wa vivinjari vya kisasa hawatakuwa na uwazi, lakini rangi yenyewe itabaki kuwa sahihi.
Utalazimika kutunza IE kando. Punda hawaelewi RGBA hadi toleo la 8 likijumlishwa.
Kama kawaida: ardhi kwa ajili ya wakulima, viwanda vya wafanyakazi, na punda mkongojo! Kama .
Kwa kweli, katika hali ya mapigano tunatumia sheria hii tofauti CSS ambayo tunaunganisha.
SomeBlock ( background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ff0000,endColorstr=#80ff0000); zoom: 1; )
Ujanja ni kubainisha rangi za kuanzia na za mwisho kuwa sawa (ff0000 - nyekundu) na kuchukua fursa ya ukweli kwamba unaweza kuweka chaneli ya alfa ya gradient kwenye kichujio hiki (kwa mfano, thamani ni 80).
Kwa kumbukumbu: kichujio kinatumia mfumo wa hexadecimal na msimbo wa rangi isiyo wazi kabisa ni FF (katika desimali hii ni 255). Ipasavyo, heksadesimali 80 ni desimali 128, yaani 50% ya uwazi.
Ilijaribiwa katika:
- IE 6-9
- Firefox 3+
- Opera 10+
- Safari 4
- Chrome
Weka rangi ndani Lugha ya CSS inaweza kuweka njia tofauti:
- kwa jina,
- kwa thamani ya heksadesimali,
- katika muundo wa RGB na RGBA,
- katika miundo ya HSL na HSLA.
Weka rangi kwa jina
Vivinjari vinaauni kubainisha baadhi ya rangi kwa vipengele kwa majina. Jedwali hili lina baadhi ya maneno muhimu (majina ya rangi ya Kiingereza) yanayotumika kubainisha sifa za rangi, msimbo wa RGB, msimbo wa hexadecimal (HEX) na msimbo wa HSL.
| Jina | Rangi | RGB | HEX | HSL | Maelezo |
|---|---|---|---|---|---|
| nyeupe | rgb(255, 255, 255) | #ffffff au #ffff | hsl(0, 0%, 100%) | Nyeupe | |
| fedha | rgb(192, 192, 192) | #c0c0c0 | hsl(0, 0%, 75%) | Kijivu | |
| kijivu | rgb(128, 128, 128) | #808080 | hsl(0, 0%, 50%) | Kijivu giza | |
| nyeusi | rgb(0, 0, 0) | #000000 au #000 | hsl(0, 0%, 0%) | Nyeusi | |
| maroon | rgb(128, 0, 0) | #800000 | hsl(0, 100%, 25%) | Nyekundu iliyokolea | |
| nyekundu | rgb(255, 0, 0) | #ff0000 au #f00 | hsl(0, 100%, 50%) | Nyekundu | |
| machungwa | rgb(255, 165, 0) | #ffa500 | hsl(38.8, 100%, 50%) | Chungwa | |
| njano | rgb(255, 255, 0) | #ffff00 au #ff0 | hsl(60, 100%, 50%) | Njano | |
| mzeituni | rgb(128, 128, 0) | #808000 | hsl(60, 100%, 25%) | Mzeituni | |
| chokaa | rgb(0, 255, 0) | #00ff00 au #0f0 | hsl(120, 100%, 50%) | Mwanga wa kijani | |
| kijani | rgb(0, 128, 0) | #008000 | hsl(120, 100%, 25%) | Kijani | |
| maji | rgb(0, 255, 255) | #00ff au #0ff | hsl(180, 100%, 50%) | Bluu | |
| bluu | rgb(0, 0, 255) | #0000ff au #00f | hsl(240, 100%, 50%) | Bluu | |
| jeshi la majini | rgb(0,0,128) | #000080 | hsl(240, 100%, 25%) | Bluu iliyokolea | |
| rangi ya manjano | rgb(0, 128, 128) | #008080 | hsl(180, 100%, 25%) | Bluu-kijani | |
| fuksi | rgb(255, 0, 255) | #ff00ff au #f0f | hsl(300, 100%, 50%) | Pink | |
| zambarau | rgb(128, 0, 128) | #800080 | hsl(300, 100%, 25%) | Violet |
Huu ni mfano wa matumizi ya majina ya rangi, majina ya rangi yanachukuliwa kutoka kwa meza iliyopanuliwa.
Hivi ndivyo nambari hii inavyofanya kazi:
Kuweka rangi kwa kutumia RGB
RGB ni mfano wa rangi ya ziada. Washa Lugha ya Kiingereza nyongeza- nyongeza. RGB ni kifupi cha maneno ya Kiingereza: Nyekundu, Kijani, Bluu - nyekundu, kijani, bluu). Kutoka kwa hili ni wazi kwamba katika rangi ya mfano wa RGB huunganishwa na kuongeza tatu rangi (nyekundu, kijani, bluu) kwa idadi tofauti.
Kuchanganya nyekundu, kijani na rangi ya bluu unaweza kupata vivuli milioni kadhaa. Mchanganyiko wote unaowezekana huhifadhiwa kwenye kumbukumbu ya kompyuta.
Fika kwenye uhakika.
Kuweka sifa katika umbizo hili, tumia nukuu rgb(r, g, b) , ambapo r, g, b ni chaneli tatu kwa kila rangi (nyekundu, kijani kibichi, bluu). Thamani za kila chaneli zimewekwa katika safu kutoka 0 hadi 255.
Msimbo wa mfano.
Ili kuweka kila kitu wazi, hapa kuna mfano wa nambari:
Hivi ndivyo mfano huu unapaswa kufanya kazi:
Mtini.1. Rangi katika RGB. Maelezo kwa mfano.
Mwanzoni mwa ukurasa tunaunda darasa la div.rgb, inahitajika kwa vitalu vilivyoundwa na lebo
Ifuatayo, katika msimbo tulioweka rangi ya mandharinyuma kuzuia
Jaribu kuhariri mfano huu na kubainisha maadili yako mwenyewe, kwa mfano rgb(100, 100, 100) .
Kuweka rangi kwa kutumia RGBA
Ilionekana katika CSS3 chombo kipya kwa kufanya kazi na rangi - Muundo wa RGBA. Inaweza kuitwa mageuzi ya mfano wa RGB, lakini kwa kuongeza chaneli moja mpya - kituo cha A au alpha. Kituo hiki kinaweka uwazi wa rangi. Thamani zake zimewekwa katika safu kutoka 0 hadi 1. Thamani ya 0 inalingana na uwazi kamili, 1 - uwazi kamili (rangi itakuwa sawa na ilivyowekwa katika kwanza. njia tatu RGB), na maadili ya kati kama 0.4 au 0.6 - uwazi kwa digrii tofauti.
Msimbo wa mfano.
Hivi ndivyo itakavyofanya kazi:
Kanuni hii kwa njia yake mwenyewe uwakilishi wa kuona ni sawa na ifuatayo, kwa kutumia mfano wa RGB kuweka thamani ya rangi:
Hapa kuna matokeo yake:
Thamani ya kituo cha alfa sawa na sifuri hufanya rangi yoyote isionekane - uwazi kabisa; thamani sawa na moja hutafsiri rangi katika msimbo wa RGB bila mabadiliko. Sifa ya rgba(255,0,0,1.0) inaonyesha rangi nyekundu rgb(255, 0, 0) .
Kwa thamani ya heksadesimali (msimbo wa HEX)
Katika maisha ya kila siku, tunatumia mfumo wa kuhesabu desimali. Asili yake ni rahisi sana - tuna vidole kumi mikononi mwetu, na kuhesabu vidole vyetu imekuwa rahisi katika maisha. Ikiwa ndani mfumo wa desimali nambari kumi: kutoka 0 hadi 9, na nambari 10 ni nambari inayofuata, basi mfumo wa nambari ya hexadecimal una nambari 16, na nambari inayofuata itakuwa nambari 16.
Ili kubainisha misimbo ya rangi kama tarakimu za heksadesimali, tumia kawaida tarakimu za desimali kutoka 0 hadi 9 na kuashiria nambari kutoka 10 hadi 15 tumia herufi za Kilatini kutoka A hadi F, ambayo ni (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D , E, F). Kwa uwazi, hebu tuweke hii kwenye jedwali:
Kuandika nambari za hexadecimal kubwa kuliko F (15 katika mfumo wa decimal), kama katika mfumo wa decimal, pia hutumia mchanganyiko wa nambari mbili, lakini tayari hexadecimal, ambayo ni dhahiri. Ndiyo, kwa rekodi nambari ya desimali 255 V mfumo wa hexadecimal Nukuu ya FF inatumika.
Mfumo wa hexadecimal unaeleweka zaidi kwa kompyuta, na huchakata maadili yaliyowekwa na thamani ya hexadesimoli haraka.
Ili kutaja rangi katika hexadecimal, kabla thamani ya nambari unahitaji kuweka ishara "#", kwa mfano: #FFC0CB. Thamani #FFC0CB yenyewe ina tarakimu tatu za heksadesimali FF, C0 na CB. Maana ya ingizo hili ni sawa na kuweka rangi ndani Muundo wa RGB(rgb (r, g, b)) - kila tarakimu ya hexadecimal katika msimbo wa HEX inaonyesha kueneza rangi katika njia yake ya mfano wa RGB.
Nambari hii itaonyesha vitu vifuatavyo:
Na hapa kuna picha iliyo na matokeo kutoka kwa sehemu "Kuweka rangi na kwa kutumia RGB"kwenye ukurasa huu hapo juu.
Mtini.1. Rangi katika RGB. Tunaona kwamba rangi ni sawa.
Nukuu fupi ya nambari ya rangi ya HEX inaruhusiwa: nambari ya nambari 6 inaweza kuandikwa kama nambari ya nambari 3. Hii ni halali tu wakati tarakimu mbili katika thamani ya rangi ya kituo kimoja zinarudiwa.
Hiyo ni, kifupi kifuatacho kinakubalika:
Kwa mfano, rangi #ff22aa inaweza kuandikwa kama #f2a, au rangi #44aa22 inaweza kuandikwa kama #4a2.
Kuweka Rangi Kwa Kutumia HSL
Ilionekana katika CSS3 muundo mpya kuashiria rangi.
Umbizo la HSL ni ufupisho wa maneno ya Kiingereza: Hue (hue), Saturate (saturation) na Lightness (lightness).
Hue katika HSL ni thamani ya rangi kwenye gurudumu maalum la rangi (Mchoro 2) na imeelezwa kwa digrii. Ikiwa tunachora analogi na mfano wa RGB, basi 0 ° inafanana na nyekundu, 120 ° inafanana na kijani, na 240 ° inafanana na bluu.
Thamani ya hue itabadilika kutoka 0 hadi 359.
Kielelezo 2. Gurudumu la rangi ya HSL. Thamani ya pili - kueneza (Kueneza) imewekwa kama asilimia. Kwa kueneza kwa 100%, rangi ni "juicy" iwezekanavyo; kiashiria cha kueneza kinaposonga kuelekea 0%, rangi inakuwa nyepesi na inageuka kuwa kijivu.
Thamani ya tatu, Lightness, pia imewekwa kama asilimia. Asilimia ya juu, rangi itakuwa mkali zaidi. Maadili yaliyokithiri ya 0% na 100% yataonyesha rangi nyeusi (hakuna mwanga) na nyeupe (iliyo wazi) mtawaliwa, na haijalishi ni rangi gani kutoka kwa gurudumu la rangi iliyochaguliwa kwenye chaneli ya kwanza. Thamani mojawapo ya mwangaza wa rangi ni 50%.
Kuweka Rangi Kutumia HSLA
Umbizo la HSLA linahusiana na HSL, kama vile RGB ilivyo kwa RGBA. KATIKA Muundo wa HSL A, kama katika RGBA, chaneli ya alpha imeongezwa, ambayo inawajibika kwa uwazi wa rangi.
Rangi iliyobainishwa katika umbizo la HSL ni rahisi kusoma. Tunaweza kusema kwamba ni angavu. Kwa mfano, msimbo hsl(120,60%,50%) unaweza kuwakilisha rangi ya mwisho ikiwa kuna picha ya gurudumu la rangi ya HSL kwenye kumbukumbu. Hiyo haiwezi kusemwa juu ya fomati za RGB na HEX; nambari ya rangi iliyoainishwa katika fomati hizi inakuwa wazi tu baada ya kuonekana kwenye kichungi.
Miundo mipya katika CSS3 (HSL, HSLA na RGBA) hufanya kazi katika vivinjari kuanzia matoleo: IE 9.0, Opera 10.0 Firefox 3.0. Ninawezaje kufanya mitindo ifanye kazi kwenye vivinjari vya zamani?
Somebloсk ( rangi ya usuli: rgb(255,50,50); rangi ya usuli: rgba(255,50,50,0.85))
Unapotumia msimbo huu katika vivinjari vya zamani, rangi ya mandharinyuma ya darasa la .somebloсk, ingawa haitatumia kituo cha alfa, itaonyeshwa katika umbizo la RGB.
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 kuweka maadili yako ya rangi ndani miundo mbalimbali. Jedwali lifuatalo linaorodhesha miundo yote inayowezekana:
Miundo iliyoorodheshwa imeelezewa 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 ni thamani ya kijani(GG), na mwisho ni 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 mchoro wowote programu, kama vile Adobe Photoshop, Core Draw, nk.
Kila msimbo wa rangi ya heksadesimali katika CSS utatanguliwa na ishara ya heshi "#". Ifuatayo ni mifano ya kutumia nukuu za heksadesimali.
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
Ili kuweka rangi katika HTML, nambari hutumiwa msimbo wa hexadecimal. 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 10 hadi 15 zinabadilishwa na herufi 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. Vipi idadi kubwa zaidi, wale rangi nyepesi, maadili hubadilika kutoka #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. Inafaa kwa kusudi hili mhariri wa michoro, uwezo wa kufanya kazi na mifano tofauti ya rangi, kwa mfano, Adobe Photoshop. 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 ndani Mpango wa Photoshop
Rangi za wavuti
Ukiweka ubora wa utoaji wa rangi ya kifuatiliaji kuwa biti 8 (rangi 256), basi rangi sawa inaweza kuonyeshwa katika vivinjari tofauti kwa njia yangu mwenyewe. 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. KATIKA wakati huu 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 katika mfano huu Rangi ya mandharinyuma imewekwa kwa kutumia sifa ya bgcolor ya lebo
, na rangi ya maandishi kupitia sifa ya maandishi. Kwa anuwai, thamani ya sifa ya maandishi imewekwa kuwa: nambari ya hexadecimal, na bgcolor kutumia reserved neno kuu rangi ya manjano.HEX/HTML
Rangi ya HEX sio chochote ila uwakilishi wa hexadecimal wa RGB.
Rangi zinawasilishwa ndani umbo la tatu vikundi vya tarakimu za hexadecimal, ambapo kila kikundi kinajibika kwa rangi yake mwenyewe: #112233, ambapo 11 ni nyekundu, 22 ni ya kijani, 33 ni bluu. Thamani zote lazima ziwe kati ya 00 na FF.
Programu nyingi huruhusu aina fupi ya nukuu ya rangi ya heksadesimali. Ikiwa kila moja ya makundi matatu ina herufi sawa, kwa mfano #112233, basi zinaweza kuandikwa kama #123.
- h1 ( rangi: #ff0000; ) /* nyekundu */
- h2 ( rangi: #00ff00; ) /* kijani */
- h3 ( rangi: #0000ff; ) /* bluu */
- h4 ( rangi: #00f; ) /* bluu sawa, mkono mfupi */
RGB
Nafasi ya rangi ya RGB (Nyekundu, Kijani, Bluu) ina rangi zote zinazowezekana ambazo zinaweza kuundwa kwa kuchanganya nyekundu, kijani na bluu. Mtindo huu ni maarufu katika upigaji picha, televisheni, na picha za kompyuta.
Thamani za RGB hubainishwa kama nambari kamili kutoka 0 hadi 255. Kwa mfano, rgb(0,0,255) huonyeshwa kama samawati kwa sababu kigezo cha bluu kimewekwa kuwa thamani yake ya juu zaidi (255) na vingine vimewekwa kuwa 0.
Baadhi ya programu (haswa vivinjari vya wavuti) zinaauni asilimia ya kurekodi maadili ya RGB (kutoka 0% hadi 100%).
- h1 ( rangi: rgb(255, 0, 0); ) /* nyekundu */
- h2 ( rangi: rgb(0, 255, 0); ) /* kijani */
- h3 ( rangi: rgb(0, 0, 255); ) /* bluu */
- h4 ( rangi: rgb(0%, 0%, 100%); ) /* bluu sawa, ingizo la asilimia */
Thamani za rangi za RGB zinatumika katika vivinjari vyote vikuu.
RGBA
Hivi majuzi vivinjari vya kisasa alijifunza kufanya kazi na mfano wa rangi ya RGBA - ugani wa RGB na usaidizi wa kituo cha alpha, ambacho huamua uwazi wa kitu.
Maana Rangi za RGBA imeainishwa katika fomu: rgba (nyekundu, kijani, bluu, alpha). Kigezo cha alpha ni nambari inayoanzia 0.0 (uwazi kabisa) hadi 1.0 (isiyo wazi kabisa).
- h1 ( rangi: rgb(0, 0, 255); ) /* bluu katika RGB ya kawaida */
- h2 ( rangi: rgba(0, 0, 255, 1); ) /* samawati sawa katika RGBA, kwa sababu uwazi: 100% */
- h3 ( rangi: rgba(0, 0, 255, 0.5); ) /* uwazi: 50% */
- h4 ( rangi: rgba(0, 0, 255, .155); ) /* uwazi: 15.5% */
- h5 ( rangi: rgba(0, 0, 255, 0); ) /* uwazi kabisa */
RGBA inatumika katika IE9+, Firefox 3+, Chrome, Safari, na Opera 10+.
HSL
Mtindo wa rangi ya HSL ni uwakilishi wa mtindo wa RGB katika mfumo wa kuratibu wa silinda. HSL inawakilisha rangi kwa njia angavu zaidi na inayoweza kusomeka na binadamu kuliko RGB ya kawaida. Mfano huo hutumiwa mara nyingi katika programu za michoro, katika rangi za rangi, na kwa uchambuzi wa picha.
HSL inawakilisha Hue (rangi/hue), Kueneza (kueneza), Mwangaza/Mwanga (wepesi/nyepesi/mwangavu, isichanganywe na mwangaza).
Hue inabainisha nafasi ya rangi kwenye gurudumu la rangi (kutoka 0 hadi 360). Kueneza ni thamani ya asilimia ya kueneza (kutoka 0% hadi 100%). Mwangaza ni asilimia ya wepesi (kutoka 0% hadi 100%).
- h1 ( rangi: hsl(120, 100%, 50%); ) /* kijani */
- h2 ( rangi: hsl(120, 100%, 75%); ) /* kijani kibichi */
- h3 ( rangi: hsl(120, 100%, 25%); ) /* kijani iliyokolea */
- h4 ( rangi: hsl(120, 60%, 70%); ) /* kijani kibichi */
HSL inatumika katika IE9+, Firefox, Chrome, Safari, na Opera 10+.
HSLA
Sawa na RGB/RGBA, HSL ina modi ya HSLA inayoauni chaneli ya alpha ili kuonyesha uwazi wa kitu.
Thamani ya rangi ya HSLA imebainishwa kama: hsla(hue, kueneza, wepesi, alfa). Kigezo cha alpha ni nambari inayoanzia 0.0 (uwazi kabisa) hadi 1.0 (isiyo wazi kabisa).
- h1 ( rangi: hsl(120, 100%, 50%); ) /* kijani katika HSL ya kawaida */
- h2 ( rangi: hsla(120, 100%, 50%, 1); ) /* kijani sawa katika HSLA, kwa sababu uwazi: 100% */
- h3 ( rangi: hsla(120, 100%, 50%, 0.5); ) /* uwazi: 50% */
- h4 ( rangi: hsla(120, 100%, 50%, .155); ) /* uwazi: 15.5% */
- h5 ( rangi: hsla(120, 100%, 50%, 0); ) /* uwazi kabisa */
CMYK
Mfano wa rangi ya CMYK mara nyingi huhusishwa na uchapishaji wa rangi na uchapishaji. CMYK (tofauti na RGB) ni muundo wa kupunguza, kumaanisha kuwa maadili ya juu yanahusishwa na rangi nyeusi.
Rangi imedhamiriwa na uwiano wa cyan (Cyan), magenta (Magenta), njano (Njano), pamoja na kuongeza nyeusi (Ufunguo / nyeusi).
Kila moja ya nambari zinazofafanua rangi katika CMYK inawakilisha asilimia ya wino ya rangi hiyo inayounda. mchanganyiko wa rangi, au tuseme, saizi ya alama ya raster iliyoonyeshwa kwenye mashine ya kuweka picha kwenye filamu ya rangi fulani (au moja kwa moja kwenye fomu ya uchapishaji katika kesi ya CTP).
Kwa mfano, ili kupata rangi ya PANTONE 7526, ungechanganya sehemu 9 za samawati, sehemu 83 za majenta, sehemu 100 za manjano, na sehemu 46 nyeusi. Hii inaweza kuashiria kama ifuatavyo: (9,83,100,46). Wakati mwingine majina yafuatayo hutumiwa: C9M83Y100K46, au (9%, 83%, 100%, 46%), au (0.09/0.83/1.0/0.46).
HSB/HSV
HSB (pia inajulikana kama HSV) ni sawa na HSL, lakini ni miundo miwili tofauti ya rangi. Zote mbili zinatokana na jiometri ya silinda, lakini HSB/HSV inategemea muundo wa "hexcone", huku HSL ikiegemea muundo wa "bi-hexcone". Wasanii mara nyingi wanapendelea kutumia mfano huu, inakubaliwa kwa ujumla kuwa kifaa cha HSB/HSV kiko karibu na mtazamo wa asili wa rangi. Hasa, rangi mfano HSB kutumika katika Adobe Photoshop.
HSB/HSV inasimamia Hue (rangi/hue), Kueneza (kueneza), Mwangaza/Thamani (mwangaza/thamani).
Hue inabainisha nafasi ya rangi kwenye gurudumu la rangi (kutoka 0 hadi 360). Kueneza ni thamani ya asilimia ya kueneza (kutoka 0% hadi 100%). Mwangaza ni asilimia ya mwangaza (kutoka 0% hadi 100%).
XYZ
Mfano wa rangi ya XYZ (CIE 1931 XYZ) ni nafasi ya kihisabati pekee. Tofauti na RGB, CMYK, na miundo mingine, katika XYZ vijenzi vikuu ni "vya kufikirika," kumaanisha kuwa huwezi kuhusisha X, Y, na Z na seti zozote za rangi za kuchanganya. XYZ ni mfano mkuu wa karibu kila mtu mwingine mifano ya rangi, kutumika katika nyanja za kiufundi.
MAABARA
Muundo wa rangi wa LAB (CIELAB, “CIE 1976 L*a*b*”) umekokotolewa kutoka nafasi ya CIE XYZ. Wakati wa kuunda Maabara, lengo lilikuwa kuunda nafasi ya rangi, mabadiliko ya rangi ambayo yatakuwa ya mstari zaidi kutoka kwa mtazamo wa mtazamo wa binadamu (ikilinganishwa na XYZ), yaani, ili mabadiliko sawa ya rangi ya kuratibu maadili katika maeneo mbalimbali nafasi ya rangi ilizalisha hisia sawa za mabadiliko ya rangi.
