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

Setarea culorii în HTML după numele său

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

Culoare text - roșu

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

Un exemplu de utilizare a diferitelor nume de culori:

Exemplu: setarea unei culori după numele ei

• Incearca-l tu insuti "

Antet pe fundal roșu

Antet pe fundal portocaliu

Antet pe fundal de var

Text alb pe fundal albastru

Antet pe fundal roșu

Antet pe fundal portocaliu

Antet pe fundal de var

Text alb pe fundal albastru

Specificarea culorii cu RGB

Când se afișează culori diferite pe monitor, paleta RGB este luată ca bază. Orice culoare se obține prin amestecarea celor trei principale: R - roșu, G - verde (verde), B - albastru (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 altele sunt setate la 0 Puteți seta și culoarea ca procent. Fiecare dintre parametri 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 cu saturație medie:

Exemplu: specificarea unei culori cu 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 caractere: 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 unirea a două caractere într-o singură valoare. De exemplu, cel mai mare număr 255 în zecimală corespunde celui mai mare FF în hexazecimal. Spre deosebire de sistemul zecimal, numărul hexazecimal este precedat de semnul lire sterline. # , de exemplu, #FF0000 este afișat ca roșu, deoarece roșul este setat la cea mai mare valoare (FF) și celelalte culori sunt setate la valoarea minimă (00). Caractere după simbolul hash # pot fi tastate atât cu litere mari, cât și cu litere mici. Sistemul hexazecimal vă permite să utilizați forma prescurtată #rgb, unde fiecare caracter este egal cu de două ori. 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 utilizate frecvent (nume, HEX și RGB):

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

Codurile de culoare în CSS sunt folosite pentru a specifica culorile. De obicei, codurile de culoare sau valorile de culoare sunt folosite pentru a seta o culoare fie pentru prim-planul unui element (de exemplu, text, culoarea linkului), fie pentru fundalul unui element (fondul, culoarea blocului). Ele pot fi, de asemenea, folosite pentru a schimba culoarea butoanelor, chenarele, marcatorul, hoverul și alte efecte decorative.

Puteți seta valorile culorii în diferite formate. Următorul tabel listează toate formatele posibile:

Aceste formate sunt descrise mai detaliat mai jos.

Culori CSS - coduri hexadecimale

Cod de culoare hexazecimal este o reprezentare de culoare din șase cifre. Primele două cifre (RR) sunt valoarea roșie, următoarele două sunt valoarea verde (GG) și ultimele două sunt valoarea albastră (BB).

Culori CSS - coduri hexadecimale scurte

Cod scurt de culoare hexazecimal este o formă mai scurtă de notație cu șase caractere. În acest format, fiecare cifră este repetată pentru a produce valoarea echivalentă a culorii din șase cifre. De exemplu: #0F0 devine #00FF00.

Valoarea hexazecimală poate fi preluată din orice software de grafică, cum ar fi Adobe Photoshop, Core Draw etc.

Fiecare cod de culoare hexazecimal din CSS va fi precedat de semnul hash „#”. Următoarele sunt exemple de utilizare a notației hexazecimale.

Culori CSS - Valori RGB

Valoarea RGB este un cod de culoare care este setat folosind proprietatea rgb(). Această proprietate are trei valori: câte una pentru roșu, verde și albastru. Valoarea poate fi un număr întreg, de la 0 la 255 sau un procent.

Notă: Nu toate browserele acceptă proprietatea de culoare rgb(), deci nu este recomandat să o folosești.

Mai jos este un exemplu care arată mai multe culori folosind valori RGB.

Generator de coduri de culoare

Puteți crea milioane de coduri de culoare cu serviciul nostru.

Culorile browser sigure

Mai jos este un tabel cu 216 culori care sunt cele mai sigure și independente de computer. Aceste culori în CSS variază de la 000000 la codul hexadecimal FFFFFF. Ele sunt sigure de utilizat deoarece asigură că toate computerele vor afișa corect culoarea atunci când lucrează cu paleta de 256 de culori.

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 următoarele: 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 definiția sistemului numeric, numărul hexazecimal este precedat de simbolul hash #, de exemplu #666999. Fiecare dintre cele trei culori - roșu, verde și albastru - poate lua valori 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 marchează verde, iar ultimele două marchează albastru. Este permisă utilizarea formei prescurtate #rgb, unde fiecare caracter trebuie dublat. Astfel, intrarea #fe0 ar trebui considerată ca #ffee00.

dupa nume

Browserele acceptă unele culori după nume. În tabel. 1 arată numele, codul hexadecimal, valorile în format RGB, HSL și descrierea.

Cu RGB

Puteți defini o culoare 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 acceptabil să setați culoarea ca procent, în timp ce 100% va corespunde numărului 255. Mai întâi, este specificat cuvântul cheie rgb, apoi componentele de culoare sunt specificate între paranteze, separate prin virgule, de exemplu rgb(255, 128, 128) sau rgb(100%, 50%, 50%).

RGBA

Formatul RGBA este similar ca sintaxă cu RGB, dar include un canal alfa care stabilește transparența elementului. O valoare de 0 este complet transparentă, 1 este opac, iar o valoare intermediară precum 0,5 este translucidă.

RGBA este adăugat la CSS3, astfel încât validarea codului CSS ar trebui să fie efectuată conform acestei versiuni. Trebuie remarcat faptul că standardul CSS3 este încă în curs de dezvoltare și unele dintre caracteristicile sale se pot schimba. De exemplu, o culoare RGB adăugată la proprietatea culoare de fundal trece validarea, dar una adăugată la proprietatea de fundal nu. În același timp, browserele înțeleg destul de corect culoarea pentru ambele proprietăți.

HSL

Numele formatului HSL este format dintr-o combinație a primelor litere Hue (nuanță), Saturate (saturație) și Lightness (luminozitate). Nuanța este valoarea culorii de pe roata de culori (Fig. 1) și este specificată î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ă lipsa culorii și o nuanță de gri, 100% este valoarea maximă de saturație.

Luminozitatea setează cât de strălucitoare este culoarea și este specificată ca procent de la 0% la 100%. Valorile mici fac culoarea mai închisă, în timp ce valorile mari o fac mai deschisă, valorile extreme de 0% și 100% corespund alb-negru.

HSLA

Formatul HSLA este similar ca sintaxă cu HSL, dar include un canal alfa care stabilește transparența elementului. O valoare de 0 este complet transparentă, 1 este opac, iar o valoare intermediară precum 0,5 este translucidă.

Valorile de culoare în formatele RGBA, HSL și HSLA sunt adăugate la CSS3, așa că atunci când utilizați aceste formate, verificați validitatea codului față de versiune.

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 rezultat. Amintiți-vă, leul este un prădător și un animal periculos!

Rezultatul acestui exemplu este prezentat în Fig. 2.

Orez. 2. Culori pe pagina web

Vlad Merjevici

În HTML, culoarea este specificată într-unul din două moduri: folosind un cod hexazecimal și prin numele unor culori. Metoda cea mai des folosită se bazează pe sistemul hexazecimal, ca 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 următoarele: 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 definiția sistemului numeric, numărul hexazecimal este precedat de semnul lire sterline #, 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 este următoarea.

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

Fiecare dintre cele trei culori - roșu, verde și albastru - poate lua valori de la 00 la FF, care în cele din urmă formează 256 de nuanțe. Astfel, numărul total de culori poate fi 256x256x256 = 16.777.216 combinații. Modelul de culoare bazat pe componentele 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ă alb.

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

• Dacă valorile componentelor de culoare sunt aceleași (de exemplu: #D6D6D6), atunci se va obține o nuanță gri. Cu cât numărul este mai mare, cu atât culoarea este mai deschisă, iar valorile se schimbă de la #000000 (negru) la #FFFFFF (alb).
• O culoare roșie aprinsă se formează dacă componenta roșie este maximă (FF), iar restul componentelor sunt setate la zero. Culoarea cu valoarea #FF0000 este cea mai roșie nuanță roșie posibilă. Același lucru este valabil și pentru verde (#00FF00) și albastru (#0000FF).
• Galbenul (#FFFF00) se obține prin amestecarea roșului cu verdele. Acest lucru se vede clar pe roata culorilor (Fig. 6.1), care prezintă culorile primare (roșu, verde, albastru) și complementare sau complementare. Acestea includ galben, cyan și violet (numit și magenta). În general, orice culoare poate fi obținută prin amestecarea culorilor adiacente acesteia. Deci, 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, cum ar fi Adobe Photoshop. Pe fig. 6.2 arată o fereastră pentru alegerea unei culori în acest program, linia înconjoară valoarea hexazecimală rezultată a culorii curente. Îl puteți copia și lipi în codul dvs.

Orez. 6.2. Selector de culori în Photoshop

Culori Web

Dacă setați calitatea culorii monitorului la 8 biți (256 de culori), atunci aceeași culoare poate fi afișată diferit în browsere diferite. Acest lucru are de-a face cu modul în care sunt redate graficele atunci când browserul lucrează 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 ca culoarea să rămână aceeași în diferite browsere, a fost introdusă o paletă de așa-numite culori web. Culorile web sunt astfel de culori, pentru fiecare componentă a cărora - roșu, verde și albastru - una dintre cele șase valori este setată - 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ă este afișată 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 nu vă aminti o colecție 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ă cum specificați culoarea - după numele ei sau folosind numere hexazecimale. În efectul lor, aceste metode sunt egale. 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

Text mostră

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