Kodet e shkronjave me ngjyra. Ngjyra në stile mund të specifikohet në mënyra të ndryshme: me vlerë heksadecimal, me emër, në format RGB, RGBA, HSL, HSLA

Numrat heksadecimal përdoren për të specifikuar 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ë sistemin heksadecimal formohen duke kombinuar dy numra në një. Për shembull, numri 255 në dhjetor korrespondon me numrin FF në heksadecimal. Për të shmangur konfuzionin në përcaktimin e sistemit të numrave, një simbol hash # vendoset përpara numrit heksadecimal, për shembull #666999. Secila nga tre ngjyrat - e kuqe, jeshile dhe blu - mund të marrë vlera nga 00 në FF. Kështu, simboli i ngjyrës ndahet në tre komponentë #rrggbb, ku dy simbolet e para tregojnë përbërësin e kuq të ngjyrës, dy të mesit - jeshile dhe dy të fundit - blu. Lejohet përdorimi i formës së shkurtuar #rgb, ku çdo karakter duhet të dyfishohet. Kështu, hyrja #fe0 duhet të konsiderohet si #ffee00.

Me emër

Shfletuesit mbështesin disa ngjyra me emrin e tyre. Në tabelë 1 tregon emrat, kodin heksadecimal, vlerat RGB, HSL dhe përshkrimin.

Duke përdorur RGB

Ju mund të përcaktoni ngjyrën duke përdorur vlerat e kuqe, jeshile dhe blu në terma dhjetorë. Secili nga tre komponentët e ngjyrave merr një vlerë nga 0 në 255. Gjithashtu lejohet të specifikohet ngjyra si përqindje, me 100% që korrespondon me numrin 255. Së pari, specifikoni fjalën kyçe rgb dhe më pas specifikoni përbërësit e ngjyrës në kllapa , të ndara me presje, për shembull rgb(255 , 128, 128) ose rgb (100%, 50%, 50%).

RGBA

Formati RGBA është i ngjashëm në sintaksë me RGB, por përfshin një kanal alfa që specifikon transparencën e elementit. Një vlerë prej 0 është plotësisht transparente, 1 është e errët dhe një vlerë e ndërmjetme si 0.5 është gjysmë transparente.

RGBA u shtua në CSS3, kështu që kodi CSS duhet të vërtetohet kundrejt këtij versioni. Duhet të theksohet se standardi CSS3 është ende në zhvillim dhe disa veçori mund të ndryshojnë. Për shembull, një ngjyrë në formatin RGB e shtuar në vetinë e ngjyrës së sfondit vërtetohet, por ajo e shtuar në veçorinë e sfondit nuk është më e vlefshme. Në të njëjtën kohë, shfletuesit e kuptojnë saktë ngjyrën për të dy vetitë.

HSL

Emri i formatit HSL rrjedh nga kombinimi i shkronjave të para Hue (hue), Saturate (ngopje) dhe Lightness (lehtësi). Hue është vlera e ngjyrës në rrotën e ngjyrave (Fig. 1) dhe jepet në gradë. 0° korrespondon me të kuqe, 120° me jeshile dhe 240° me blu. Vlera e nuancës mund të ndryshojë nga 0 në 359.

Oriz. 1. Rrota me ngjyra

Ngopja është intensiteti i një ngjyre dhe matet si përqindje nga 0% në 100%. Një vlerë prej 0% tregon mungesën e ngjyrës dhe një nuancë gri, 100% është vlera maksimale për ngopjen.

Lehtësia përcakton se sa e ndritshme është ngjyra dhe përcaktohet si përqindje nga 0% në 100%. Vlerat e ulëta e bëjnë ngjyrën më të errët, dhe vlerat e larta e bëjnë ngjyrën më të lehtë; vlerat ekstreme prej 0% dhe 100% korrespondojnë me bardh e zi.

HSLA

Formati HSLA është i ngjashëm në sintaksë me HSL, por përfshin një kanal alfa për të specifikuar transparencën e elementit. Një vlerë prej 0 është plotësisht transparente, 1 është e errët dhe një vlerë e ndërmjetme si 0.5 është gjysmë transparente.

Vlerat e ngjyrave RGBA, HSL dhe HSLA janë shtuar në CSS3, kështu që ju lutemi kontrolloni kodin tuaj 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 e kapjes së luanëve 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 rezultatet. Mos harroni, një luan ë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

Siç e dini, ngjyra mund të ndikojë në gjendjen e një personi: si mendore ashtu edhe fizike. Çdo ditë, ndërsa shfletoni faqet e internetit 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 vizitorit për të arritur qëllime të caktuara.

Kjo është për shkak të faktit se disa nuanca qetësohen, dhe disa, përkundrazi, eksitojnë. Më tej 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);
• Ngjyra 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. Meqenëse prodhuesit i pajisin produktet e tyre me karakteristika të ndryshme, në vitin 1996 u krijua një sistem i unifikuar i sintezës së ngjyrave të bazuar në RGB i quajtur sRGB, mbi të cilin Microsoft dhe HP punuan së bashku.

Paraqitja numerike e ngjyrës

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ë shënimin 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ë pak se 255, atëherë përftohen nuanca të ndryshme të kuqe, jeshile dhe blu. Më poshtë është një tabelë e gradimeve 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, e cila paraqet të gjitha nuancat ekzistuese, si dhe emrat e tyre dhe paraqitjet numerike ( në formë dhjetore dhe heksadecimale).

Mund ta shikoni 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 hijen e kërkuar 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 e ashtuquajtura paleta "e sigurt" e ngjyrave RGB, të cilat u përftuan nga llogaritjet matematikore.

Kur shfletuesi nuk mund të shfaqë saktë një ngjyrë, ai do të përpiqet të marrë diçka afër asaj që i nevojitet 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 mund të ketë qetësi në lidhje me shfaqjen e ngjyrave në faqet e faqes së tyre të internetit kur shikohet duke përdorur 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 teknologjik ende nuk qëndron ende), kur e përdorni, siç thonë ata, mund të flini të qetë.

Ngjyra e artë në modelin RGB

Fjala "ar" u përdor për herë të parë në fillim të shekullit të 14-të për të përshkruar ngjyrën e një elementi kimik të quajtur Aurum - ari. Në modelin RGB, ngjyra e artë përfaqësohet nga vlerat numerike të mëposhtme:

• RGB (255, 215, 0) - sistemi 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, janë bërë me gur sapuni dhe gur sapuni, të cilat kanë një nuancë bezhë. Në modelin RGB, ngjyra bezhë ka këto paraqitje numerike.

Fatkeqësisht, nuk është ende e mundur të shfaqen ndjesitë e shijes në faqen e internetit. Por kjo mund të kompensohet plotësisht me ndihmën e ngjyrave. Në fund të fundit, ngjyrat html ju lejojnë të shfaqni ndonjë nga miliona hije. Kështu që " lapsa me ngjyra Ka më shumë se shtatë në grupin e tij.

Skema e ngjyrave në html

Në html, ngjyra mund të specifikohet në disa formate:

1. Si vlerë heksadecimal - përdoret kodi i specifikuar në sistemin e numrave heksadecimal. Kode të tilla ngjyrash në html përbëhen nga tre çifte numrash heksadecimal. Çdo palë është përgjegjëse për ngopjen e hijes me ngjyrën e saj kryesore:

• Çifti i parë numerik është përgjegjës për ngjyrën e kuqe;
• Çifti i dytë është për përmbajtjen e ngjyrës së gjelbër;
• Kjo e fundit është për përmbajtjen e saj blu.

Një shenjë hash vendoset në fillim të kodit (përpara numrave). Ky është kodi heksadecimal i ngjyrave. Përveç numrave nga 1 deri në 9, ky sistem numrash përdor shkronja të alfabetit latin (A, B, C, D, E, F).

Për shembull, kodi i ngjyrës së bardhë në html do të duket si #FFFFFF:

2. Fjalë kyçe - HTML aktualisht mbështet rreth 147 fjalë kyçe. Por jo të gjitha këto fjalë janë unike. Disa prej tyre i referohen të njëjtës nuancë ngjyrash.

Ngjyra gri përfaqësohet nga dy fjalë kyçe: gri dhe gri. Kodi i tyre heksadecimal (HEX) jepet me të njëjtën vlerë #808080.

Shembull:

#808080

3. Në formatin RGB - ky kodim i ngjyrave në html bazohet në përdorimin e tre vlerave, të vendosura në intervalin nga 0 në 255. Secila prej tyre përcakton ngopjen e nuancës me një nga ngjyrat kryesore:

• R - e kuqe (e kuqe);
• G - jeshile (jeshile);
• B - blu (blu).

Numri i ngjyrës në formatin RGB është shkruar në formën e mëposhtme: rgb(0, 210, 100).

ngjyra e sfondit: rgb(100,186,43)

4. Në formatin RGBA - është një format i përmirësuar RGB, ku vlera e katërt specifikon transparencën e ngjyrës si fraksion dhjetor nga 0 në 1.

Shembull përdorimi:

ngjyra e sfondit: rgba (100,86,143,0.2)

ngjyra e sfondit: rgba(100,86,143,0.5)

ngjyra e sfondit: rgba(100,86,143,0.8)

ngjyra e sfondit: rgba (100,86,143,1)

Tabelat e ngjyrave HTML dhe gjeneruesit e ngjyrave

Me një gamë kaq të gjerë të formateve të vendosjes së ngjyrave, është e lehtë të ngatërrohesh. Prandaj, u shpik një tabelë e veçantë me ngjyra. Ai siguron 147 emra kyç të nuancave të ngjyrave me kodet e pajtueshmërisë në të gjitha standardet kryesore të ngjyrave. Për më tepër, çdo fushë është e pajisur me një shirit për zgjedhjen vizuale të ngjyrave. Një nga këto tabela është paraqitur në faqen e internetit colorscheme.ru:

Por edhe me këtë strukturim të përputhjes, zgjedhja e nuancës së duhur mund të jetë e vështirë. Dhe nuk është fakt që tabela e kodeve të ngjyrave do të përmbajë atë që ju nevojitet.

Për të kapërcyer këtë pengesë dhe për të bërë sa më të lehtë zgjedhjen e nuancës së duhur, janë zhvilluar shërbime interaktive në internet. Ndërfaqja e tyre e përdoruesit mund të ndryshojë pak nga njëra-tjetra.

Në faqen e internetit html-color-codes.info, gjeneratori i ngjyrave duket kështu:

Dhe brenda shërbimit color-picker.appsmaster.co, ky mjet zbatohet pak më ndryshe:

Ngopja e secilës ngjyrë në gjenerator vendoset duke përdorur rrëshqitës të veçantë. Vizualisht, hija shfaqet nga ngjyra e kornizës dhe drejtkëndëshit në anën e majtë. Në fund, 3 fusha shfaqin kodin e ngjyrave në formatet bazë.

Por gjeneratori i ngjyrave është i disponueshëm jo vetëm në faqet e specializuara. Pothuajse të gjithë redaktorët grafikë janë të pajisur me një mjet të ngjashëm. Për shembull, Photoshop:

Masat paraprake të sigurisë kur punoni me ngjyra

Dhe kjo ishte shumë kohë më parë, në epokën e kartave video që mbështetnin vetëm 256 ngjyra. Në ato kohë të largëta, sistemet operative mund të shfaqnin vetëm një numër të caktuar nuancash tetë-bitësh pa shtrembërim.

Pastaj u zhvillua një tabelë e madhe e ngjyrave të sigurta. Ai specifikoi 216 nuanca që mund të shfaqeshin pa shtrembërim në asnjë nga shfletuesit e asaj kohe. Dhe sot e kësaj dite kjo " dorëshkrim i madh» është ende në dispozicion në disa burime:

Në ditët e sotme gjithçka ka ndryshuar. Prandaj, të gjitha rregullat e sigurisë kur punoni me ngjyra në html anulohen plotësisht. Në fund të fundit, pajisja moderne e kompjuterit mbështet më shumë se 16 milionë nuanca të ndryshme. Dhe 216 ngjyra të sigurta janë zhytur në harresë.

Këto të dhëna vërtetohen plotësisht nga statistikat. Duke gjykuar nga ajo, në vitin 2014, vetëm 0.5% e përdoruesve kanë kompjuterë që mbështesin vetëm 256 nuanca.

Bazat e harmonisë së ngjyrave

Jo të gjithë ne jemi të pajisur me një ndjenjë harmonike natyrore shijeje. Prandaj, zgjedhja e ngjyrës së duhur mund të jetë një sfidë e vërtetë. Por, lavdërimi i qoftë shkencës, ajo madje arriti të përshkruajë harmoninë e ngjyrave në formën e disa skemave. Të gjitha ato bazohen në përdorimin e një rrote ngjyrash. Skemat për përzgjedhjen harmonike të ngjyrave në html.

Për faqet html, ngjyrat tregohen kryesisht në sistemin heksadecimal. Për ta bërë këtë, përdoren dy lloje të regjistrimit të kodit - të plotë ose të shkurtuar. Për të treguar saktë ngjyrën html të plotë, duhet të shkruani gjashtë karaktere (numra dhe/ose shkronja angleze) pas shenjës hash, për shembull, e zeza shkruhet kështu: #000000. Stenografia për specifikimin e ngjyrave html përbëhet nga një hash dhe tre numra dhe/ose shkronja prapa tij. Në këtë rast, ky lloj stoku mund të përdoret vetëm nëse regjistrimi i plotë i një ngjyre të caktuar përbëhet nga simbole identike pas shenjës hash. Për shembull, e njëjta ngjyrë e zezë mund të shkruhet kështu: #000. Ju mund të specifikoni ngjyrat html duke përdorur karaktere të mëdha dhe të vogla, pasi ato nuk janë të ndjeshme ndaj shkronjave të vogla.

Çdo karakter i shkruar pas "#" korrespondon me një proporcion të caktuar të kuqe, jeshile dhe blu. Nga ana tjetër, të gjithë monitorët përbëhen nga një numër i madh pikselësh (pika mikroskopike), secila prej të cilave përfshin 3 të ashtuquajturat "elektrik dore" (burime drite): të kuqe, jeshile dhe blu. Më pas, duke rregulluar intensitetin e dritës së emetuar nga këto "elektrikë dore", monitori shfaq ngjyrën që na nevojitet.

Duke kombinuar intensitetin e emetimit të dritës së kuqe, blu dhe jeshile (nga 0 në 256), monitorët mund të shfaqin 16,000,000 nuanca të ndryshme.

Gjithashtu, ngjyrat për faqet e internetit mund të tregohen verbalisht ose në kodin RGB.

Sot me gojë mund të shkruhen 147 ngjyra. Është e rëndësishme të dini se disa emra të ndryshëm mund të nënkuptojnë të njëjtat ngjyra, për shembull Gri dhe Gri janë ngjyra gri (#808080).

Ngjyra të sigurta për faqet e internetit.

Jo çdo monitor dhe shfletues mund të shfaqë saktë të gjitha 16 milionë ngjyrat html.

Nëse, për shembull, hasni në një ngjyrë që shfletuesi nuk mund ta shfaqë saktë, atëherë:

1. Shfletuesi e zëvendëson atë me atë që është më i ngjashëm me të dhe mund të riprodhohet me sukses;
2. Për të shfaqur saktë, shfletuesi mund të përziejë disa ngjyra dhe të riprodhojë rezultatin.

Për të siguruar që dalja në çdo shfletues dhe në çdo monitor është ngjyra që keni specifikuar në kod, rekomandohet të përdorni "Safe Colors". Ato u përcaktuan jo me dorë ose nga dëshira e dikujt tjetër, por matematikisht. Ekzistojnë 216 ngjyra të tilla 100% të sigurta për dokumentet HTML. Dhe megjithëse teknologjitë e sotme kanë arritur në pikën ku monitorët dhe shfletuesit modernë njohin miliona nuanca, ne rekomandojmë përdorimin e këtyre ngjyrave të sigurta për të garantuar paraqitjen e ngjyrave.

Kjo tabelë përfshin 216 kode ngjyrash të sigurta html. Çdo ngjyrë ka një vlerë në RGB për specifikimin e ngjyrës në redaktuesit grafikë dhe HEX për specifikimin e ngjyrës në faqet html.

Kodet e ngjyrave në CSS përdoren për të specifikuar ngjyrat. Në mënyrë tipike, kodet e ngjyrave ose vlerat e ngjyrave përdoren për të vendosur ngjyrën ose për ngjyrën e planit të parë të një elementi (p.sh. ngjyra e tekstit, ngjyra e lidhjes) ose ngjyra e sfondit të 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ë specifikoni 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 Hex

Kodi heksadecimal i ngjyraveështë një paraqitje gjashtëshifrore e ngjyrës. 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ë një formë më e shkurtër e shënimit me gjashtë karaktere. Në këtë format, çdo shifër përsëritet për të prodhuar një vlerë ekuivalente ngjyrash 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ënimeve heksadecimal.

Ngjyrat CSS - Vlerat RGB

Vlera RGBështë një kod ngjyrash që vendoset duke përdorur vetinë 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 vetinë 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ë.

Ngjyrat e sigurta të shfletuesit

Më poshtë është një tabelë me 216 ngjyra që janë më të sigurtat dhe të pavarura nga kompjuteri. Këto ngjyra në CSS variojnë nga 000000 në kodin heksadecimal FFFFFF. Ato janë të sigurta për t'u përdorur sepse sigurojnë që të gjithë kompjuterët të shfaqin ngjyrat në mënyrë korrekte kur punojnë me paletën e ngjyrave 256.