Kodi i ngjyrës rozë e butë. Tekst i bardhë në sfond blu

duke përdorur atributin stil duke përdorur veçorinë e sfondit dhe duke caktuar vlerat për rgb (255, 0, 0), rgb (0, 255, 0) dhe rgb (0, 0, 255). Kjo do të thotë, ne e bëjmë në mënyrë alternative një kanal sa më të ngopur, dhe kanalet e mbetura nuk përdoren për sintezë, pasi vlera e tyre është zero.

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

Në CSS3 u shfaq instrument i ri për të punuar me ngjyra - format 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ë rangun nga 0 në 1. Një vlerë e barabartë me 0 korrespondon transparencë të plotë, 1 - errësirë ​​e plotë (ngjyra do të jetë e njëjtë me atë të specifikuar në tre të parat Kanalet RGB), dhe vlerat e ndërmjetme, si 0.4 ose 0.6 - translucencë në shkallë të ndryshme.

Shembull i kodit.

Kështu funksionon:

Ky kod në mënyrën e vet prezantimi vizualështë e ngjashme me sa vijon, e cila përdor modelin RGB për të vendosur vlerën e ngjyrës:

Ja rezultati:

Vlera e kanalit alfa e barabartë me zero e bën çdo ngjyrë të padukshme - absolutisht transparente, vlerën e barabartë me një përkthen ngjyrën në kodin RGB të pandryshuar. 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ë sistemi dhjetor dhjetë shifra: nga 0 në 9, dhe numri 10 është tashmë shifra tjetër, atëherë në sistemin e shënimeve 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 rekord numër dhjetor 255 inç sistemi heksadecimal Përdoret shënimi 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ë treguar një ngjyrë heksadecimal, përpara vlerë numerike ju duhet të vendosni 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 në Formati 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 duke përdorur 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

Në CSS3 u shfaq format i ri për të treguar ngjyrën.

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ëse bëjmë analogji me Modeli RGB, atëherë 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. V Formati HSLA Ashtu si në RGBA, është shtuar një kanal alfa, i cili ë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.

26.02.15 8.9K

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. Me tutje do të jetë si sintetizohet dhe shfaqet ngjyra 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... Meqenëse prodhuesit i dhurojnë produktet e tyre karakteristika të ndryshme, në vitin 1996 u krijua një sistem sinteza e ngjyrave bazuar në RGB e quajtur sRGB, mbi të cilën kemi punuar së bashku Microsoft dhe HP.

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 të shfaqjes së ngjyrave në shfletues të ndryshëm, dhe për ta zgjidhur atë, një i ashtuquajtur "i sigurt". Paleta RGB ngjyrat që janë nxjerrë 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:

Përdorimi i kodeve Ngjyrat RGB nga kjo paletë, një zhvillues ueb nuk mund të ketë frikë nga shfaqja e ngjyrave në faqet e faqes së tij kur shikohet duke përdorur shfletues të ndryshëm, në platforma të ndryshme dhe monitoron. Edhe pse në ky moment tabela ngjyra të sigurta 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ë merr mjaft vend 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. Shifrat 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ërcaktimin e sistemit të numrave, më parë numër heksadecimal përdorni simbolin hash #, 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.

Tab. 1. Emrat e ngjyrave

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 në përqindje, ndërsa 100% do t'i korrespondojë numrit 255. Së pari, fjalë kyçe rgb, e ndjekur nga përbërësit e ngjyrave në kllapa, të ndara 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 asnjë ngjyrë dhe një nuancë gri, 100% vlera maksimale ngopje.

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 e kapjes së një luani të listuara në faqe janë teorike dhe të bazuara në metodat 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 ky shembull treguar në fig. 2.

Oriz. 2. Ngjyrat në faqen e internetit