Cod de culoare hexazecimal. Culoarea în stiluri poate fi specificată în diferite moduri: prin valoare hexazecimală, după nume, în format RGB, RGBA, HSL, HSLA
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 în fața 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.
| 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!
Rezultatul acestui exemplu este prezentat în Fig. 2.
Orez. 2. Culori pe pagina web
28.11.14 11.1KDin păcate, nu este încă posibilă afișarea senzațiilor gustative pe site. Dar acest lucru poate fi compensat pe deplin cu ajutorul culorilor. La urma urmei, culorile html vă permit să afișați oricare dintre milioanele de nuanțe. Asa de " creioane colorate Sunt mult mai mult de șapte în setul lui.
Schema de culori în html
În html, culoarea poate fi specificată în mai multe formate:
1. Ca valoare hexazecimală – se utilizează codul specificat în sistemul numeric hexazecimal. Astfel de coduri de culoare în html constau din trei perechi de numere hexazecimale. Fiecare pereche este responsabilă pentru saturația nuanței cu culoarea sa primară:
- Prima pereche numerică este responsabilă pentru culoarea roșie;
- A doua pereche este pentru conținutul de culoare verde;
- Acesta din urmă este pentru conținutul său albastru.
Un semn hash este plasat la începutul codului (înaintea numerelor). Acesta este codul de culoare hexazecimal. Pe lângă numerele de la 1 la 9, acest sistem de numere folosește litere din alfabetul latin (A, B, C, D, E, F).
De exemplu, codul de culoare albă din html va arăta ca #FFFFFF:
2. Cuvinte cheie - HTML acceptă în prezent aproximativ 147 de cuvinte cheie. Dar nu toate aceste cuvinte sunt unice. Unele dintre ele se referă la aceeași nuanță de culoare.
Culoarea gri este reprezentată de două cuvinte cheie: gri și gri. Codul lor hexazecimal (HEX) este dat de aceeași valoare #808080.
Exemplu:
#808080
3. În format RGB - această codificare a culorilor în html se bazează pe utilizarea a trei valori, stabilite în intervalul de la 0 la 255. Fiecare dintre ele determină saturația nuanței cu una dintre culorile primare:
- R – roșu (roșu);
- G – verde (verde);
- B – albastru (albastru).
Numărul de culoare în format RGB este scris sub următoarea formă: rgb(0, 210, 100).
culoare de fundal:rgb(100,186,43)
4. În formatul RGBA - este un format RGB îmbunătățit, unde a patra valoare specifică transparența culorii ca fracție zecimală de la 0 la 1.
Exemplu de utilizare:
culoare de fundal:rgba(100,86,143,0.2)
culoare de fundal:rgba(100,86,143,0.5)
culoare de fundal:rgba(100,86,143,0.8)
culoare de fundal:rgba(100,86,143,1)
Tabele de culori HTML și generatoare de culori
Cu o gamă atât de largă de formate de setare a culorilor, este ușor să fii confuz. Prin urmare, a fost inventat un tabel special de culori. Oferă 147 de nume cheie de nuanțe de culoare cu coduri de conformitate în toate standardele majore de culoare. În plus, fiecare câmp este echipat cu o bară pentru selectarea vizuală a culorilor. Unul dintre aceste tabele este prezentat pe site-ul colorscheme.ru:
Dar chiar și cu această structurare a potrivirii, alegerea nuanței potrivite poate fi dificilă. Și nu este un fapt că tabelul de coduri de culoare îl va conține pe cel de care aveți nevoie.
Pentru a ocoli acest obstacol și a face alegerea nuanței potrivite cât mai ușor posibil, au fost dezvoltate servicii web interactive. Interfața lor de utilizator poate diferi ușor una de cealaltă.
Pe site-ul html-color-codes.info, generatorul de culori arată astfel:
Și în cadrul serviciului color-picker.appsmaster.co, acest instrument este implementat puțin diferit:
Saturația fiecărei culori din generator este setată folosind glisoare speciale. Vizual, nuanța este afișată de culoarea cadrului și dreptunghiului din partea stângă. În partea de jos, 3 câmpuri afișează codul de culoare în formate de bază.
Dar generatorul de culori este disponibil nu numai pe site-urile specializate. Aproape toate editoarele grafice sunt echipate cu un instrument similar. De exemplu, Photoshop:
Măsuri de siguranță atunci când lucrați cu culoarea
Și asta a fost cu mult timp în urmă, în epoca plăcilor video care suportau doar 256 de culori. În acele vremuri îndepărtate, sistemele de operare puteau afișa doar un anumit număr de nuanțe de opt biți fără distorsiuni.
Apoi a fost dezvoltat un mare tabel de culori sigure. Specifica 216 de nuanțe care puteau fi afișate fără distorsiuni în oricare dintre browserele de atunci. Și până în ziua de azi aceasta" mare manuscris» este încă disponibil pentru unele resurse:
În zilele noastre totul s-a schimbat. Prin urmare, toate regulile de siguranță atunci când lucrați cu culoarea în html sunt complet anulate. La urma urmei, hardware-ul computerelor moderne acceptă mai mult de 16 milioane de nuanțe diferite. Și 216 culori sigure s-au scufundat în uitare.
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 culoarea fie pentru culoarea primului plan a unui element (de exemplu, culoarea textului, culoarea linkului), fie pentru culoarea de fundal a unui element (culoarea fundalului, culoarea blocului). Ele pot fi, de asemenea, folosite pentru a schimba culoarea unui buton, chenar, marcator, hover și alte efecte decorative.
Puteți specifica valorile culorii în diferite formate. Următorul tabel listează toate formatele posibile:
Formatele enumerate sunt descrise mai detaliat mai jos.
Culori CSS - coduri hexadecimale
Cod de culoare hexazecimal este o reprezentare de șase cifre a culorii. Primele două cifre (RR) reprezintă valoarea roșie, următoarele două reprezintă valoarea verde (GG), iar ultimele două reprezintă valoarea albastră (BB).
Culori CSS - coduri hexadecimale scurte
Cod de culoare hexadecimal scurt este o formă mai scurtă de notație cu șase caractere. În acest format, fiecare cifră este repetată pentru a produce o valoare de culoare echivalentă 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 „#”. Mai jos sunt exemple de utilizare a notațiilor 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 folosind serviciul nostru.
Culori sigure pentru browser
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 hexazecimal FFFFFF. Sunt sigure de utilizat deoarece asigură că toate computerele afișează corect culoarea atunci când lucrează cu paleta de 256 de culori.
| Tabel de culori „sigure” în CSS | |||||
| #000000 | #000033 | #000066 | #000099 | #0000CC | #0000FF |
| #003300 | #003333 | #003366 | #003399 | #0033CC | #0033FF |
| #006600 | #006633 | #006666 | #006699 | #0066CC | #0066FF |
| #009900 | #009933 | #009966 | #009999 | #0099CC | #0099FF |
| #00CC00 | #00CC33 | #00CC66 | #00CC99 | #00CCCC | #00CCFF |
| #00FF00 | #00FF33 | #00FF66 | #00FF99 | #00FFCC | #00FFFF |
| #330000 | #330033 | #330066 | #330099 | #3300CC | #3300FF |
| #333300 | #333333 | #333366 | #333399 | #3333CC | #3333FF |
| #336600 | #336633 | #336666 | #336699 | #3366CC | #3366FF |
| #339900 | #339933 | #339966 | #339999 | #3399CC | #3399FF |
| #33CC00 | #33CC33 | #33CC66 | #33CC99 | #33CCCC | #33CCFF |
| #33FF00 | #33FF33 | #33FF66 | #33FF99 | #33FFCC | #33FFFF |
| #660000 | #660033 | #660066 | #660099 | #6600CC | #6600FF |
| #663300 | #663333 | #663366 | #663399 | #6633CC | #6633FF |
| #666600 | #666633 | #666666 | #666699 | #6666CC | #6666FF |
| #669900 | #669933 | #669966 | #669999 | #6699CC | #6699FF |
| #66CC00 | #66CC33 | #66CC66 | #66CC99 | #66CCCC | #66CCFF |
| #66FF00 | #66FF33 | #66FF66 | #66FF99 | #66FFCC | #66FFFF |
| #990000 | #990033 | #990066 | #990099 | #9900CC | #9900FF |
| #993300 | #993333 | #993366 | #993399 | #9933CC | #9933FF |
| #996600 | #996633 | #996666 | #996699 | #9966CC | #9966FF |
| #999900 | #999933 | #999966 | #999999 | #9999CC | #9999FF |
| #99CC00 | #99CC33 | #99CC66 | #99CC99 | #99CCCC | #99CCFF |
| #99FF00 | #99FF33 | #99FF66 | #99FF99 | #99FFCC | #99FFFF |
| #CC0000 | #CC0033 | #CC0066 | #CC0099 | #CC00CC | #CC00FF |
| #CC3300 | #CC3333 | #CC3366 | #CC3399 | #CC33CC | #CC33FF |
| #CC6600 | #CC6633 | #CC6666 | #CC6699 | #CC66CC | #CC66FF |
| #CC9900 | #CC9933 | #CC9966 | #CC9999 | #CC99CC | #CC99FF |
| #CCCC00 | #CCCC33 | #CCCC66 | #CCCC99 | #CCCCCC | #CCCCFF |
| #CCFF00 | #CCFF33 | #CCFF66 | #CCFF99 | #CCFFCC | #CCFFFF |
| #FF0000 | #FF0033 | #FF0066 | #FF0099 | #FF00CC | #FF00FF |
| #FF3300 | #FF3333 | #FF3366 | #FF3399 | #FF33CC | #FF33FF |
| #FF6600 | #FF6633 | #FF6666 | #FF6699 | #FF66CC | #FF66FF |
| #FF9900 | #FF9933 | #FF9966 | #FF9999 | #FF99CC | #FF99FF |
| #FFCC00 | #FFCC33 | #FFCC66 | #FFCC99 | #FFCCCC | #FFCCFF |
| #FFFF00 | #FFFF33 | #FFFF66 | #FFFF99 | #FFFFCC | #FFFFFF |
Î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):
| Culoare | Nume | Culoare | Nume | Culoare | Nume | Culoare | Nume |
|---|---|---|---|---|---|---|---|
| Negru | gri | Argint | alb | ||||
| Galben | Lămâie verde | Aqua | Fucsie | ||||
| roșu | Verde | Albastru | Violet | ||||
| Maro | măsline | Marinei | Teal |
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șul 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 utilizate frecvent (nume, HEX și RGB):
| nume englezesc | nume rusesc | Probă | HEX | RGB | ||
|---|---|---|---|---|---|---|
| Nemuritoare | Nemuritoare | #E52B50 | 229 | 43 | 80 | |
| Chihlimbar | Chihlimbar | #FFBF00 | 255 | 191 | 0 | |
| Aqua | Albastru verde | #00FFFF | 0 | 255 | 255 | |
| Azur | Azur | #007FFF | 0 | 127 | 255 | |
| Negru | Negru | #000000 | 0 | 0 | 0 | |
| Albastru | Albastru | #0000FF | 0 | 0 | 255 | |
| Bondi Blue | Apa de pe plaja Bondi | #0095B6 | 0 | 149 | 182 | |
| Alamă | Alamă | #B5A642 | 181 | 166 | 66 | |
| Maro | Maro | #964B00 | 150 | 75 | 0 | |
| Albastru ca cerul | Azur | #007BA7 | 0 | 123 | 167 | |
| Verde închis de primăvară | Verde închis de primăvară | #177245 | 23 | 114 | 69 | |
| Smarald | Smarald | #50C878 | 80 | 200 | 120 | |
| Vânătă | Vânătă | #990066 | 153 | 0 | 102 | |
| Fucsie | Fucsie | #FF00FF | 255 | 0 | 255 | |
| Aur | Aur | #FFD700 | 250 | 215 | 0 | |
| gri | Gri | #808080 | 128 | 128 | 128 | |
| Verde | Verde | #00FF00 | 0 | 255 | 0 | |
| Indigo | Indigo | #4B0082 | 75 | 0 | 130 | |
| Jad | Jad | #00A86B | 0 | 168 | 107 | |
| Lămâie verde | Lămâie verde | #CCFF00 | 204 | 255 | 0 | |
| Malachit | Malachit | #0BDA51 | 11 | 218 | 81 | |
| Marinei | Albastru inchis | #000080 | 0 | 0 | 128 | |
| Ocru | Ocru | #CC7722 | 204 | 119 | 34 | |
| măsline | măsline | #808000 | 128 | 128 | 0 | |
| Portocale | Portocale | #FFA500 | 255 | 165 | 0 | |
| Piersică | Piersică | #FFE5B4 | 255 | 229 | 180 | |
| Dovleac | Dovleac | #FF7518 | 255 | 117 | 24 | |
| Violet | violet | #800080 | 128 | 0 | 128 | |
| roșu | roșu | #FF0000 | 255 | 0 | 0 | |
| Şofran | Şofran | #F4C430 | 244 | 196 | 48 | |
| Mare verde | Marea verde | #2E8B57 | 46 | 139 | 87 | |
| Verde de mlaștină | Bolotny | #ACB78E | 172 | 183 | 142 | |
| Teal | Albastru verde | #008080 | 0 | 128 | 128 | |
| Ultramarin | Ultramarin | #120A8F | 18 | 10 | 143 | |
| violet | violet | #8B00FF | 139 | 0 | 255 | |
| Galben | Galben | #FFFF00 | 255 | 255 | 0 | |
Codurile de culoare (fond) după saturație și nuanță.
Vlad Merjevici
În HTML, culoarea este specificată într-unul din două moduri: folosind codul hexazecimal și prin numele anumitor culori. Metoda bazată pe sistemul numeric hexazecimal este folosită î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.
| FA. | + | 8E | + | 47 | = | FA8E47 |
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 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) este realizat prin amestecarea roșului cu verdele. Aceasta este clar vizibilă pe roata culorilor (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 culorilor 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ă în 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 acest moment, 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.
| Nume culoare | Culoare | Descriere | Valoare hexazecimală |
|---|---|---|---|
| negru | Negru | #000000 | |
| albastru | Albastru | #0000FF | |
| fucsie | violet deschis | #FF00FF | |
| gri | Gri inchis | #808080 | |
| verde | Verde | #008000 | |
| lămâie verde | Verde deschis | #00FF00 | |
| maro | Roșu-închis | #800000 | |
| marina | Albastru inchis | #000080 | |
| măsline | măsline | #808000 | |
| Violet | Violet închis | #800080 | |
| roșu | roșu | #FF0000 | |
| argint | Gri deschis | #C0C0C0 | |
| teal | Albastru verde | #008080 | |
| alb | alb | #FFFFFF | |
| galben | Galben | #FFFF00 |
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 .
