RGB jeshile. Ngjyra në stile mund të vendoset në mënyra të ndryshme: me vlerë heksadecimal, me emër, në format RGB, RGBA, HSL, HSLA

Vlad Merzheviç

Në HTML, ngjyra përcaktohet në një nga dy mënyrat: duke përdorur një kod heksadecimal dhe me emrin e disa ngjyrave. Metoda më e përdorur bazohet në sistemin heksadecimal, si më universal.

Ngjyra heksadecimal

HTML përdor numra heksadecimal për të specifikuar ngjyrat. Sistemi heksadecimal, ndryshe nga sistemi dhjetor, bazohet, siç nënkupton edhe 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. Në tabelë. 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, numri 255 në dhjetor korrespondon me numrin FF në heksadecimal.

Për të shmangur konfuzionin në përkufizimin e sistemit të numrave, numri heksadecimal paraprihet nga shenja e paundit #, për shembull #aa69cc. Në këtë rast, rasti nuk ka rëndësi, kështu që lejohet të shkruhet #F0F0F0 ose #f0f0f0.

Një ngjyrë tipike e përdorur në HTML është si më poshtë.

Këtu, ngjyra e sfondit të faqes së internetit është vendosur në #FA8E47. Shenja e paundit # përpara një numri do të thotë se është në heksadecimal. Dy shifrat e para (FA) përcaktojnë përbërësin e kuq të ngjyrës, shifrat e treta në të katërt (8E) përbërësin e gjelbër dhe dy shifrat e fundit (47) përbërësin blu. Rezultati përfundimtar është kjo ngjyrë.

FA

+

8E

+

47

=

FA8E47

Secila nga tre ngjyrat - e kuqe, jeshile dhe blu - mund të marrë vlera nga 00 në FF, e cila përfundimisht formon 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 - add), në të cilin shtimi i të tre komponentëve formon të bardhën.

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ë do të merret një nuancë gri. Sa më i lartë numri, aq më e lehtë është ngjyra dhe vlerat ndryshojnë nga #000000 (e zezë) në #FFFFFF (e bardhë).
• Një ngjyrë e kuqe e ndezur formohet nëse komponenti i kuq është bërë maksimal (FF), dhe pjesa tjetër e përbërësve vendoset në zero. Ngjyra me vlerën #FF0000 është nuanca më e kuqe e mundshme. E njëjta gjë është e vërtetë për të gjelbër (#00FF00) dhe blu (#0000FF).
• E verdha (#FFFF00) përftohet duke përzier të kuqe me të gjelbër. Kjo shihet qartë në rrotën e ngjyrave (Fig. 6.1), e cila paraqet ngjyrat kryesore (e kuqe, jeshile, blu) dhe plotësuese ose plotësuese. Këto përfshijnë të verdhën, cianin dhe vjollcën (të quajtura gjithashtu purpurtë). Në përgjithësi, çdo ngjyrë mund të merret duke përzier ngjyrat ngjitur me të. Pra, ciani (#00FFFF) përftohet duke kombinuar blu dhe jeshile.

Oriz. 6.1. Rrethi me ngjyra

Ngjyrat e bazuara në vlerat heksadecimal nuk duhet të zgjidhen në mënyrë empirike. Për këtë qëllim, është i përshtatshëm një redaktues grafik që mund të punojë me modele të ndryshme ngjyrash, si Adobe Photoshop. Në fig. 6.2 tregon një dritare për zgjedhjen e një ngjyre në këtë program, rreshti rrethon vlerën heksadecimal që rezulton të ngjyrës aktuale. Mund ta kopjoni dhe ngjisni në kodin tuaj.

Oriz. 6.2. Zgjedhësi i ngjyrave në Photoshop

Ngjyrat e Uebit

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 ka të bëjë me mënyrën se si paraqiten grafikët kur shfletuesi punon me paletën e tij dhe nuk mund të tregojë një ngjyrë që nuk është në paletën e tij. Në këtë rast, ngjyra zëvendësohet nga një kombinim pikselësh të ngjyrave të tjera, afër saj, që imitojnë atë të dhënë. Në mënyrë që ngjyra të mbetet e njëjtë në shfletues të ndryshëm, u prezantua një gamë e të ashtuquajturave ngjyra të uebit. Ngjyrat e uebit janë ngjyra të tilla, për secilin përbërës të të cilave - e kuqe, jeshile dhe blu - një nga gjashtë vlerat është vendosur - 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC), 255 (FF). Vlera heksadecimal e këtij komponenti tregohet në kllapa. Numri i përgjithshëm i ngjyrave nga të gjitha kombinimet e mundshme jep 6x6x6 - 216 ngjyra. Një shembull i ngjyrës së uebit ë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ë përmirësimit të cilësisë së monitorëve dhe zgjerimit të aftësive të tyre.

Ngjyrat sipas emrit

Për të mos mbajtur mend një koleksion numrash, në vend të tyre mund të përdorni emrat e ngjyrave të përdorura zakonisht. Në tabelë. 6.3 tregon emrat e emrave të ngjyrave të njohura.

Tab. 6.3. Emrat e disa ngjyrave

Emri i ngjyrës	Ngjyrë	Përshkrim	Vlera Hex
e zezë		E zezë	#000000
blu		Blu	#0000FF
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 si e specifikoni ngjyrën - me emrin e saj ose duke përdorur numra heksadecimal. Në efektin e tyre, këto metoda janë të barabarta. Shembulli 6-1 tregon se si të vendosni ngjyrat e sfondit dhe tekstit të një faqeje 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 shumëllojshmëri, vlera e atributit të tekstit vendoset në një numër heksadecimal dhe bgcolor vendoset në fjalën kyçe të rezervuar teal .

>>Menaxhimi i ngjyrave

Vlerat heksadecimale të ngjyrave RGB

Metodat për përshkrimin dhe përpunimin e ngjyrave ndryshojnë nga njëra-tjetra në atë për çfarë përfaqësimi përfundimtar synohen. Le të krahasojmë, për shembull, paraqitjet e ngjyrave për poligrafinë dhe për monitorët e kompjuterit. Në rastin e parë, baza është të bardhë 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ë ngjyrave japin letër të bardhë. Nëse u shtojmë të zezën, marrim CMYK- një mënyrë për të përcjellë ngjyrën kur ngjyra e dëshiruar fitohet duke zbritur ngjyrat që mungojnë nga e bardha.

Në rastin e dytë, baza është 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, ne marrim një ngjyrë të zezë të pastër të ekranit dhe cilado nga ngjyrat e kërkuara jepet nga raporti i secilës prej tre ngjyrave. Në këtë rast do të marrim RGB- Metoda e transferimit të ngjyrave. Ngjyrat primare mund të kenë kuptim nga 0 përpara 255 , ose nga 0% përpara 100% , ose mund të përfaqësohet si një vlerë heksadecimal. Në figurën më poshtë mund të shihni rezultatet e përzierjes së ngjyrave kryesore.

Sistemi heksadecimal i numrave, ndryshe nga sistemi i numrave dhjetorë, nuk ka dhjetë shifra në serinë e tij të shifrave, 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 serinë e shifrave pas 9 letra nga A përpara F, kështu që rreshti do të duket kështu -

0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F.

Për të kthyer numrat nga një sistem numrash në një tjetër dhe anasjelltas, përdorni kalkulatorin më poshtë. Vlera maksimale këtu mund të jetë FF - 255 .

Në këtë rast, ngjyra jepet nga tre numra heksadecimal, secili i përbërë 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 që variojnë nga 00 përpara FF(nga 0 në 255). Për shembull: ngjyra jeshile jepet si #00FF00, e kuqe - si #FF0000, blu - si #0000FF, 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.

E KUQE		E GJELBËR		blu
	0 1 2 3 4 5 6 7 8 9 a b c d e f	0 1 2 3 4 5 6 7 8 9 a b c d e f	0 1 2 3 4 5 6 7 8 9 a b c d e f	0 1 2 3 4 5 6 7 8 9 a b c d e f	0 1 2 3 4 5 6 7 8 9 a b c d e f
...Kliko këtu

Shembuj të disa vlerave heksadecimal të ngjyrave RGB: 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		#0000FF

Përcaktimi i një ngjyre me vargje fjalë për fjalë

Për lehtësinë e përdorimit, disa ngjyrave dhe kombinimeve të tyre iu dhanë emra që njihen nga të gjithë shfletuesit dhe u bë e mundur vendosja e shumë prej tyre me emër. Tabela më poshtë tregon 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ë
	Alice blu		e bardhë antike		Aqua		akuamarinë
	Azure		Bezhë		Bisque		blanchedalmond
	Vjollca blu		Kafe		Burlywood		Kadet blu
	chartreuse		Cokollate		Koral		lule misri blu
	Mëndafshi i misrit		Crimson		cian		BLU e erret
	të errët		shkop i artë i errët		gri e erret		jeshile të errët
	Darkkaki		Darkmagenta		E errët e gjelbër		portokalli e errët
	Darkorchid		e kuqe e erret		salmon i zi		E gjelbër e detit të errët
	blu e errët		gri e errët		bruz i errët		Vjollca e errët
	Pink i thellë		qielli i thellë blu		E zbehtë		mashtrues blu
	Tulla zjarri		E bardhë me lule		jeshile pylli		Fuschia
	Gainsboro		fantazmë e bardhë		Ari		Shkopi i Artë
	Gri		E verdhë e gjelbër		Mjaltë		rozë e nxehtë
	E kuqe indiane		Lejla		Fildishi		Kaki
	Livando		Skuqja e livandës		Limonshifon		blu e hapur
	koral i lehtë		ngjyrë e lehtë		e verdhë e çelur e zbehtë		jeshile e hapur
	gri e çelët		Rozë e lehtë		salmon i lehtë		E gjelbër e detit
	Blu e lehtë		gri e çelët		blu çeliku e lehtë		e verdhe e lehte
	gëlqere		Limegreen		liri		Magenta
	ngjyrë gështenjë		akuamarinë e mesme		blu mesatare		Orkide mesatare
	Vjollcë mesatare		E gjelbër e mesme		Blu me pllakë mesatare		Mediumspringgreen
	bruz mesatar		e kuqe mesatare vjollce		blu e mesnatës		krem menteje
	mistirozë		Navajo e bardhë		Marina		plakë
	Ulliri		Ullidrabi		portokalli e kuqe		Orkide
	palegoldenrod		Palegreen		paleturuz		i zbehtë vjollcë
	kamxhik papaja		Peachpuff		Peruja		Rozë
	Kumbulla		Pluhur blu		Trëndafili		BLU Mbretërore
	shalë kafe		jeshile deti		Guaskë deti		Siena
	Argjendi		qiell blu		Pllaka blu		Slategray
	borë		Pranvera		çeliku blu		Tan
	Teal		gjembak		Domate		Bruz
	vjollce		Gruri		Tym i bardhë		jeshile e verdhë

Lista e shkronjave të vogla me emra ngjyrash është mjaft e gjerë dhe më se e mjaftueshme. Nëse dëshironi të vendosni një ngjyrë të sfondit aq të pazakontë sa të mos ketë as një emër, mund të përdorni një vlerë heksadecimal.

Përdorimi i një zgjedhësi të sigurt të ngjyrave

Fatkeqësisht, në platforma të ndryshme, me cilësime të ndryshme të sistemit, riprodhimi i saktë i ngjyrave është një problem. Puna ë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 dhe zëvendësuar ngjyrat vetë. Si rezultat, ndonjëherë përdoruesi nuk sheh plotësisht atë që webmaster dëshironte t'i tregonte atij. Rruga për të dalë nga kjo situatë u gjet në përdorimin e një palete, çdo ngjyrë e së cilës garantohet të jepet e njëjtë nga të gjithë shfletuesit në platforma të ndryshme. Kjo e ashtuquajtura e garantuar paleta, e njohur edhe si 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ë mundshmet 216 kombinimet e tyre.

FFFFFF 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

pamje	Kodi	pamje	Kodi	pamje	Kodi	pamje	Kodi	pamje	Kodi	pamje	Kodi

Ngjyra 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.

Vendosni ngjyrën sipas emrit

Shfletuesit mbështesin specifikimin e ngjyrave të caktuara për elementët me emër. Në këtë tabelë, disa nga fjalët kyçe (emrat e ngjyrave në anglisht) përdoren për të vendosur vetitë e ngjyrave, kodin RGB, kodin heksadecimal (HEX) dhe kodin HSL.

Tab. 1. Emrat e ngjyrave, kodi i tyre RGB, HEX dhe HSL.

Emri	Ngjyrë	RGB	HEX	HSL	Përshkrim
të bardhë		rgb(255, 255, 255)	#fffff 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%)	vjollce

Ky është një shembull i përdorimit të emrave të ngjyrave, emrat e ngjyrave janë marrë nga tabela e zgjeruar.

Ja se si funksionon ky kod:

Vendosja e ngjyrës me 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 ngjyrat e kuqe, jeshile dhe blu, mund të merrni disa milionë nuanca. Të gjitha kombinimet e mundshme ruhen në memorien e kompjuterëve.

Shkoni te pika.

Ky format përdor shënimin rgb(r, g, b) për të vendosur vetitë, ku r, g, b janë tre kanalet për secilën ngjyrë (e kuqe, jeshile, blu). Vlerat për çdo kanal vendosen në rangun nga 0 në 255.

Shembull kodi.

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ë klasën div.rgb, është e nevojshme në mënyrë që blloqet e krijuara nga etiketa

Artikujt kryesorë të lidhur