Cod alb. Culoarea în stiluri poate fi specificată în diferite moduri: prin valoare hexazecimală, după nume, în format RGB, RGBA, HSL, HSLA

Vlad Merjevici

În HTML, culoarea este specificată în unul din două moduri: folosind codul hexazecimal și prin numele anumitor culori. Metoda bazată pe sistemul numeric hexazecimal este utilizată în mod predominant, fiind cea mai universală.

Culori hexazecimale

HTML folosește numere hexazecimale pentru a specifica 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. Numerele de la 10 la 15 sunt înlocuite cu litere latine. În tabel 6.1 arată corespondența dintre numerele zecimale și hexazecimale.

Numerele mai mari de 15 în sistemul hexazecimal sunt formate prin combinarea a două numere într-unul singur (Tabelul 6.2). De exemplu, numărul 255 în zecimală corespunde numărului FF în hexazecimal.

Pentru a evita confuzia în definirea sistemului numeric, un număr hexazecimal este precedat de un simbol hash #, de exemplu #aa69cc. În acest caz, cazul nu contează, așa că este permis să scrieți #F0F0F0 sau #f0f0f0.

O culoare tipică folosită în HTML arată astfel.

Aici culoarea de fundal a paginii web este setată la #FA8E47. Simbolul hash # în fața unui număr înseamnă că este hexazecimal. Primele două cifre (FA) definesc componenta roșie a culorii, a treia până la a patra cifre (8E) definesc componenta verde, iar ultimele două cifre (47) definesc componenta albastră. Rezultatul final va fi această culoare.

Fiecare dintre cele trei culori - roșu, verde și albastru - poate lua valori de la 00 la FF, rezultând un total de 256 de nuanțe. Astfel, numărul total de culori poate fi 256x256x256 = 16.777.216 combinații. Un model de culoare bazat pe componente roșu, verde și albastru se numește RGB (roșu, verde, albastru; roșu, verde, albastru). Acest model este aditiv (din add - add), în care adăugarea tuturor celor trei componente formează culoarea albă.

Pentru a facilita navigarea în culorile hexazecimale, luați în considerare câteva reguli.

• Dacă valorile componentelor de culoare sunt aceleași (de exemplu: #D6D6D6), atunci rezultatul va fi o nuanță gri. Cu cât numărul este mai mare, cu atât culoarea este mai deschisă, cu valori cuprinse între #000000 (negru) și #FFFFFF (alb).
• O culoare roșie aprinsă se formează dacă componenta roșie este maximă (FF) și componentele rămase sunt setate la zero. O culoare cu o valoare de #FF0000 este cea mai roșie nuanță roșie posibilă. Același lucru este valabil și pentru verde (#00FF00) și albastru (#0000FF).
• Galbenul (#FFFF00) este realizat prin amestecarea roșului cu verdele. Aceasta este clar vizibilă pe roata de culori (Fig. 6.1), care prezintă culorile primare (roșu, verde, albastru) și altele complementare sau suplimentare. Acestea includ galben, cyan și violet (numit și magenta). În general, orice culoare poate fi obținută prin amestecarea culorilor în apropierea acesteia. Astfel, cyan (#00FFFF) se obține prin combinarea albastrului și verdelui.

Orez. 6.1. Cercul de culoare

Culorile bazate pe valori hexazecimale nu trebuie să fie selectate empiric. În acest scop, este potrivit un editor grafic care poate lucra cu diferite modele de culoare, de exemplu, Adobe Photoshop. În fig. Figura 6.2 prezintă fereastra pentru selectarea unei culori în acest program, valoarea hexazecimală rezultată a culorii curente este conturată cu o linie. Îl puteți copia și lipi în codul dvs.

Orez. 6.2. Fereastra pentru alegerea culorilor în Photoshop

Culori web

Dacă setați calitatea de redare a culorii a monitorului la 8 biți (256 de culori), atunci aceeași culoare poate fi afișată diferit în browsere diferite. Acest lucru se datorează modului în care sunt afișate graficele, când browserul funcționează cu propria paletă și nu poate afișa o culoare care nu este în paleta sa. În acest caz, culoarea este înlocuită cu o combinație de pixeli de alte culori, apropiate acesteia, care o imită pe cea dată. Pentru a ne asigura că culoarea rămâne aceeași în diferite browsere, a fost introdusă o paletă de așa-numite culori web. Culorile web sunt acele culori pentru care fiecare componentă - roșu, verde și albastru - este setată la una dintre cele șase valori - 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC) , 255 (FF). Valoarea hexazecimală a acestei componente este indicată între paranteze. Numărul total de culori din toate combinațiile posibile dă 6x6x6 - 216 culori. Un exemplu de culoare web este #33FF66.

Caracteristica principală a culorii web este că apare la fel în toate browserele. În prezent, relevanța culorilor web este foarte mică datorită îmbunătățirii calității monitoarelor și extinderii capacităților acestora.

Culori după nume

Pentru a evita să vă amintiți un set de numere, puteți utiliza în schimb numele culorilor utilizate în mod obișnuit. În tabel 6.3 arată numele numelor de culori populare.

Nu contează dacă specificați o culoare după numele ei sau folosind numere hexazecimale. Aceste metode sunt egale ca efect. Exemplul 6.1 arată cum să setați culorile de fundal și text ale unei pagini web.

Exemplul 6.1. Culoare de fundal și text

Exemplu de text

În acest exemplu, culoarea de fundal este setată folosind atributul bgcolor al etichetei , și culoarea textului prin atributul text. Pentru varietate, atributul text este setat la un număr hexazecimal, iar atributul bgcolor este setat la cuvântul cheie rezervat teal .

În HTML, culoarea poate fi specificată în trei moduri:

Setarea unei culori în HTML după numele acesteia

Unele culori pot fi specificate după numele lor, folosind numele culorii în engleză ca valoare. Cele mai comune cuvinte cheie: negru, alb, roșu, verde, albastru etc.:

Culoarea textului – roșu

Cele mai populare culori ale standardului World Wide Web Consortium (W3C):

Exemplu de utilizare a diferitelor nume de culori:

Exemplu: specificarea unei culori după numele acesteia

• Incearca-l tu insuti "

Antet pe fundal roșu

Antet pe fundal portocaliu

Îndreptare pe fundal de var

Text alb pe fundal albastru

Antet pe fundal roșu

Antet pe fundal portocaliu

Îndreptare pe fundal de var

Text alb pe fundal albastru

Specificarea culorii folosind RGB

Când se afișează culori diferite pe un monitor, paleta RGB este folosită ca bază. Orice culoare se obține prin amestecarea a trei culori de bază: R - roșu, G - verde, B - albastru. Luminozitatea fiecărei culori este dată de un octet și, prin urmare, poate lua valori de la 0 la 255. De exemplu, RGB(255,0,0) este afișat ca roșu, deoarece roșu este setat la cea mai mare valoare (255) și restul sunt setate la 0 Puteți seta și culoarea ca procent. Fiecare parametru indică nivelul de luminozitate al culorii corespunzătoare. De exemplu: valorile rgb(127, 255, 127) și rgb(50%, 100%, 50%) vor seta aceeași culoare verde mediu:

Exemplu: specificarea culorii folosind RGB

• Incearca-l tu insuti "

rgb(127, 255, 127)

rgb(50%, 100%, 50%)

rgb(127, 255, 127)

rgb(50%, 100%, 50%)

Setați culoarea după valoarea hexazecimală

Valori R G B poate fi specificat și folosind valori hexazecimale (HEX) de culoare sub forma: #RRGGBB unde RR (roșu), GG (verde) și BB (albastru) sunt valori hexazecimale de la 00 la FF (la fel ca zecimalul 0-255). ). Sistemul hexazecimal, spre deosebire de sistemul zecimal, se bazează, după cum sugerează și numele, pe numărul 16. Sistemul hexazecimal folosește următoarele semne: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Aici numerele de la 10 la 15 sunt înlocuite cu litere latine. Numerele mai mari de 15 în sistemul hexazecimal sunt reprezentate prin combinarea a două caractere într-o singură valoare. De exemplu, cel mai mare număr 255 în zecimală corespunde celei mai mari valori FF în hexazecimal. Spre deosebire de sistemul zecimal, un număr hexazecimal este precedat de un simbol hash. # , de exemplu, #FF0000 este afișat ca roșu, deoarece roșul este setat la cea mai mare valoare (FF) și restul culorilor sunt setate la valoarea minimă (00). Semne după simbolul hash # Puteți introduce atât litere mari, cât și litere mici. Sistemul hexazecimal vă permite să utilizați forma prescurtată #rgb, unde fiecare caracter este echivalent cu dublu. Astfel, intrarea #f7O ar trebui considerată ca #ff7700.

Exemplu: Culoare HEX

• Incearca-l tu insuti "

roșu: #FF0000

verde: #00FF00

albastru: #0000FF

roșu: #FF0000

verde: #00FF00

albastru: #0000FF

roșu+verde=galben: #FFFF00

roșu+albastru=violet: #FF00FF

verde+albastru=cian: #00FFFF

Lista culorilor comune (nume, HEX și RGB):

Coduri de culoare (fond) după saturație și nuanță.

Culoarea în CSS poate fi setată în diferite moduri:

• dupa nume,
• prin valoare hexazecimală,
• în formatele RGB și RGBA,
• în formatele HSL și HSLA.

Setați culoarea după nume

Browserele acceptă specificarea unor culori pentru elemente după nume. Acest tabel conține câteva cuvinte cheie (nume de culori în limba engleză) utilizate pentru a specifica proprietățile culorii, codul RGB, codul hexazecimal (HEX) și codul HSL.

Acesta este un exemplu de utilizare a numelor de culori, numele culorilor sunt preluate din tabelul extins.

Iată cum funcționează acest cod:

Setarea culorii folosind RGB

RGB este un model de culoare aditiv. În limba engleză plus- adaos. RGB este o abreviere a cuvintelor englezești: Red, Green, Blue - red, green, blue). Din aceasta rezultă clar că în modelul RGB culorile sunt sintetizate prin adăugarea a trei culori (roșu, verde, albastru) în cantități diferite.

Amestecând culorile roșu, verde și albastru puteți obține câteva milioane de nuanțe. Toate combinațiile posibile sunt stocate în memoria computerului.

Treci la subiect.

Pentru a seta proprietăți în acest format, utilizați notația rgb(r, g, b), unde r, g, b sunt cele trei canale pentru fiecare culoare (roșu, verde, albastru). Valorile pentru fiecare canal sunt setate în intervalul de la 0 la 255.

Exemplu de cod.

Pentru a clarifica totul, iată un exemplu de cod:

Iată cum ar trebui să funcționeze acest exemplu:

Explicații de exemplu.

La începutul paginii creăm clasa div.rgb, este necesară pentru blocurile create de etichetă

au fost afișate la dimensiunea necesară: 240px cu 40px. Atribuim proprietății line-height o valoare de 40px, adică egală cu înălțimea blocului, acest lucru vă va permite să afișați text în bloc

la centrul vertical. Centram textul pe orizontala folosind regula ( text-align: center ;).

Apoi, în cod setăm culoarea de fundal a blocului

folosind atributul style, folosind proprietatea de fundal și alocarea de valori pentru 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 propriile valori, de exemplu rgb(100, 100, 100) .

Setarea culorii folosind RGBA

CSS3 are un nou instrument pentru lucrul cu culoarea - formatul RGBA. Poate fi numită o evoluție a modelului RGB, dar cu adăugarea unui nou canal - canalul A sau alfa. Acest canal stabilește transparența culorii. Valorile sale sunt setate în intervalul de la 0 la 1. O valoare de 0 corespunde transparenței totale, 1 - opacității complete (culoarea va fi aceeași cu cea specificată în primele trei canale RGB) și valorilor intermediare ​​cum ar fi 0,4 sau 0,6 - transluciditate în grade diferite.

Exemplu de cod.

Iată cum va funcționa:

Acest cod este vizual similar cu următorul, care utilizează modelul RGB pentru a specifica o valoare de culoare:

Iată rezultatul lui:

O valoare a canalului alfa egală cu zero face orice culoare invizibilă - absolut transparentă o valoare egală cu unu traduce culoarea în codul RGB fără modificări; Proprietatea rgba(255,0,0,1.0) arată culoarea roșie rgb(255, 0, 0) .

După valoare hexazecimală (cod HEX)

În viața de zi cu zi, folosim sistemul de numărare zecimală. Originile sale sunt foarte simple - avem zece degete pe mâini și să numărăm pe degete a fost convenabil în viață. Dacă sistemul zecimal are zece cifre: de la 0 la 9, iar numărul 10 este următoarea cifră, atunci sistemul numeric hexazecimal are 16 cifre, iar următoarea cifră este numărul 16.

Pentru a indica codurile de culoare, cifrele zecimale obișnuite de la 0 la 9 sunt folosite ca cifre hexazecimale, iar literele latine de la A la F sunt folosite pentru a indica numerele de la 10 la 15, adică (0, 1, 2, 3, 4, 5 , 6, 7, 8, 9, A, B, C, D, E, F). Pentru claritate, să punem asta într-un tabel:

Pentru a scrie numere hexazecimale mai mari decât F (15 în sistemul zecimal), ca și în sistemul zecimal, se folosesc și combinația de două cifre, dar deja hexazecimală, ceea ce este evident. Astfel, pentru a scrie numărul zecimal 255 în notație hexazecimală, utilizați notația FF.

Sistemul hexazecimal este mai ușor de înțeles de computer și procesează mai rapid valorile stabilite de valoarea hexazecimală.

Pentru a specifica o culoare în hexazecimal, precedați valoarea numerică cu semnul „#”, exemplu: #FFC0CB. Valoarea #FFC0CB în sine constă din trei cifre hexazecimale FF, C0 și CB. Semnificația acestei intrări este aceeași cu setarea culorii în format RGB (rgb(r, g, b)) - fiecare cifră hexazecimală din codul HEX indică saturația culorii în canalul său al modelului RGB.

#FF0000

#00FF00

#0000FF

Acest cod va afișa următoarele elemente:

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

Fig.1. Culori în RGB.

Vedem că culorile sunt identice.

Este permisă o notație scurtă a codului de culoare HEX: 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 este acceptabilă:

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

Setarea culorii folosind HSL

CSS3 are un nou format pentru specificarea culorilor.

Formatul HSL este o abreviere pentru cuvintele englezești: Hue (nuanță), Saturate (saturație) și Lightness (luminozitate).

Nuanța în HSL este valoarea unei culori pe o roată specială de culori (Figura 2) și este specificată în grade. Dacă trasăm analogii cu modelul RGB, atunci 0° corespunde roșului, 120° corespunde verdelui și 240° corespunde albastrului.

Valoarea nuanței se va modifica în intervalul de la 0 la 359.

Figura 2. Roata de culori HSL.

A doua valoare - saturația (Saturate) este setată ca procent. La 100% saturație, culoarea este cât se poate de „suculentă” pe măsură ce indicatorul de saturație se deplasează spre 0%, culoarea devine 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 indica culorile negre (fără lumină) și, respectiv, alb (supraexpus), și nu contează ce culoare din roata de culori a fost selectată în primul canal. Valoarea optimă a luminozității culorii este de 50%.

Setarea culorii folosind HSLA

Formatul HSLA este legat de HSL, la fel cum RGB este de RGBA. În formatul HSLA, ca și în RGBA, este adăugat un canal alfa, care este responsabil pentru transparența culorii.

Culoarea specificată în format HSL este mai ușor de citit. Putem spune că este intuitiv. De exemplu, codul 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 clar doar 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 pot face 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 un canal alfa, va fi afișată în format RGB.

Numerele hexazecimale sunt folosite pentru a specifica 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. Numerele de la 10 la 15 sunt înlocuite cu litere latine. Numerele mai mari de 15 în sistemul hexazecimal sunt formate prin combinarea a două numere într-unul singur. De exemplu, numărul 255 în zecimală corespunde numărului FF în hexazecimal. Pentru a evita confuzia în determinarea sistemului numeric, un simbol hash # este plasat înaintea numărului hexazecimal, de exemplu #666999. Fiecare dintre cele trei culori - roșu, verde și albastru - poate lua valori de la 00 la FF. Astfel, simbolul de culoare este împărțit în trei componente #rrggbb, unde primele două simboluri indică componenta roșie a culorii, cele două din mijloc - verde, iar ultimele două - albastru. Este permisă utilizarea formei prescurtate #rgb, unde fiecare caracter trebuie dublat. Astfel, intrarea #fe0 ar trebui considerată 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ă numele lor. În tabel 1 arată numele, codul hexazecimal, RGB, valorile HSL și descrierea.

Masa 1. Denumiri de culori

Nume	Culoare	Cod	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 inchis
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

Folosind 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 defini culoarea folosind valorile roșu, verde și albastru în termeni zecimali. Fiecare dintre cele trei componente de culoare ia o valoare de la 0 la 255. De asemenea, este permisă specificarea culorii ca procent, cu 100% corespunzând numărului 255. Mai întâi, specificați cuvântul cheie rgb, apoi specificați componentele de culoare între 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 specifică transparența elementului. O valoare de 0 este complet transparentă, 1 este opac, iar o valoare intermediară precum 0,5 este semitransparentă.

RGBA a fost adăugat la CSS3, așa că codul CSS trebuie validat față de această versiune. Trebuie remarcat faptul că standardul CSS3 este încă în curs de dezvoltare și unele caracteristici se pot schimba. De exemplu, o culoare în format RGB adăugată la proprietatea culoare de fundal este validată, dar una adăugată la proprietatea de fundal nu mai este validă. Î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 derivat din combinația primelor litere Hue (nuanță), Saturate (saturație) și Lightness (luminozitate). Nuanța este valoarea culorii de pe roata culorilor (Fig. 1) și este dată în grade. 0° corespunde roșului, 120° verde și 240° albastru. Valoarea nuanței poate varia de la 0 la 359.

Orez. 1. Roata de culori

Saturația este intensitatea unei culori și este măsurată ca procent de la 0% la 100%. O valoare de 0% indică lipsa culorii și o nuanță de gri, 100% este valoarea maximă pentru saturație.

Luminozitatea specifică cât de strălucitoare este culoarea și este specificată ca procent de la 0% la 100%. Valorile scăzute fac culoarea mai închisă, iar valorile ridicate fac culoarea mai deschisă, 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 pentru a specifica transparența elementului. O valoare de 0 este complet transparentă, 1 este opac, iar o valoare intermediară precum 0,5 este semitransparentă.

Valorile de culoare RGBA, HSL și HSLA sunt adăugate la CSS3, așa că vă rugăm să verificați codul pentru validitatea versiunii atunci când utilizați aceste formate.

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

Avertizare

Toate metodele de prindere a leului 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 rezultate. Amintiți-vă, un leu este un prădător și un animal periculos!

Arrrgh!

Rezultatul acestui exemplu este prezentat în Fig. 2.

Orez. 2. Culori pe pagina web