Ngjyra e bardhë në html. student HTML

duke përdorur atributin stil duke përdorur veçorinë e sfondit dhe duke caktuar vlerat 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

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 shifra të zakonshme dhjetore nga 0 në 9 dhe për të treguar shifrat nga 10 në 15, përdoren shkronja latine nga A në F, 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.

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.

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, 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

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

HEX / HTML

Ngjyra HEX nuk është asgjë më shumë se përfaqësimi heksadecimal RGB.

Ngjyrat përfaqësohen si tre grupe të shifrave heksadecimal, ku secili grup është përgjegjës për ngjyrën e vet: # 112233, ku 11 është e kuqe, 22 është e gjelbër, 33 është blu. Të gjitha vlerat duhet të jenë midis 00 dhe FF.

Në shumë aplikacione, lejohet një formë e shkurtuar e shënimit për ngjyrat heksadecimal. Nëse secili nga tre grupet përmban të njëjtat karaktere, për shembull # 112233, atëherë ato mund të shkruhen si # 123.

1. h1 (ngjyra: # ff0000;) / * e kuqe * /
2. h2 (ngjyra: # 00ff00;) / * jeshile * /
3. h3 (ngjyra: # 0000ff;) / * blu * /
4. h4 (ngjyra: # 00f;) / * e njëjta blu, stenografi * /

RGB

Hapësira e ngjyrave RGB (E kuqe, jeshile, blu) përbëhet nga të gjitha ngjyrat e mundshme që mund të merren duke përzier të kuqe, jeshile dhe blu. Ky model është i popullarizuar në fotografi, televizion dhe grafikë kompjuterike.

Vlerat RGB përcaktohen si një numër i plotë nga 0 në 255. Për shembull, rgb (0,0,255) shfaqet si blu sepse parametri blu është vendosur në vlerën e tij më të lartë (255) dhe pjesa tjetër është vendosur në 0.

Disa aplikacione (veçanërisht shfletuesit e uebit) mbështesin shkrimin e përqindjes së vlerave RGB (0% deri në 100%).

1. h1 (ngjyra: rgb (255, 0, 0);) / * e kuqe * /
2. h2 (ngjyra: rgb (0, 255, 0);) / * jeshile * /
3. h3 (ngjyra: rgb (0, 0, 255);) / * blu * /
4. h4 (ngjyra: rgb (0%, 0%, 100%);) / * e njëjta blu, shkrimi i përqindjes * /

Vlerat e ngjyrave RGB mbështeten në të gjithë shfletuesit kryesorë.

RGBA

Kohët e fundit, shfletuesit modernë kanë mësuar të punojnë me modelin e ngjyrave RGBA - një shtrirje RGB me mbështetje për një kanal alfa që përcakton errësirën e një objekti.

Një vlerë ngjyrash RGBA specifikohet si: rgba (e kuqe, jeshile, blu, alfa). Alfa është një numër që varion nga 0.0 (plotësisht transparent) në 1.0 (plotësisht i errët).

1. h1 (ngjyra: rgb (0, 0, 255);) / * blu në RGB normale * /
2. h2 (ngjyra: rgba (0, 0, 255, 1);) / * e njëjta blu në RGBA, sepse opaciteti: 100% * /
3. h3 (ngjyra: rgba (0, 0, 255, 0.5);) / * errësirë: 50% * /
4. h4 (ngjyra: rgba (0, 0, 255, .155);) / * errësirë: 15.5% * /
5. h5 (ngjyra: rgba (0, 0, 255, 0);) / * plotësisht transparente * /

RGBA mbështetet në IE9 +, Firefox 3+, Chrome, Safari dhe Opera 10+.

Hsl

Modeli i ngjyrave HSL është një paraqitje cilindrike e modelit RGB. HSL përfaqëson ngjyrat në një mënyrë më intuitive dhe më të kuptueshme sesa RGB tipike. Modeli përdoret shpesh në aplikacionet grafike, në përzgjedhësit e ngjyrave dhe për analizën e imazhit.

HSL qëndron për Hue, Saturation, Lightness / Luminance, për të mos ngatërruar me shkëlqimin.

Hue vendos pozicionin e ngjyrës në rrotën e ngjyrave (nga 0 në 360). Ngopja është një përqindje e ngopjes (0% deri në 100%). Lehtësia është përqindja e butësisë (0% deri në 100%).

1. h1 (ngjyra: hsl (120, 100%, 50%);) / * jeshile * /
2. h2 (ngjyra: hsl (120, 100%, 75%);) / * jeshile e lehtë * /
3. h3 (ngjyra: hsl (120, 100%, 25%);) / * jeshile e errët * /
4. h4 (ngjyra: hsl (120, 60%, 70%);) / * jeshile pastel * /

HSL mbështetet në IE9 +, Firefox, Chrome, Safari dhe Opera 10+.

HSLA

Ngjashëm me RGB / RGBA, HSL ka një modalitet HSLA me një kanal alfa për të treguar opacitetin e një objekti.

Vlera e ngjyrës HSLA jepet si: hsla (ngjyrë, ngopje, lehtësi, alfa). Alfa është një numër që varion nga 0.0 (plotësisht transparent) në 1.0 (plotësisht i errët).

1. h1 (ngjyra: hsl (120, 100%, 50%);) / * jeshile në HSL normale * /
2. h2 (ngjyra: hsla (120, 100%, 50%, 1);) / * e njëjta jeshile në HSLA, sepse opaciteti: 100% * /
3. h3 (ngjyra: hsla (120, 100%, 50%, 0,5);) / * errësirë: 50% * /
4. h4 (ngjyra: hsla (120, 100%, 50%, 0,155);) / * errësirë: 15,5% * /
5. h5 (ngjyra: hsla (120, 100%, 50%, 0);) / * plotësisht transparente * /

CMYK

Modeli i ngjyrave CMYK shpesh shoqërohet me printimin dhe printimin me ngjyra. CMYK (në krahasim me RGB) është një model zbritës, që do të thotë se vlerat më të larta shoqërohen me ngjyra më të errëta.

Ngjyrat përcaktohen nga raporti i Cyan, Magenta, Yellow, me shtimin e ngjyrës së zezë (Key / e zezëK).

Secili nga numrat që përcaktojnë një ngjyrë në CMYK përfaqëson përqindjen e bojës së një ngjyre të caktuar që përbën një kombinim ngjyrash, ose më mirë, madhësinë e një pike raster të shfaqur në një fotoseter në një film të një ngjyre të caktuar (ose drejtpërdrejt në një pllakë printimi në rastin e CTP).

Për shembull, për të marrë ngjyrën PANTONE 7526, përzieni 9 pjesë cyan, 83 magenta, 100 të verdhë dhe 46 të zezë. Kjo mund të tregohet si më poshtë: (9,83,100,46). Ndonjëherë ata përdorin përcaktime të tilla: C9M83Y100K46, ose (9%, 83%, 100%, 46%), ose (0.09 / 0.83 / 1.0 / 0.46).

HSB / HSV

HSB (i njohur gjithashtu si HSV) është i ngjashëm me HSL, por ato janë dy modele me ngjyra të ndryshme. Të dyja bazohen në gjeometrinë cilindrike, por HSB / HSV bazohet në modelin "hexcone", ndërsa HSL bazohet në modelin "bi-hexcone". Artistët shpesh preferojnë të përdorin këtë model, përgjithësisht pranohet që pajisja HSB / HSV është më afër perceptimit natyror të ngjyrave. Në veçanti, modeli i ngjyrave HSB përdoret në Adobe Photoshop.

HSB / HSV qëndron për Hue, Saturation, Brightness / Value.

Hue vendos pozicionin e ngjyrës në rrotën e ngjyrave (nga 0 në 360). Ngopja është një përqindje e ngopjes (0% deri në 100%). Shkëlqimi është përqindja e shkëlqimit (0% deri në 100%).

XYZ

Modeli i ngjyrave XYZ (CIE 1931 XYZ) është një hapësirë ​​thjesht matematikore. Ndryshe nga RGB, CMYK dhe modelet e tjera, në XYZ, përbërësit kryesorë janë "imagjinarë", domethënë nuk mund të lidhni X, Y dhe Z me asnjë grup ngjyrash për t'u përzier. XYZ është modeli kryesor për pothuajse të gjitha modelet e tjera të ngjyrave të përdorura në fushat teknike.

LAB

Modeli i ngjyrave LAB (CIELAB, "CIE 1976 L * a * b *") llogaritet nga hapësira CIE XYZ. Gjatë zhvillimit të Lab, qëllimi ishte krijimi i një hapësire ngjyrash në të cilën ndryshimi i ngjyrës do të jetë më linear nga pikëpamja e perceptimit njerëzor (krahasuar me XYZ), domethënë, në mënyrë që i njëjti ndryshim në vlerat e koordinatave të ngjyrave në rajone të ndryshme të hapësirës së ngjyrave prodhojnë të njëjtën ndjesi ndryshimi të ngjyrës.