Kodet e ngjyrave CSS përdoren për të specifikuar një ngjyrë. Në mënyrë tipike, kodet e ngjyrave ose vlerat e ngjyrave përdoren për të vendosur një ngjyrë ose për planin e parë të një elementi (për shembull, ngjyra e tekstit, ngjyra e lidhjes) ose për sfondin e një elementi (ngjyra e sfondit, ngjyra e bllokut). Ato mund të përdoren gjithashtu për të ndryshuar ngjyrën e një butoni, kufiri, shënuesi, rri pezull dhe efekte të tjera dekorative.
Ju mund të vendosni vlerat tuaja të ngjyrave në formate të ndryshme. Tabela e mëposhtme liston të gjitha formatet e mundshme:
Formatet e listuara përshkruhen më në detaje më poshtë.
Ngjyrat CSS - Kodet Heksadecimal
Kodi heksadecimal i ngjyraveështë një paraqitje gjashtëshifrore e një ngjyre. Dy shifrat e para (RR) përfaqësojnë vlerën e kuqe, dy të tjerat përfaqësojnë vlerën e gjelbër (GG) dhe dy të fundit përfaqësojnë vlerën blu (BB).
Ngjyrat CSS - Kode të shkurtra Hex
Kodi i shkurtër gjashtëkëndor i ngjyraveështë forma më e shkurtër e shënimit gjashtëshifror. Në këtë format, çdo shifër përsëritet për të prodhuar vlerën ekuivalente të ngjyrës me gjashtë shifra. Për shembull: # 0F0 bëhet # 00FF00.
Vlera heksadecimal mund të merret nga çdo softuer grafik si Adobe Photoshop, Core Draw, etj.
Çdo kod heksadecimal ngjyrash në CSS do të paraprihet nga një shenjë hash "#". Më poshtë janë shembuj të përdorimit të shënimit heksadecimal.
Ngjyrat CSS - Vlerat RGB
Vlera RGBështë kodi i ngjyrës, i cili vendoset duke përdorur veçorinë rgb (). Kjo pronë merr tre vlera, një për të kuqe, jeshile dhe blu. Vlera mund të jetë një numër i plotë, nga 0 në 255, ose një përqindje.
Shënim: Jo të gjithë shfletuesit mbështesin veçorinë e ngjyrave rgb (), kështu që nuk rekomandohet përdorimi i saj.
Më poshtë është një shembull që tregon shumë ngjyra duke përdorur vlerat RGB.
Gjenerator i kodit të ngjyrave
Ju mund të krijoni miliona kode ngjyrash duke përdorur shërbimin tonë.
Ngjyra të sigurta të shfletuesit
Më poshtë është një tabelë me 216 ngjyra që janë më të sigurtat dhe më të pavarura nga kompjuteri. Këto ngjyra CSS variojnë nga 000000 në FFFFFF heksadecimal. Ato janë të sigurta për t'u përdorur sepse sigurojnë që të gjithë kompjuterët të shfaqin saktë ngjyrat kur punojnë me një gamë ngjyrash 256.
Tabela e ngjyrave "të sigurta" të CSS | |||||
#000000 | #000033 | #000066 | #000099 | # 0000 CC | # 0000 FF |
#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 | # 3300 FF |
#333300 | #333333 | #333366 | #333399 | # 3333CC | # 3333FF |
#336600 | #336633 | #336666 | #336699 | # 3366CC | # 3366FF |
#339900 | #339933 | #339966 | #339999 | # 3399CC | # 3399FF |
# 33CC00 | # 33CC33 | # 33CC66 | # 33CC99 | # 33CCCC | # 33CCFF |
# 33 FF00 | # 33FF33 | # 33FF66 | # 33FF99 | # 33FFCC | # 33FFFF |
#660000 | #660033 | #660066 | #660099 | # 6600cc | # 6600 FF |
#663300 | #663333 | #663366 | #663399 | # 6633CC | # 6633FF |
#666600 | #666633 | #666666 | #666699 | # 6666CC | # 6666FF |
#669900 | #669933 | #669966 | #669999 | # 6699CC | # 6699FF |
# 66CC00 | # 66CC33 | # 66CC66 | # 66CC99 | # 66CCCC | # 66CCFF |
# 66 FF00 | # 66FF33 | # 66FF66 | # 66FF99 | # 66FFCC | # 66FFFF |
#990000 | #990033 | #990066 | #990099 | # 9900CC | # 9900 FF |
#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 |
Numrat heksadecimal përdoren për të vendosur ngjyrat. 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. Numrat më të mëdhenj se 15 në heksadecimal formohen duke kombinuar dy numra në një. Për shembull, 255 dhjetore është e barabartë me FF heksadecimal. Për të shmangur konfuzionin në përkufizimin e sistemit të numrave, simboli hash # vendoset përpara numrit heksadecimal, për shembull # 666999. Secila nga tre ngjyrat - e kuqe, jeshile dhe blu - mund të variojë nga 00 në FF. Kështu, emërtimi i ngjyrës ndahet në tre komponentë #rrggbb, ku dy karakteret e para shënojnë përbërësin e kuq të ngjyrës, dy të mesit - jeshile dhe dy të fundit - blu. Lejohet përdorimi i një forme të shkurtuar si #rgb, ku çdo karakter duhet të dyfishohet. Pra, hyrja # fe0 duhet të trajtohet si # ffee00.
Me emër
Internet Explorer | krom | Opera | Safari | Firefox | Android | iOS |
4.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Shfletuesit mbështesin disa ngjyra me emër. Tabela 1 tregon emrat, kodin heksadecimal, vlerat RGB, HSL dhe përshkrimin.
Emri | Ngjyrë | Kodi | RGB | Hsl | Përshkrim |
---|---|---|---|---|---|
të bardhë | #ffffff ose #fff | rgb (255,255,255) | hsl (0.0%, 100%) | E bardha | |
argjendi | # c0c0c0 | rgb (192,192,192) | hsl (0.0%, 75%) | Gri | |
gri | #808080 | rgb (128,128,128) | hsl (0.0%, 50%) | Gri e errët | |
e zezë | # 000000 ose # 000 | rgb (0,0,0) | hsl (0.0%, 0%) | E zezë | |
ngjyrë gështenjë | #800000 | rgb (128,0,0) | hsl (0,100%, 25%) | E kuqe e erret | |
e kuqe | # ff0000 ose # f00 | rgb (255,0,0) | hsl (0,100%, 50%) | E kuqe | |
portokalli | #ffa500 | rgb (255,165,0) | hsl (38.8,100%, 50%) | portokalli | |
e verdhe | # ffff00 ose # ff0 | rgb (255,255,0) | hsl (60,100%, 50%) | E verdhe | |
ulliri | #808000 | rgb (128,128,0) | hsl (60,100%, 25%) | Ulliri | |
gëlqere | # 00ff00 ose # 0f0 | rgb (0.255.0) | hsl (120,100%, 50%) | Jeshile e hapur | |
jeshile | #008000 | rgb (0.128.0) | hsl (120,100%, 25%) | E gjelbër | |
ujore | # 00ffff ose # 0ff | rgb (0,255,255) | hsl (180,100%, 50%) | Blu | |
blu | # 0000ff ose # 00f | rgb (0,0,255) | hsl (240,100%, 50%) | Blu | |
marina | #000080 | rgb (0,0,128) | hsl (240,100%, 25%) | Blu marine | |
ngjyrë kafe | #008080 | rgb (0.128.128) | hsl (180,100%, 25%) | BLU jeshile | |
fuchsia | # ff00ff ose # f0f | rgb (255,0,255) | hsl (300,100%, 50%) | Rozë | |
vjollcë | #800080 | rgb (128,0,128) | hsl (300,100%, 25%) | vjollce |
Me RGB
Internet Explorer | krom | Opera | Safari | Firefox | Android | iOS |
5.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Ju mund të përcaktoni ngjyrën duke përdorur vlerat dhjetore të përbërësve të kuq, jeshil dhe blu. Secili nga tre komponentët e ngjyrave merr një vlerë nga 0 në 255. Gjithashtu lejohet të vendoset ngjyra si përqindje, ndërsa 100% do t'i korrespondojë numrit 255. Së pari, specifikohet fjala kyçe rgb dhe më pas në kllapa, Komponentët e ngjyrave tregohen, të ndarë me presje, për shembull rgb (255 , 128, 128) ose rgb (100%, 50%, 50%).
RGBA
Internet Explorer | krom | Opera | Safari | Firefox | Android | iOS |
9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
Formati RGBA është i ngjashëm në sintaksë me RGB, por përfshin një kanal alfa që kontrollon transparencën e elementit. Një vlerë prej 0 korrespondon me transparencën e plotë, 1 me transparencën dhe një vlerë të ndërmjetme si 0.5 me gjysmëtransparencë.
RGBA u shtua në CSS3, kështu që vërtetimi i kodit CSS duhet të bëhet duke përdorur këtë version. Duhet të theksohet se standardi CSS3 është ende në zhvillim e sipër dhe disa veçori mund të ndryshojnë. Për shembull, një ngjyrë RGB e shtuar në vetinë e ngjyrës së sfondit vërtetohet, por një ngjyrë e shtuar në veçorinë e sfondit jo më. Në të njëjtën kohë, shfletuesit e kuptojnë saktë ngjyrën për të dy vetitë.
Hsl
Internet Explorer | krom | Opera | Safari | Firefox | Android | iOS |
9.0+ | 1.0+ | 9.6+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
Emri i formatit HSL është formuar nga një kombinim i shkronjave të para Hue (hue), Saturate (ngopje) dhe Lightness (lehtësi). Hue është vlera e një ngjyre në rrotën e ngjyrave (Fig. 1) dhe jepet në gradë. 0 ° është e kuqe, 120 ° është e gjelbër dhe 240 ° është blu. Vlera e nuancës mund të variojë nga 0 në 359.
Oriz. 1. Rrota me ngjyra
Ngopja është intensiteti i një ngjyre, i matur si përqindje nga 0% në 100%. Një vlerë prej 0% tregon pa ngjyrë dhe një nuancë gri, 100% është vlera maksimale e ngopjes.
Lehtësia përcakton se sa e ndritshme është ngjyra dhe tregohet si përqindje nga 0% në 100%. Vlerat e ulëta e bëjnë ngjyrën më të errët, dhe vlerat e larta të ndriçojnë, vlerat ekstreme prej 0% dhe 100% korrespondojnë me të zezën dhe të bardhën.
HSLA
Internet Explorer | krom | Opera | Safari | Firefox | Android | iOS |
9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
Formati HSLA është i ngjashëm në sintaksë me HSL, por përfshin një kanal alfa që përcakton transparencën e elementit. Një vlerë prej 0 korrespondon me transparencën e plotë, 1 me transparencën dhe një vlerë të ndërmjetme si 0.5 me gjysmëtransparencë.
Vlerat e ngjyrave në formatet RGBA, HSL dhe HSLA janë shtuar në CSS3, prandaj sigurohuni që të kontrolloni për vlefshmërinë e versionit kur përdorni këto formate.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
Paralajmërim
Të gjitha metodat për kapjen e një luani të listuara në faqe janë teorike dhe të bazuara në metoda llogaritëse. Autorët nuk garantojnë sigurinë tuaj kur i përdorni dhe mohojnë çdo përgjegjësi për rezultatin. Mos harroni, luani është një grabitqar dhe një kafshë e rrezikshme!
Rezultati i këtij shembulli është paraqitur në Fig. 2.
Oriz. 2. Ngjyrat në faqen e internetit
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
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
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 një dyshe. Pra, hyrja # f7O duhet të konsiderohet si # ff7700.
Shembull: Ngjyra HEX
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ë | vjollce | #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 | vjollce | # 8B00FF | 139 | 0 | 255 | |
E verdhe | E verdhe | # FFFF00 | 255 | 255 | 0 |
Kodet e ngjyrave (sfondi) sipas ngopjes dhe nuancës.