Siç e dini, ngjyra mund të ndikojë në gjendjen e një personi: si mendore ashtu edhe fizike. Çdo ditë, duke parë faqet në internet, sytë vlerësojnë miliona ngjyra dhe nuanca. Një dizajner ueb i cili është i njohur me psikologjinë e ngjyrave mund të manipulojë disponimin e një vizitori për të arritur çdo qëllim.
Kjo për faktin se disa nuanca janë qetësuese, ndërsa të tjerat, përkundrazi, janë emocionuese. Tjetra, ne do të flasim për mënyrën se si ngjyra sintetizohet dhe shfaqet duke përdorur teknologjinë kompjuterike.
RGB është një model ngjyrash që përfaqëson një metodë për të marrë të gjitha ngjyrat dhe nuancat e tyre duke përzier në përmasa të ndryshme tre komponentë kryesorë, të cilët janë:
- Ngjyra e kuqe ( E kuqe);
- ngjyra jeshile ( E gjelbër);
- ngjyre blu ( Blu).
Nga këtu vjen emri i shkurtuar RGB. Këto ngjyra u zgjodhën si kryesoret për një arsye: arsyeja është fiziologjia e retinës së syrit të njeriut dhe si i percepton ato:
Modeli RGB mbetet më i popullarizuari sot dhe përdoret për të riprodhuar ngjyrat në ekranet e TV dhe monitorët e kompjuterit. Ndërsa prodhuesit i pajisin produktet e tyre me karakteristika të ndryshme, në vitin 1996 u krijua një sistem i unifikuar i sintezës së ngjyrave i bazuar në RGB i quajtur sRGB, për të cilin Microsoft dhe HP bashkëpunuan.
Paraqitja numerike e ngjyrave
Siç u përmend më herët, ngjyrat RGB formohen duke përzier ngjyrat kryesore. Për të përshkruar intensitetin e secilit prej tyre, u miratua një skemë në të cilën ngjyra përfaqësohet nga diapazoni 0-255 (8 bit), i cili në sistemin heksadecimal korrespondon me 00-FF.
Kjo do të thotë, ngjyrat kryesore do të duken kështu:
- E kuqe - RGB (255,0,0);
- E gjelbër - RGB (0.255.0);
- Blu - RGB (0,0,255);
Nëse intensiteti i ngjyrës merr vlera më të vogla se 255, atëherë fitohen nuanca të ndryshme të kuqe, jeshile dhe blu. Më poshtë është një tabelë e gradimit të tyre, si dhe vlerat heksadecimal të secilës prej nuancave:
Tabelat me ngjyra RGB
Natyrisht, përveç gradimeve të ngjyrave kryesore, ka edhe të përziera dhe numri i tyre është mjaft i madh. Prandaj, u krijua një tabelë e ngjyrave RGB, në të cilën paraqiten të gjitha nuancat ekzistuese, si dhe emrat e tyre dhe paraqitjet numerike ( dhjetore dhe heksadecimal).
Ju mund të njiheni me të këtu. Kjo tabelë e bën jetën shumë më të lehtë për dizajnerët e uebit, pasi në pak sekonda mund të gjeni nuancën e dëshiruar dhe të zbuloni paraqitjen e saj numerike.
Paleta e sigurt e ngjyrave RGB
Sidoqoftë, në një moment kishte një problem me shfaqjen e ngjyrave në shfletues të ndryshëm, dhe për ta zgjidhur atë, u përpilua një paletë e ashtuquajtur "e sigurt" e ngjyrave RGB, të cilat u konkluduan nga llogaritjet matematikore.
Kur shfletuesi nuk mund të shfaqë saktë një ngjyrë, ai përpiqet të afrohet me atë të dëshiruar duke përzier ngjyrat ngjitur dhe ka shumë të ngjarë që rezultati të jetë plotësisht i papranueshëm:
Duke përdorur kodet e ngjyrave RGB nga kjo paletë, një zhvillues ueb nuk mund të ketë frikë nga shfaqja e ngjyrave në faqet e faqeve të tyre kur shikohet me shfletues, platforma dhe monitorë të ndryshëm. Edhe pse për momentin tabela e ngjyrave të sigurta po humbet rëndësinë e saj ( progresi teknik ende nuk qëndron ende), kur e përdorni, mund të flini mirë, siç thonë ata.
Ngjyra e artë në modelin RGB
Për herë të parë fjala "ar" u përdor në fillim të shekullit XIV për të përshkruar ngjyrën e një elementi kimik të quajtur Aurum - ari. Në RGB, ari përfaqësohet nga vlerat numerike të mëposhtme:
- RGB (255, 215, 0) - sistem dhjetor;
- HEX # FFD700 - sistem heksadecimal.
Ngjyra bezhe ne modelin RGB
Ngjyra bezhë zë një vend mjaft domethënës në histori, edhe nëse nuk është më ekspresive. Shumë monumente kulture, veçanërisht skulpturat antike, ishin bërë me gur sapuni dhe gur sapuni, të cilat kanë një nuancë bezhë. Në RGB, ngjyrë bezhë ka paraqitjet numerike të mëposhtme.
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%) | Vjollcë |
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 në përqindje, ndërsa 100% do t'i korrespondojë numrit 255. Së pari, tregohet 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
Nje paralajmerim
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
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 |
>> 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 ngjyrat 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. Pastaj, 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 |
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 ka dhjetë shifra në sistemin dhjetor: 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 shifrat dhjetore të zakonshme nga 0 në 9 dhe shkronjat latine nga A në F përdoren për të treguar shifrat nga 10 në 15, 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.
