Vlad Merzheviç
Në HTML, një ngjyrë përcaktohet në një nga dy mënyrat: duke përdorur një kod heksadecimal dhe me emrin e disa ngjyrave. Përdoret kryesisht metoda e bazuar në sistemin e numrave heksadecimal, si më universale.
Ngjyra heksadecimal
Numrat heksadecimal përdoren për të specifikuar ngjyrat në HTML. Sistemi heksadecimal, ndryshe nga sistemi dhjetor, bazohet, siç sugjeron emri i tij, në numrin 16. Numrat do të jenë si më poshtë: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9. , A, B, C , D, E, F. Numrat nga 10 deri në 15 zëvendësohen me shkronja latine. Tabela 6.1 tregon korrespondencën ndërmjet numrave dhjetorë dhe heksadecimalë.
Numrat më të mëdhenj se 15 në sistemin heksadecimal formohen duke kombinuar dy numra në një (Tabela 6.2). Për shembull, 255 dhjetore është FF heksadecimal.
Për të shmangur konfuzionin në përkufizimin e sistemit të numrave, karakteri hash # vendoset përpara numrit heksadecimal, për shembull # aa69cc. Në këtë rast, regjistri nuk ka rëndësi, kështu që lejohet të shkruhet # F0F0F0 ose # f0f0f0.
Një ngjyrë tipike e përdorur në HTML duket kështu.
Këtu, ngjyra e sfondit të faqes së internetit është vendosur në # FA8E47. Simboli hash # përpara një numri do të thotë se është heksadecimal. Dy shifrat e para (FA) përcaktojnë përbërësin e kuq të ngjyrës, shifrat e treta deri në të katërt (8E) janë jeshile dhe dy shifrat e fundit (47) janë blu. Si rezultat, ju merrni këtë ngjyrë.
| FA | + | 8E | + | 47 | = | FA8E47 |
Secila nga tre ngjyrat - e kuqe, jeshile dhe blu - mund të marrë vlera nga 00 në FF, duke rezultuar në 256 nuanca. Kështu, numri i përgjithshëm i ngjyrave mund të jetë 256x256x256 = 16.777.216 kombinime. Modeli i ngjyrave i bazuar në përbërësit e kuq, jeshil dhe blu quhet RGB (e kuqe, jeshile, blu; e kuqe, jeshile, blu). Ky model është aditiv (nga add - to add), në të cilin shtimi i të tre komponentëve formon një ngjyrë të bardhë.
Për ta bërë më të lehtë lundrimin me ngjyra heksadecimal, merrni parasysh disa rregulla.
- Nëse vlerat e përbërësve të ngjyrave janë të njëjta (për shembull: # D6D6D6), atëherë merrni një nuancë gri. Sa më i lartë numri, aq më e hapur ngjyra, vlerat variojnë nga # 000000 (e zezë) në #FFFFFF (e bardhë).
- Një ngjyrë e kuqe e ndezur formohet nëse komponenti i kuq vendoset në maksimum (FF), dhe pjesa tjetër e përbërësve vendoset në zero. Ngjyra # FF0000 është nuanca më e kuqe e mundshme. I njëjti është rasti me jeshile (# 00FF00) dhe blu (# 0000FF).
- E verdha (#FFFF00) përftohet duke përzier të kuqe me të gjelbër. Kjo është qartë e dukshme në rrotën e ngjyrave (Fig. 6.1), ku janë paraqitur ngjyrat kryesore (e kuqe, jeshile, blu) dhe ngjyrat plotësuese ose plotësuese. Këto përfshijnë të verdhën, cianin dhe vjollcën (e quajtur edhe purpur). Në përgjithësi, çdo ngjyrë mund të merret duke përzier ngjyrat e afërta. Pra, ciani (# 00FFFF) përftohet duke kombinuar blu dhe jeshile.
Oriz. 6.1. Rrethi me ngjyra
Ngjyrat heksadecimal nuk kanë nevojë të zgjidhen në mënyrë empirike. Për këtë qëllim, një redaktues grafik që mund të punojë me modele të ndryshme ngjyrash është i përshtatshëm, për shembull, Adobe Photoshop. Në fig. 6.2 tregon një dritare për zgjedhjen e një ngjyre në këtë program, vlera heksadecimal që rezulton e ngjyrës aktuale përvijohet me një vijë. Mund ta kopjoni dhe ngjisni në kodin tuaj.
Oriz. 6.2. Dritarja e zgjedhjes së ngjyrave në Photoshop
Ngjyrat e internetit
Nëse e vendosni cilësinë e ngjyrave të monitorit në 8 bit (256 ngjyra), atëherë e njëjta ngjyrë mund të shfaqet ndryshe në shfletues të ndryshëm. Kjo është për shkak të mënyrës se si shfaqen grafikët, ku shfletuesi punon me paletën e tij dhe nuk mund të tregojë një ngjyrë që nuk e ka në paleta. Në këtë rast, ngjyra zëvendësohet nga një kombinim i pikselave të ngjyrave të tjera, afër saj, që imitojnë atë të specifikuar. Për të mbajtur ngjyrën të pandryshuar në shfletues të ndryshëm, ne prezantuam një gamë të të ashtuquajturave ngjyra të uebit. Ngjyrat e uebit janë ato ngjyra, për secilën përbërës të të cilave - e kuqe, jeshile dhe blu - është vendosur një nga gjashtë vlerat - 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC ), 255 (FF). Kllapat tregojnë vlerën heksadecimal të këtij komponenti. Numri i përgjithshëm i ngjyrave nga të gjitha kombinimet e mundshme jep 6x6x6 - 216 ngjyra. Një shembull i një ngjyre ueb është # 33FF66.
Karakteristika kryesore e ngjyrës së uebit është se ajo shfaqet e njëjtë në të gjithë shfletuesit. Për momentin, rëndësia e ngjyrave të uebit është shumë e vogël për shkak të rritjes së cilësisë së monitorëve dhe zgjerimit të aftësive të tyre.
Ngjyrat sipas emrit
Për të mos mësuar përmendësh një grup numrash, në vend të tyre mund të përdorni emrat e ngjyrave të përdorura zakonisht. Tabela 6.3 liston emrat e emrave të njohur të ngjyrave.
| Emri i ngjyrës | Ngjyrë | Përshkrim | Vlera heksadecimal |
|---|---|---|---|
| e zezë | E zezë | #000000 | |
| blu | Blu | # 0000 FF | |
| fuchsia | Vjollcë e lehtë | # FF00FF | |
| gri | Gri e errët | #808080 | |
| jeshile | E gjelbër | #008000 | |
| gëlqere | Jeshile e hapur | # 00FF00 | |
| ngjyrë gështenjë | E kuqe e erret | #800000 | |
| marina | Blu marine | #000080 | |
| ulliri | Ulliri | #808000 | |
| vjollcë | Vjollcë e errët | #800080 | |
| e kuqe | E kuqe | # FF0000 | |
| argjendi | Gri e hapur | # C0C0C0 | |
| ngjyrë kafe | BLU jeshile | #008080 | |
| të bardhë | E bardha | #FFFFFF | |
| e verdhe | E verdhe | # FFFF00 |
Nuk ka rëndësi se në cilën mënyrë e specifikoni ngjyrën - me emrin e saj ose duke përdorur numra heksadecimal. Këto metoda janë të barabarta në veprim. Shembulli 6.1 tregon se si të vendosni sfondin dhe ngjyrën e tekstit të një faqe interneti.
Shembulli 6.1. Ngjyra e sfondit dhe e tekstit
Shembull teksti
Në këtë shembull, ngjyra e sfondit vendoset duke përdorur atributin bgcolor të etiketës
, dhe ngjyra e tekstit përmes atributit tekst. Për një ndryshim, atributi i tekstit vendoset në një numër heksadecimal dhe bgcolor vendoset në fjalën kyçe të rezervuar.>> Menaxhimi i ngjyrave
Vlerat heksadecimale të ngjyrave RGB
Metodat e përshkrimit dhe përpunimit të ngjyrës ndryshojnë nga njëra-tjetra në atë paraqitje përfundimtare për të cilën synohen. Le të krahasojmë, për shembull, paraqitjet e ngjyrave për printim dhe për monitorët e kompjuterit. Në rastin e parë, merret baza E bardha ngjyra e letrës, në të cilën aplikohen më pas tre ngjyra kryesore: blu, vjollcë dhe e verdhe... Duke u përzier me njëra-tjetrën dhe me ngjyrën e bardhë të letrës në përmasa të ndryshme, këto tre ngjyra kryesore japin nuanca të ndryshme ngjyrash, përveç të zezës së pastër, ose, në mungesë të plotë të bojës, japin ngjyrën e bardhë të letrës. Nëse u shtojmë të zezën, marrim CMYK- një metodë e paraqitjes së ngjyrave, kur ngjyra e kërkuar fitohet duke zbritur ngjyrat që mungojnë nga e bardha.
Në rastin e dytë, merret baza e zezë ngjyra e ekranit të monitorit, secila qelizë e të cilit shkëlqen në një nga tre ngjyrat: e kuqe- E kuqe, jeshile- jeshile dhe blu- blu. Më pas, në mungesë të plotë të ndonjë shkëlqimi, marrim një ngjyrë të pastër të zezë të ekranit dhe cilado nga ngjyrat e kërkuara përcaktohet nga raporti i secilës prej tre ngjyrave. Në këtë rast, marrim RGB- një metodë e transferimit të ngjyrave. Ngjyrat primare mund të variojnë nga 0
përpara 255
, ose nga 0%
përpara 100%
, ose mund të përfaqësohet si një vlerë heksadecimal. Në foton më poshtë, mund të shihni rezultatet e përzierjes së ngjyrave kryesore.
Sistemi heksadecimal i numrave, ndryshe nga numri dhjetor në rreshtin e tij të shifrave, nuk ka dhjetë shifra, por gjashtëmbëdhjetë - prandaj emri. Prandaj, variantet jo-përsëritëse të kombinimeve me dy shifra mund të jenë vetëm - 256 , për të vazhduar një seri shifrash pas 9 letra nga A përpara F prandaj rreshti do të duket kështu -
| 0,1,2,3,4,5,6,7,8,9, A, B, C, D, E, F. |
Në këtë rast, ngjyra përcaktohet nga tre numra heksadecimal, secila prej të cilave përbëhet nga dy shifra. Numri i parë përcakton intensitetin e kuqe ngjyrat, mesatare jeshile, gjeja e fundit - blu ngjyrat. Të gjithë numrat mund të marrin vlera në intervalin nga 00 përpara FF(nga 0 në 255). Për shembull: jeshilja jepet si # 00FF00, e kuqe - si # FF0000, blu - si # 0000 FF, e bardhë - si #FFFFFF, mungesa e plotë e ngjyrës ose e zezë jepet si #000000 .
Në formularin e mëposhtëm mund të vendosni çdo vlerë heksadecimal për secilën nga tre ngjyrat dhe të shihni rezultatin e përzierjes së tyre duke klikuar në fushën e daljes.
Shembuj të disa vlerave heksadecimal të ngjyrave RGB janë gradimet e kuqe, blu dhe jeshile.
| pamje | kodi | pamje | kodi | pamje | kodi | pamje | kodi | pamje | kodi | pamje | kodi |
| #010000 | #800000 | #000100 | #008000 | #000001 | #000080 | ||||||
| #100000 | #900000 | #001000 | #009000 | #000010 | #000090 | ||||||
| #200000 | # A00000 | #002000 | # 00A000 | #000020 | # 0000A0 | ||||||
| #300000 | # B00000 | #003000 | # 00B000 | #000030 | # 0000B0 | ||||||
| #400000 | # C00000 | #004000 | # 00C000 | #000040 | # 0000C0 | ||||||
| #500000 | # D00000 | #005000 | # 00D000 | #000050 | # 0000D0 | ||||||
| #600000 | # E00000 | #006000 | # 00E000 | #000060 | # 0000E0 | ||||||
| #700000 | # FF0000 | #007000 | # 00FF00 | #000070 | # 0000 FF |
Specifikimi i ngjyrës duke përdorur literale të vargut
Për lehtësinë e përdorimit, disa ngjyrave dhe kombinimeve të tyre u janë caktuar emra që njihen nga të gjithë shfletuesit dhe u bë e mundur vendosja e shumë prej tyre me emër. Tabela më poshtë rendit disa nga emrat e ngjyrave:
| pamje | emri | pamje | emri | pamje | emri | pamje | emri |
| E bardha | E kuqe | portokalli | E verdhe | ||||
| E gjelbër | Blu | Vjollcë | E zezë | ||||
| Aliceblue | Antik i bardhë | Aqua | Aquamarine | ||||
| Azure | Bezhë | Bisque | Blanchedalmond | ||||
| Vjollca blu | Kafe | Burlywood | Kadet blu | ||||
| Chartreuse | Cokollate | Koral | lule misri blu | ||||
| Mëndafshi i misrit | Crimson | Cyan | BLU e erret | ||||
| të errët | Shkopi i artë i errët | Gri e erret | Jeshile të errët | ||||
| Darkkaki | Darkmagenta | E errët e gjelbër | Ngjyra e errët | ||||
| Darkorchid | E kuqe e erret | Salmon i zi | Gjelbër e errët | ||||
| Blu e errët | Gri e errët | Bruz i errët | Vjollca e errët | ||||
| Pink i thellë | Blu e thellë | E zbehtë | Dodgeblu | ||||
| Tulla zjarri | E bardhë me lule | Me gjelbërim pyjor | Fuschia | ||||
| Gainsboro | Ghostwhite | Ari | Shkopi i Artë | ||||
| Gri | E verdhë e gjelbër | Mjaltë | Rozë e nxehtë | ||||
| Indianed | Lejla | Fildishi | Kaki | ||||
| Livando | Skuqja e livandës | Limonshifon | Blu e lehtë | ||||
| Koral i lehtë | drite | E verdhë e lehtë e bardhë | E gjelbër e çelur | ||||
| gri e çelët | Rozë e lehtë | Salmon i lehtë | E gjelbër e lehtë | ||||
| Blu e lehtë | Gri me llafe | Blu e çelur | E verdhe e lehte | ||||
| Gëlqere | Limegreen | Liri | Magenta | ||||
| Maroon | Aquamarine e mesme | Blu mesatare | Mediumorkide | ||||
| Vjollcë e mesme | E gjelbër e mesme | Blu me pllakë mesatare | Mediumspringgreen | ||||
| Bruz mesatar | Vjollcë mesatare | Blu e mesnatës | Krem mente | ||||
| Mistiroza | Navajo e bardhë | Marina | Oldlace | ||||
| Ulliri | Ullidrabi | E portokalluar | Orkide | ||||
| Palegoldenrod | Palegreen | Paleturuz | Paleviolet | ||||
| Kamxhik papaja | Peachpuff | Peruja | Rozë | ||||
| Kumbulla | Blu pluhur | Trëndafili | BLU Mbretërore | ||||
| shalë kafe | Deti jeshile | Guaskë deti | Siena | ||||
| Argjendi | Qiell blu | Pllaka blu | Slategray | ||||
| borë | Pranvera | Çeliku | Tan | ||||
| Teal | gjembak | Domate | Bruz | ||||
| vjollce | Gruri | Tym i bardhë | e verdhë e gjelbër |
Përdorimi i një zgjedhësi të sigurt ngjyrash
Fatkeqësisht, në platforma të ndryshme, me cilësime të ndryshme të sistemit, paraqitja e saktë e ngjyrave është një problem. Gjë është se shfletuesi gjithmonë përpiqet të rregullojë paletën e ngjyrave të dokumentit në cilësimet e sistemit dhe aftësitë e monitorimit, duke përzier në mënyrë të pavarur ngjyrat dhe duke i zëvendësuar ato. Si rezultat, ndonjëherë përdoruesi nuk sheh saktësisht atë që web-master dëshironte t'i tregonte atij. Një rrugëdalje nga kjo situatë u gjet në përdorimin e një palete, secila ngjyrë e së cilës garantohet të jepet e njëjtë nga të gjithë shfletuesit në platforma të ndryshme. Ky është i ashtuquajturi e garantuar paleta, e quajtur edhe ajo i sigurt paleta. Kjo paletë përfshin ngjyra, përbërësit e ngjyrave të të cilave marrin vlerat e mëposhtme: 00 ,33 ,66 ,99 , CC,FF, në të gjitha të mundshme 216 kombinimet e tyre.
| pamje | kodi | pamje | kodi | pamje | kodi | pamje | kodi | pamje | kodi | pamje | kodi |
| Fffffff | CCCCCC | 999999 | 666666 | 333333 | 000000 | ||||||
| CCCC66 | CCCC33 | 999966 | 999933 | 999900 | 666600 | ||||||
| CCFF66 | CCFF00 | CCFF33 | CCCC99 | 666633 | 333300 | ||||||
| 99 FF00 | 99FF33 | 99CC66 | 99CC00 | 99CC33 | 669900 | ||||||
| CCFF99 | 99FF99 | 66CC00 | 66CC33 | 669933 | 336600 | ||||||
| 66 FF00 | 66FF33 | 33 FF00 | 33CC00 | 339900 | 009900 | ||||||
| 33FF33 | 00FF33 | 00 FF00 | 00CC00 | 33CC33 | 00CC33 | ||||||
| CCFFCC | 99CC99 | 66CC66 | 669966 | 336633 | 003300 | ||||||
| 99FF99 | 66FF66 | 33FF66 | 00FF66 | 339933 | 006600 | ||||||
| 66FF99 | 33FF99 | 00FF99 | 33CC66 | 00CC66 | 009933 | ||||||
| 66CC99 | 33CC99 | 00CC99 | 339966 | 009966 | 006633 | ||||||
| 99FFCC | 66FFCC | 33FFCC | 00FFCC | 33CCCC | 009999 | ||||||
| CCFFFF | 99FFFF | 66FFFF | 33FFFF | 00FFFF | 00CCCC | ||||||
| 99CCCC | 66CCCC | 339999 | 669999 | 006666 | 336666 | ||||||
| 66CCFF | 33CCFF | 00CCFF | 3399CC | 0099CC | 003333 | ||||||
| 99CCFF | 3399 FF | 0099FF | 6699CC | 336699 | 006699 | ||||||
| 0066FF | 3366CC | 0066CC | 0033FF | 003399 | 003366 | ||||||
| 6699 FF | 3366 FF | 0000 FF | 0000CC | 0033CC | 000033 | ||||||
| 3333FF | 3300 FF | 3300cc | 3333CC | 000099 | 000066 | ||||||
| 9999CC | 6666 FF | 6666CC | 666699 | 333399 | 333366 | ||||||
| CCCCFF | 9999 FF | 6666 FF | 6600 FF | 330099 | 330066 | ||||||
| 9966CC | 9966 FF | 6600cc | 6633CC | 663399 | 330033 | ||||||
| CC99FF | CC66FF | 9933FF | 9900 FF | 660099 | 663366 | ||||||
| CC66FF | CC33FF | CC00FF | 9900cc | 996699 | 660066 | ||||||
| CC99CC | CC66CC | CC33CC | CC00CC | 990099 | 993399 | ||||||
| FFCCFF | FF99FF | FF66FF | FF33FF | FF00FF | CC3399 | ||||||
| FF66CC | FF00CC | FF33CC | CC6699 | CC0099 | 990066 | ||||||
| FF99CC | FF3399 | FF0099 | CC0066 | 993366 | 660033 | ||||||
| FF6699 | FF3399 | FF0066 | CC3366 | 996666 | 663333 | ||||||
| CC9999 | CC6666 | CC3333 | CC0000 | 990033 | 330000 | ||||||
| FFCCCC | FF9999 | FF6666 | FF3333 | FF0000 | CC0033 | ||||||
| FF6633 | CC3300 | FF3300 | FF0000 | CC0000 | 990000 | ||||||
| FFCC99 | FFCC66 | FF6600 | CC6633 | 993300 | 660000 | ||||||
| FF9900 | FF9933 | CC9966 | CC6600 | 996633 | 663300 | ||||||
| FFCC66 | FFCC00 | FFCC33 | CC9900 | CC9933 | 996600 | ||||||
| FFFFCC | FFFF99 | FFFF66 | FFFF33 | FFFF00 | CCCC00 |
Në HTML, ngjyra mund të vendoset në tre mënyra:
Vendosja e një ngjyre në HTML me emrin e saj
Disa ngjyra mund të specifikohen me emrin e tyre, duke përdorur emrin e ngjyrës në anglisht si vlerë. Fjalë kyçe më të zakonshme janë e zeza, e bardha, e kuqe, jeshile, blu, etj.
Ngjyra e tekstit - e kuqe
Ngjyrat më të njohura të standardit të World Wide Web Consortium (W3C):
| Ngjyrë | Emri | Ngjyrë | Emri | Ngjyrë | Emri | Ngjyrë | Emri |
|---|---|---|---|---|---|---|---|
| E zezë | Gri | Argjendi | E bardha | ||||
| E verdhe | Gëlqere | Aqua | Fuchsia | ||||
| E kuqe | E gjelbër | Blu | Vjollcë | ||||
| Maroon | Ulliri | Marina | Teal |
Një shembull i përdorimit të emrave të ndryshëm të ngjyrave:
Shembull: vendosja e një ngjyre me emrin e saj
- Provojeni vetë"
Drejtimi në një sfond të kuq
Duke u nisur në një sfond portokalli
Titulli në sfond gëlqere
Tekst i bardhë në sfond blu
Drejtimi në një sfond të kuq
Duke u nisur në një sfond portokalli
Titulli në sfond gëlqere
Tekst i bardhë në sfond blu
Specifikimi i ngjyrës duke përdorur RGB
Kur shfaqni ngjyra të ndryshme në monitor, ai bazohet në paletën RGB. Çdo ngjyrë fitohet duke përzier tre ato kryesore: R - e kuqe (e kuqe), G - jeshile (jeshile), B - blu... Shkëlqimi i çdo ngjyre përcaktohet nga një bajt dhe për këtë arsye mund të variojë nga 0 në 255. Për shembull, RGB (255,0,0) shfaqet si e kuqe sepse e kuqja është vendosur në vlerën e saj më të lartë (255) dhe pjesa tjetër është vendosur në 0 Ju gjithashtu mund të vendosni ngjyrën si përqindje. Secili prej parametrave tregon nivelin e ndriçimit të ngjyrës përkatëse. Për shembull: rgb (127, 255, 127) dhe rgb (50%, 100%, 50%) do të vendosin të njëjtën ngopje mesatare jeshile:
Shembull: Përcaktimi i një ngjyre duke përdorur RGB
- Provojeni vetë"
rgb (127, 255, 127)
rgb (50%, 100%, 50%)
rgb (127, 255, 127)
rgb (50%, 100%, 50%)
Vendosja heksadecimal e ngjyrave
vlerat R G B mund të specifikohet gjithashtu duke përdorur vlerat heksadecimal (HEX) të ngjyrave në formën: #RRGGBB ku RR (e kuqe), GG (jeshile) dhe BB (blu) janë vlera heksadecimal nga 00 në FF (njëlloj si dhjetore 0-255 )... Sistemi heksadecimal, ndryshe nga sistemi dhjetor, bazohet, siç sugjeron emri i tij, në numrin 16. Sistemi heksadecimal përdor karakteret e mëposhtme: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, С, D, E, F. Këtu numrat nga 10 në 15 zëvendësohen me shkronja latine. Numrat më të mëdhenj se 15 në heksadecimal përfaqësojnë kombinimin e dy karaktereve në një vlerë. Për shembull, numri më i lartë 255 në dhjetor është FF më i lartë në heks. Në ndryshim nga sistemi dhjetor, një simbol hash vendoset përpara numrit heksadecimal # për shembull, # FF0000 shfaqet si e kuqe sepse e kuqja është vendosur në vlerën e saj më të lartë (FF) dhe ngjyrat e tjera janë vendosur në vlerën e tyre minimale (00). Karakteret pas simbolit hash # ju mund të shkruani me shkronja të mëdha dhe të vogla. Sistemi heksadecimal ju lejon të përdorni një formë të shkurtuar si #rgb, ku çdo karakter është ekuivalent me dyfishin. Pra, hyrja # f7O duhet të konsiderohet si # ff7700.
Shembull: Ngjyra HEX
- Provojeni vetë"
e kuqe: # FF0000
jeshile: # 00FF00
blu: # 0000FF
e kuqe: # FF0000
jeshile: # 00FF00
blu: # 0000FF
e kuqe + jeshile = e verdhë: # FFFF00
e kuqe + blu = vjollcë: # FF00FF
jeshile + blu = cian: # 00FFFF
Lista e ngjyrave të zakonshme (emri, HEX dhe RGB):
| Emri anglisht | Emri rus | Mostra | HEX | RGB | ||
|---|---|---|---|---|---|---|
| Amaranti | Amaranti | # E52B50 | 229 | 43 | 80 | |
| Qelibar | Qelibar | # FFBF00 | 255 | 191 | 0 | |
| Aqua | BLU jeshile | # 00FFFF | 0 | 255 | 255 | |
| Azure | Azure | # 007FFF | 0 | 127 | 255 | |
| E zezë | E zezë | #000000 | 0 | 0 | 0 | |
| Blu | Blu | # 0000 FF | 0 | 0 | 255 | |
| Bondi blu | Uji i plazhit Bondi | # 0095B6 | 0 | 149 | 182 | |
| Tunxh | Tunxh | # B5A642 | 181 | 166 | 66 | |
| Kafe | Kafe | # 964B00 | 150 | 75 | 0 | |
| Cerulean | Azure | # 007BA7 | 0 | 123 | 167 | |
| Jeshile e errët pranverore | Jeshile e errët pranverore | #177245 | 23 | 114 | 69 | |
| Smeraldi | Smeraldi | # 50C878 | 80 | 200 | 120 | |
| Patëllxhan | Patëllxhan | #990066 | 153 | 0 | 102 | |
| Fuchsia | Fuchsia | # FF00FF | 255 | 0 | 255 | |
| Ari | Ari | # FFD700 | 250 | 215 | 0 | |
| Gri | Gri | #808080 | 128 | 128 | 128 | |
| E gjelbër | E gjelbër | # 00FF00 | 0 | 255 | 0 | |
| Lejla | Lejla | # 4B0082 | 75 | 0 | 130 | |
| Jade | Jade | # 00A86B | 0 | 168 | 107 | |
| Gëlqere | Gëlqere | # CCFF00 | 204 | 255 | 0 | |
| Malakiti | Malakiti | # 0BDA51 | 11 | 218 | 81 | |
| Marina | Blu marine | #000080 | 0 | 0 | 128 | |
| Okër | Okër | # CC7722 | 204 | 119 | 34 | |
| Ulliri | Ulliri | #808000 | 128 | 128 | 0 | |
| portokalli | portokalli | # FFA500 | 255 | 165 | 0 | |
| Pjeshkë | Pjeshkë | # FFE5B4 | 255 | 229 | 180 | |
| Kungull | Kungull | # FF7518 | 255 | 117 | 24 | |
| Vjollcë | Vjollcë | #800080 | 128 | 0 | 128 | |
| E kuqe | E kuqe | # FF0000 | 255 | 0 | 0 | |
| Shafrani | Shafrani | # F4C430 | 244 | 196 | 48 | |
| Deti jeshil | Deti i gjelbër | # 2E8B57 | 46 | 139 | 87 | |
| E gjelbër kënetore | moçal | # ACB78E | 172 | 183 | 142 | |
| Teal | BLU jeshile | #008080 | 0 | 128 | 128 | |
| Ultramarine | Ultramarine | # 120A8F | 18 | 10 | 143 | |
| vjollce | Vjollcë | # 8B00FF | 139 | 0 | 255 | |
| E verdhe | E verdhe | # FFFF00 | 255 | 255 | 0 | |
Kodet e ngjyrave (sfondi) sipas ngopjes dhe nuancës.
Ngjyra në gjuhën CSS mund të vendoset në mënyra të ndryshme:
- me emër,
- sipas vlerës heksadecimal,
- në formatet RGB dhe RGBA,
- në formatet HSL dhe HSLA.
Caktimi i ngjyrave sipas emrit
Shfletuesit mbështesin specifikimin e disa ngjyrave për elementët me emër. Në këtë tabelë, disa fjalë kyçe (emrat e ngjyrave në anglisht) të përdorura për të vendosur vetitë e ngjyrave janë kodi RGB, kodi heksadecimal (HEX) dhe kodi HSL.
| Emri | Ngjyrë | RGB | HEX | Hsl | Përshkrim |
|---|---|---|---|---|---|
| të bardhë | rgb (255, 255, 255) | #ffffff ose #fff | hsl (0, 0%, 100%) | E bardha | |
| argjendi | rgb (192, 192, 192) | # c0c0c0 | hsl (0, 0%, 75%) | Gri | |
| gri | rgb (128, 128, 128) | #808080 | hsl (0, 0%, 50%) | Gri e errët | |
| e zezë | rgb (0, 0, 0) | # 000000 ose # 000 | hsl (0, 0%, 0%) | E zezë | |
| ngjyrë gështenjë | rgb (128, 0, 0) | #800000 | hsl (0, 100%, 25%) | E kuqe e erret | |
| e kuqe | rgb (255, 0, 0) | # ff0000 ose # f00 | hsl (0, 100%, 50%) | E kuqe | |
| portokalli | rgb (255, 165, 0) | #ffa500 | hsl (38.8, 100%, 50%) | portokalli | |
| e verdhe | rgb (255, 255, 0) | # ffff00 ose # ff0 | hsl (60, 100%, 50%) | E verdhe | |
| ulliri | rgb (128, 128, 0) | #808000 | hsl (60, 100%, 25%) | Ulliri | |
| gëlqere | rgb (0, 255, 0) | # 00ff00 ose # 0f0 | hsl (120, 100%, 50%) | Jeshile e hapur | |
| jeshile | rgb (0, 128, 0) | #008000 | hsl (120, 100%, 25%) | E gjelbër | |
| ujore | rgb (0, 255, 255) | # 00ffff ose # 0ff | hsl (180, 100%, 50%) | Blu | |
| blu | rgb (0, 0, 255) | # 0000ff ose # 00f | hsl (240, 100%, 50%) | Blu | |
| marina | rgb (0,0,128) | #000080 | hsl (240, 100%, 25%) | Blu marine | |
| ngjyrë kafe | rgb (0, 128, 128) | #008080 | hsl (180, 100%, 25%) | BLU jeshile | |
| fuchsia | rgb (255, 0, 255) | # ff00ff ose # f0f | hsl (300, 100%, 50%) | Rozë | |
| vjollcë | rgb (128, 0, 128) | #800080 | hsl (300, 100%, 25%) | Vjollcë |
Ky është një shembull i përdorimit të emrave të ngjyrave, emërtimi i ngjyrave është marrë nga tabela e zgjeruar.
Kështu funksionon ky kod:
Vendosja e ngjyrës duke përdorur RGB
RGB është një model ngjyrash shtesë. Në Anglisht shtesë- shtesë. RGB është një shkurtim i fjalëve angleze: Red, Green, Blue - red, green, blu). Nga kjo është e qartë se në modelin RGB, ngjyrat sintetizohen duke shtuar tre ngjyra (e kuqe, jeshile, blu) në sasi të ndryshme.
Duke përzier të kuqe, jeshile dhe blu, mund të merrni disa milionë nuanca. Të gjitha kombinimet e mundshme ruhen në memorien e kompjuterëve.
Shkoni te pika.
Për të vendosur vetitë në këtë format, përdorni shënimin rgb (r, g, b), ku r, g, b janë tre kanale për secilën ngjyrë (e kuqe, jeshile, blu). Vlerat për çdo kanal variojnë nga 0 në 255.
Shembull i kodit.
Për të bërë gjithçka të qartë, unë do të jap një kod shembull:
Kështu duhet të funksionojë ky shembull:
Fig. 1. Ngjyrat në RGB. Shpjegimet për shembull.
Në fillim të faqes, ne krijojmë një klasë div.rgb, është e nevojshme në mënyrë që blloqet e krijuara nga etiketa
Tjetra, në kod vendosim ngjyrën e sfondit të bllokut
Provoni të redaktoni këtë shembull dhe specifikoni vlerat tuaja, për shembull rgb (100, 100, 100).
Vendosja e ngjyrës duke përdorur RGBA
CSS3 prezanton një mjet të ri për të punuar me ngjyra - formatin RGBA. Mund të quhet një evolucion i modelit RGB, por me shtimin e një kanali të ri - kanal A ose alfa. Ky kanal vendos transparencën e ngjyrës. Vlerat e tij vendosen në intervalin nga 0 në 1. Një vlerë e barabartë me 0 korrespondon me transparencën e plotë, 1 - me errësirën e plotë (ngjyra do të jetë e njëjtë me atë që është specifikuar në tre kanalet e para RGB) dhe e ndërmjetme vlera, si 0.4 ose 0.6 - në shkallë të ndryshme të tejdukshmërisë.
Shembull i kodit.
Kështu funksionon:
Ky kod është vizualisht i ngjashëm me kodin e mëposhtëm, i cili përdor modelin RGB për të vendosur vlerën e ngjyrës:
Ja rezultati:
Një vlerë e kanalit alfa e barabartë me zero e bën çdo ngjyrë të padukshme - absolutisht transparente, një vlerë e barabartë me një përkthen ngjyrën në kodin RGB pa ndryshime. Vetia rgba (255,0,0,1.0) tregon rgb (255, 0, 0) të kuqe.
Vlera heksadecimal (kodi HEX)
Në jetën e përditshme, ne përdorim sistemin dhjetor të numërimit. Origjina e tij është shumë e thjeshtë - ne kemi dhjetë gishta në duar dhe dikur ishte e përshtatshme të numëronim me gishta në jetë. Nëse në sistemin dhjetor ka dhjetë shifra: nga 0 në 9, dhe numri 10 është tashmë shifra tjetër, atëherë në sistemin heksadecimal ka 16 shifra, dhe shifra tjetër do të jetë numri 16.
Për të treguar kodet e ngjyrave si shifra heksadecimal, përdoren shifra të zakonshme dhjetore nga 0 në 9 dhe për të treguar shifrat nga 10 në 15, përdoren shkronja latine nga A në F, domethënë (0, 1, 2, 3, 4, 5 , 6, 7, 8, 9, A, B, C, D, E, F). Për qartësi, le ta përmbledhim këtë në një tabelë:
Për të shkruar numra heksadecimalë më të mëdhenj se F (15 në sistemin dhjetor), si në sistemin dhjetor, përdoret edhe bashkimi i dy shifrave, por tashmë heksadecimal, gjë që është e dukshme. Pra, për të shkruar numrin dhjetor 255 në shënimin heksadecimal përdoret FF.
Sistemi heksadecimal është më i kuptueshëm për kompjuterin, ai përpunon më shpejt vlerat e specifikuara nga vlera heksadecimal.
Për të specifikuar ngjyrën në sistemin heksadecimal, paraprini vlerën numerike me një shenjë "#", shembull: # FFC0CB. Vetë vlera # FFC0CB përbëhet nga tre shifra heksadecimal FF, C0 dhe CB. Kuptimi i këtij shënimi është i njëjtë me vendosjen e ngjyrës RGB (rgb (r, g, b)) - çdo shifër heksadecimal në kodin HEX tregon ngopjen e ngjyrave në kanalin e saj RGB.
Ky kod do të shfaqë artikujt e mëposhtëm:
Dhe këtu është një foto me rezultatin nga seksioni "Cilësimi i ngjyrave me RGB" në këtë faqe më lart.
Fig. 1. Ngjyrat në RGB. Ne shohim se ngjyrat janë identike.
Lejohet një shënim i shkurtuar i kodit HEX me ngjyra: një numër 6-shifror mund të shkruhet si një numër 3-shifror. Kjo vlen vetëm kur dy shifra në vlerën e ngjyrës së një kanali përsëriten.
Kjo do të thotë, shkurtesa e mëposhtme e shënimit është e pranueshme:
Për shembull, ngjyra # ff22aa mund të shkruhet si kjo - # f2a, ose ngjyra # 44aa22 mund të specifikohet si # 4a2.
Vendosja e ngjyrës duke përdorur HSL
CSS3 prezanton një format të ri për specifikimin e ngjyrave.
HSL është një shkurtim i fjalëve angleze Hue, Saturate dhe Lightness.
Hue në HSL është një vlerë ngjyrash në një rrotë të veçantë ngjyrash (Figura 2) dhe është e specifikuar në gradë. Në analogji me modelin RGB, 0 ° korrespondon me të kuqe, 120 ° korrespondon me jeshile dhe 240 ° korrespondon me blu.
Vlera e nuancës do të variojë nga 0 në 359.
Figura 2. Rrota me ngjyra HSL. Vlera e dytë është ngopja (Saturate) është vendosur në përqindje. Me ngopje 100%, ngjyra është maksimale "lëng", pasi treguesi i ngopjes lëviz në 0%, ngjyra bëhet gjithnjë e më e shurdhër dhe rrokulliset në gri.
Vlera e tretë, Lehtësia, vendoset gjithashtu si përqindje. Sa më e lartë të jetë përqindja, aq më e ndritshme do të jetë ngjyra. Vlerat ekstreme prej 0% dhe 100% do të nënkuptojnë respektivisht ngjyra të zeza (pa dritë) dhe të bardha (të fryra), pavarësisht se cila ngjyrë nga rrota e ngjyrave është zgjedhur në kanalin e parë. Vlera optimale e ndriçimit të ngjyrës mund të konsiderohet e barabartë me 50%.
Vendosja e ngjyrave me HSLA
HSLA është e lidhur me HSL, ashtu si RGB me RGBA. Në formatin HSLA, si në RGBA, shtohet një kanal alfa që është përgjegjës për transparencën e ngjyrës.
Ngjyra HSL është më e lehtë për t'u lexuar. Mund të themi se është intuitiv. Për shembull, një kod hsl (120.60%, 50%) mund të përfaqësojë ngjyrën përfundimtare nëse ka një fotografi të rrotës së ngjyrave HSL në memorie. E njëjta gjë nuk mund të thuhet për formatet RGB dhe HEX, kodi i ngjyrave i specifikuar në këto formate bëhet i kuptueshëm vetëm pasi të vizualizohet në monitor.
Formatet e reja në CSS3 (HSL, HSLA dhe RGBA) funksionojnë në shfletues duke filluar nga versionet: IE 9.0, Opera 10.0 Firefox 3.0. Si t'i bëj stilet të funksionojnë në shfletues të vjetër?
Somebloсk (ngjyra e sfondit: rgb (255,50,50); ngjyra e sfondit: rgba (255,50,50,0,85))
Kur përdorni këtë kod në shfletues të vjetër, ngjyra e sfondit për klasën .somebloсk, megjithëse nuk do të përdorë kanalin alfa, do të shfaqet në formatin RGB.
