Cod de culoare roz moale. Text alb pe fundal albastru

folosind atributul de stil folosind proprietatea de fundal și alocarea valorilor la rgb (255, 0, 0), rgb (0, 255, 0) și rgb (0, 0, 255). Adică, facem alternativ un canal cât mai saturat posibil, iar canalele rămase nu sunt folosite pentru sinteză, deoarece valoarea lor este zero.

Încercați să editați acest exemplu și să specificați valorile dvs., de exemplu rgb (100, 100, 100).

Setarea culorii folosind RGBA

În CSS3 a apărut instrument nou pentru lucrul cu culoarea - format RGBA. Poate fi numită o evoluție a modelului RGB, dar cu adăugarea unui nou canal - A sau canal alfa. Acest canal stabilește transparența culorii. Valorile sale sunt setate în intervalul de la 0 la 1. O valoare egală cu 0 îi corespunde transparență deplină, 1 - opacitate completă (culoarea va fi aceeași cu cea specificată în primii trei canale RGB) și valori intermediare, cum ar fi 0,4 sau 0,6 - transluciditate în grade diferite.

Cod simplu.

Asa functioneaza:

Acest cod în felul său prezentare vizuală este similar cu următorul, care utilizează modelul RGB pentru a seta valoarea culorii:

Iată rezultatul:

Valoarea canalului alfa egală cu zero face orice culoare invizibilă - absolut transparentă, valoarea egal cu unu traduce culoarea în codul RGB neschimbat. Proprietatea rgba (255,0,0,1.0) arată rgb (255, 0, 0) roșu.

Valoare hexazecimală (cod HEX)

În viața de zi cu zi, folosim sistemul zecimal de numărare. Originile sale sunt foarte simple - avem zece degete pe mâini și cândva era convenabil să numărăm pe degete în viață. Dacă în sistem zecimal zece cifre: de la 0 la 9, iar numărul 10 este deja următoarea cifră, apoi în sistemul de notație hexazecimală există 16 cifre, iar următoarea cifră va fi numărul 16.

Pentru a indica codurile de culoare ca cifre hexazecimale, se folosesc cifre zecimale obișnuite de la 0 la 9 și pentru a indica cifrele de la 10 la 15, se folosesc litere latine de la A la F, adică (0, 1, 2, 3, 4, 5 , 6, 7, 8, 9, A, B, C, D, E, F). Pentru claritate, să rezumam acest lucru într-un tabel:

Pentru a scrie numere hexazecimale mai mari decât F (15 în sistemul zecimal), ca și în sistemul zecimal, se folosește și unirea a două cifre, dar deja hexazecimală, ceea ce este evident. Așadar, pentru înregistrare numar decimal 255 in sistem hexazecimal Se folosește notația FF.

Sistemul hexazecimal este mai ușor de înțeles pentru computer, procesează mai rapid valorile specificate de valoarea hexazecimală.

Pentru a indica o culoare hexazecimală, înainte valoare numerică trebuie să puneți un semn „#”, exemplu: # FFC0CB. Valoarea # FFC0CB în sine constă din trei cifre hexazecimale FF, C0 și CB. Sensul acestei notații este același cu setarea culorii la format RGB(rgb (r, g, b)) - fiecare cifră hexazecimală din codul HEX indică saturația culorii în canalul său RGB.

Acest cod va afișa următoarele elemente:

Și iată o poză cu rezultatul din secțiunea „Setarea culorii cu folosind RGB„pe această pagină de mai sus.

Fig. 1. Culori în RGB.

Vedem că culorile sunt identice.

Este permisă o notație prescurtată a codului HEX de culoare: un număr din 6 cifre poate fi scris ca un număr din 3 cifre. Acest lucru este valabil numai atunci când două cifre din valoarea culorii unui canal sunt repetate.

Adică, următoarea abreviere a notației este acceptabilă:

De exemplu, culoarea # ff22aa poate fi scrisă astfel - # f2a, sau culoarea # 44aa22 poate fi specificată ca # 4a2.

Setarea culorii folosind HSL

În CSS3 a apărut format nou pentru a indica culoarea.

HSL este o abreviere a cuvintelor englezești Hue, Saturate și Lightness.

Nuanța în HSL este o valoare a culorii pe o roată specială de culoare (Figura 2) și este specificată în grade. Dacă tragem analogii cu Model RGB, apoi 0 ° corespunde roșului, 120 ° corespunde verdelui și 240 ° corespunde albastrului.

Valoarea nuanței va varia de la 0 la 359.

Figura 2. Roata de culori HSL.

A doua valoare este saturația (Saturate) este setată în procente. La 100% saturație, culoarea este maximă „suculentă”, pe măsură ce indicatorul de saturație se deplasează la 0%, culoarea devine din ce în ce mai ternă și se rostogolește în gri.

A treia valoare, Luminozitatea, este, de asemenea, setată ca procent. Cu cât procentul este mai mare, cu atât culoarea va fi mai strălucitoare. Valorile extreme de 0% și 100% vor însemna culorile negre (fără lumină) și, respectiv, alb (explozit), indiferent de culoarea din roata de culori a fost selectată în primul canal. Valoarea optimă a luminozității culorii poate fi considerată egală cu 50%.

Setarea culorii cu HSLA

HSLA este legat de HSL, la fel ca RGB cu RGBA. V format HSLA Ca și în RGBA, a fost adăugat un canal alfa, care este responsabil pentru transparența culorii.

Culoarea HSL este mai ușor de citit. Putem spune că este intuitiv. De exemplu, un cod hsl (120,60%, 50%) poate reprezenta culoarea finală dacă există o imagine a roții de culori HSL în memorie. Nu același lucru se poate spune despre formatele RGB și HEX, codul de culoare specificat în aceste formate devine de înțeles abia după ce este vizualizat pe monitor.

Noile formate în CSS3 (HSL, HSLA și RGBA) funcționează în browsere începând de la versiunile: IE 9.0, Opera 10.0 Firefox 3.0. Cum fac ca stilurile să funcționeze pe browsere mai vechi?

Somebloсk (culoare de fundal: rgb (255,50,50); culoare de fundal: rgba (255,50,50,0.85))

Când utilizați acest cod în browsere mai vechi, culoarea de fundal pentru clasa .somebloсk, deși nu va folosi canalul alfa, va fi afișată în format RGB.

26.02.15 8.9K

După cum știți, culoarea poate afecta starea unei persoane: atât mentală, cât și fizică. În fiecare zi, privind site-urile de pe Internet, ochii evaluează milioane de culori și nuanțe. Un web designer care este familiarizat cu psihologia culorii poate manipula starea de spirit a unui vizitator pentru a atinge orice scop.

Acest lucru se datorează faptului că unele nuanțe sunt liniștitoare, în timp ce altele, dimpotrivă, sunt incitante. Mai departe va fi modul în care culoarea este sintetizată și afișată folosind tehnologia computerizată.

RGB este un model de culoare care reprezintă o metodă de obținere a tuturor culorilor și nuanțelor acestora prin amestecarea în diverse proporții a trei componente principale, care sunt:

• Culoare rosie ( roșu);
• Culoarea verde ( Verde);
• culoarea albastra ( Albastru).

De aici provine numele abreviat RGB. Aceste culori au fost alese ca fiind principale dintr-un motiv: motivul este fiziologia retinei ochiului uman și modul în care le percepe:

Modelul RGB rămâne cel mai popular astăzi și este folosit pentru a reproduce culorile pe ecranele televizorului și monitoare de calculator... Din moment ce producatorii isi doteaza produsele caracteristici diferite, în 1996 a fost creat un singur sistem sinteza de culori bazată pe RGB numită sRGB, la care am lucrat împreună Microsoftși HP.

Reprezentarea numerică a culorilor

După cum am menționat mai devreme, culorile RGB sunt formate prin amestecarea culorilor principale. Pentru a descrie intensitatea fiecăruia dintre ele s-a adoptat o schemă în care culoarea este reprezentată de intervalul 0-255 (8 biți), care în sistemul hexazecimal corespunde cu 00-FF.

Adică, culorile primare vor arăta astfel:

• Roșu - RGB (255,0,0);
• Verde - RGB (0.255.0);
• Albastru - RGB (0,0,255);

Dacă intensitatea culorii capătă valori mai mici de 255, atunci se obțin diferite nuanțe de roșu, verde și albastru. Mai jos este un tabel cu gradația lor, precum și valorile hexazecimale ale fiecăreia dintre nuanțe:

Tabelele de culori RGB

Desigur, pe lângă gradațiile culorilor primare, există și cele mixte, iar numărul lor este destul de mare. Prin urmare, a fost creat un tabel de culori RGB, în care sunt prezentate toate nuanțele existente, precum și numele și reprezentările numerice ale acestora ( zecimal și hexazecimal).

Vă puteți familiariza cu el aici. Aceasta masa face viața mult mai ușoară web designerilor, deoarece în câteva secunde puteți găsi nuanța dorită și aflați reprezentarea numerică a acesteia.

Paletă de culori RGB sigură

Cu toate acestea, la un moment dat a apărut o problemă de afișare a culorilor în diferite browsere, iar pentru a o rezolva, un așa-zis „sigur” Paleta RGB culori care au fost deduse prin calcule matematice.

Când browserul nu poate afișa corect o culoare, încearcă să se apropie de cea dorită amestecând culorile adiacente și, cel mai probabil, rezultatul va fi complet inacceptabil:

Utilizarea codurilor Culori RGB din această paletă, un dezvoltator web nu se poate teme să afișeze culori pe paginile site-ului său atunci când este vizualizat folosind browsere diferite, pe platforme diferiteși monitoare. Deși pe acest moment masa culori sigureîși pierde relevanța ( progresul tehnic tot nu sta pe loc), când îl folosești, poți, după cum se spune, să dormi bine.

Culoare aurie în modelul RGB

Pentru prima dată, cuvântul „aur” a fost folosit la începutul secolului al XIV-lea pentru a descrie culoarea unui element chimic numit Aurum - aur. În RGB, aurul este reprezentat de următoarele valori numerice:

• RGB (255, 215, 0) - sistem zecimal;
• HEX # FFD700 - sistem hexazecimal.

Culoare bej în modelul RGB

Culoarea bej durează destul loc semnificativîn istorie, chiar dacă nu este cea mai expresivă. Multe monumente culturale, în special sculpturi antice, au fost realizate din piatră de sălatură și piatră de sălatură, care au o tentă bej. În RGB, bejul are următoarele reprezentări numerice.

Numerele hexazecimale sunt folosite pentru a seta culorile. Sistemul hexazecimal, spre deosebire de sistemul zecimal, se bazează, după cum sugerează și numele, pe numărul 16. Numerele vor fi după cum urmează: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 , A, B, C , D, E, F. Cifrele de la 10 la 15 au fost înlocuite cu litere latine... Numerele mai mari de 15 în hexazecimal sunt formate prin combinarea a două numere într-unul singur. De exemplu, 255 zecimale este egal cu FF hexazecimal. Pentru a evita confuzia în definiția sistemului de numere, înainte număr hexazecimal utilizați simbolul hash #, de exemplu # 666999. Fiecare dintre cele trei culori - roșu, verde și albastru - poate varia de la 00 la FF. Astfel, desemnarea culorii este împărțită în trei componente #rrggbb, unde primele două caractere marchează componenta roșie a culorii, cele două din mijloc - verde, iar ultimele două - albastru. Este permisă utilizarea unei forme prescurtate precum #rgb, unde fiecare caracter ar trebui să fie dublat. Deci, intrarea # fe0 ar trebui tratată ca #ffee00.

Dupa nume

Internet Explorer	Crom	Operă	Safari	Firefox	Android	iOS
4.0+	1.0+	3.5+	1.3+	1.0+	1.0+	1.0+

Browserele acceptă unele culori după nume. Masa 1 arată numele, codul hexazecimal, RGB, valorile HSL și descrierea.

Tab. 1. Denumiri de culori

Nume	Culoare	Codul	RGB	Hsl	Descriere
alb		#ffffff sau #fff	rgb (255.255.255)	hsl (0,0%, 100%)	alb
argint		# c0c0c0	rgb (192.192.192)	hsl (0,0%, 75%)	Gri
gri		#808080	rgb (128.128.128)	hsl (0,0%, 50%)	Gri inchis
negru		# 000000 sau # 000	rgb (0,0,0)	hsl (0,0%, 0%)	Negru
maro		#800000	rgb (128,0,0)	hsl (0,100%, 25%)	Roșu-închis
roșu		# ff0000 sau # f00	rgb (255,0,0)	hsl (0,100%, 50%)	roșu
portocale		# ffa500	rgb (255.165,0)	hsl (38,8.100%, 50%)	portocale
galben		# ffff00 sau # ff0	rgb (255.255.0)	hsl (60.100%, 50%)	Galben
măsline		#808000	rgb (128.128.0)	hsl (60.100%, 25%)	măsline
lămâie verde		# 00ff00 sau # 0f0	rgb (0,255,0)	hsl (120.100%, 50%)	Verde deschis
verde		#008000	rgb (0,128,0)	hsl (120.100%, 25%)	Verde
acva		# 00ffff sau # 0ff	rgb (0.255.255)	hsl (180.100%, 50%)	Albastru
albastru		# 0000ff sau # 00f	rgb (0,0,255)	hsl (240.100%, 50%)	Albastru
marina		#000080	rgb (0,0,128)	hsl (240.100%, 25%)	albastru marin
teal		#008080	rgb (0.128.128)	hsl (180.100%, 25%)	Albastru verde
fucsie		# ff00ff sau # f0f	rgb (255,0,255)	hsl (300.100%, 50%)	Roz
Violet		#800080	rgb (128,0,128)	hsl (300.100%, 25%)	violet

Cu RGB

Internet Explorer	Crom	Operă	Safari	Firefox	Android	iOS
5.0+	1.0+	3.5+	1.3+	1.0+	1.0+	1.0+

Puteți determina culoarea folosind valorile zecimale ale componentelor roșii, verzi și albastre. Fiecare dintre cele trei componente de culoare ia o valoare de la 0 la 255. De asemenea, este permisă setarea culorii ca procent, în timp ce 100% va corespunde numărului 255. În primul rând, cuvânt cheie rgb, urmat de componentele de culoare în paranteze, separate prin virgule, de exemplu rgb (255, 128, 128) sau rgb (100%, 50%, 50%).

RGBA

Internet Explorer	Crom	Operă	Safari	Firefox	Android	iOS
9.0+	1.0+	10.0+	3.1+	3.0+	2.1+	2.0+

Formatul RGBA este similar ca sintaxă cu RGB, dar include un canal alfa care controlează transparența elementului. O valoare de 0 corespunde transparenței totale, 1 opacității și o valoare intermediară, cum ar fi 0,5, semi-transparenței.

RGBA a fost adăugat în CSS3, așa că validarea codului CSS ar trebui făcută folosind această versiune. Trebuie remarcat faptul că standardul CSS3 este încă în curs de dezvoltare și unele caracteristici se pot schimba. De exemplu, o culoare RGB adăugată la proprietatea culoare de fundal este validată, dar o culoare adăugată la proprietatea de fundal nu mai. În același timp, browserele înțeleg destul de corect culoarea pentru ambele proprietăți.

Hsl

Internet Explorer	Crom	Operă	Safari	Firefox	Android	iOS
9.0+	1.0+	9.6+	3.1+	3.0+	2.1+	2.0+

Numele formatului HSL este format dintr-o combinație a primelor litere Hue (nuanță), Saturate (saturație) și Lightness (luminozitate). Nuanța este valoarea unei culori pe roata culorilor (Fig. 1) și este dată în grade. 0 ° este roșu, 120 ° este verde și 240 ° este albastru. Valoarea nuanței poate varia de la 0 la 359.

Orez. 1. Roata de culori

Saturația este intensitatea unei culori, măsurată ca procent de la 0% la 100%. O valoare de 0% indică nicio culoare și o nuanță de gri, 100% valoare maximă saturare.

Luminozitatea stabilește cât de strălucitoare este culoarea și este indicată ca procent de la 0% la 100%. Valorile scăzute fac culoarea mai închisă, iar valorile ridicate se deschid, valorile extreme de 0% și 100% corespund alb-negru.

HSLA

Internet Explorer	Crom	Operă	Safari	Firefox	Android	iOS
9.0+	1.0+	10.0+	3.1+	3.0+	2.1+	2.0+

Formatul HSLA este similar ca sintaxă cu HSL, dar include un canal alfa care stabilește transparența elementului. O valoare de 0 corespunde transparenței totale, 1 opacității și o valoare intermediară, cum ar fi 0,5, semi-transparenței.

Valorile culorii în formate RGBA, HSL și HSLA au fost adăugate în CSS3, așa că asigurați-vă că verificați validitatea versiunii atunci când utilizați aceste formate.

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

Avertizare

Toate metodele de prindere a unui leu enumerate pe site sunt teoretice și se bazează pe metode de calcul... Autorii nu vă garantează siguranța atunci când le utilizați și își declină orice responsabilitate pentru rezultat. Amintiți-vă, leul este un prădător și un animal periculos!

Rezultat acest exemplu prezentată în fig. 2.

Orez. 2. Culori pe pagina web