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 elementului (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 de culoare hexazecimal scurt 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 luată din orice software de grafică, cum ar fi Adobe Photoshop, Core Draw etc.
Fiecare cod de culoare hexazecimal din CSS va fi precedat de un semn 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. Acestea sunt sigure de utilizat, deoarece se asigură că toate computerele vor afișa 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 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:
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 |
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 redat 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 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 pot fi specificate ș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șu 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 permite utilizarea unei forme prescurtate precum #rgb, unde fiecare caracter este echivalent 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):
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 marin | #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 | |
verde mare | mare 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ță.
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. Astfel încât " creioane colorate” în setul său este mult mai mult de șapte.
schema de culori în html
În html, culoarea poate fi specificată în mai multe formate:
1. Ca valoare hexazecimală - se folosește codul specificat în sistemul 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 culorii verde;
- Acesta din urmă este pentru conținutul culorii albastre.
La începutul codului (înaintea numerelor), este plasat un marcaj. 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ă în html ar arăta ca #FFFFFF:
2. Cuvinte cheie - În prezent, html acceptă aproximativ 147 de cuvinte cheie. Dar nu toate aceste cuvinte sunt unice. Unele dintre ele se referă la aceeași nuanță de culoare.
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 de culoare în html se bazează pe utilizarea a trei valori setate î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 astfel: rgb(0, 210, 100).
culoare de fundal:rgb(100,186,43)
4. În format RGBA - este un format RGB avansat, unde a patra valoare specifică transparența culorii sub forma unei fracțiuni zecimale 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. În el, la 147 de nume cheie de nuanțe de culoare, codurile de corespondență sunt date în toate standardele majore pentru reprezentarea culorilor. În plus, fiecare câmp este echipat cu o bară pentru potrivirea vizuală a culorilor. Unul dintre aceste tabele este prezentat pe site-ul colorscheme.ru:
Dar chiar și cu ajutorul unei astfel de structuri de corespondență, selectarea nuanței dorite poate fi dificilă. Și nu este un fapt că există cel potrivit în tabelul de coduri de culori.
Pentru a ocoli această barieră și a face cât mai ușoară alegerea nuanței potrivite, au fost dezvoltate servicii web interactive. Interfața lor cu utilizatorul 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 formatele principale.
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:
Siguranța culorii
Și a fost cu mult timp în urmă, în epoca plăcilor video care acceptă doar 256 de culori. În acele zile, sistemele de operare puteau afișa doar un anumit număr de nuanțe de opt biți fără distorsiuni.
Apoi a fost crescută marea masă a culorilor sigure. A indicat 216 nuanțe care puteau fi afișate fără distorsiuni în oricare dintre browserele de atunci. Și până astăzi aceasta mare manuscris» este încă disponibil pentru unele resurse:
Totul s-a schimbat în timpul nostru. 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.
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.
FA | + | 8E | + | 47 | = | FA8E47 |
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, precum 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.
Nume culoare | Culoare | Descriere | Valoare hexagonală |
---|---|---|---|
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 marin | #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ă 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 .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
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. În tabel. 1 arată numele, codul hexadecimal, valorile în format RGB, HSL și descrierea.
Nume | Culoare | Codul | RGB | HSL | Descriere |
---|---|---|---|---|---|
alb | #ffff 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 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
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 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
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 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
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 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
Un avertisment
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