>> Gestionarea culorilor
Valori hexazecimale de culoare RGB
Metodele de descriere și procesare a culorii diferă unele de altele prin prezentarea finală pentru care sunt destinate. Să comparăm, de exemplu, reprezentările culorilor pentru imprimare și pentru monitoarele de calculator. În primul caz, se ia baza alb culoarea hârtiei pe care sunt aplicate ulterior cele trei culori primare: albastru, Violetși galben... Amestecându-se între ele și cu culoarea albă a hârtiei în proporții diferite, aceste trei culori primare dau nuanțe de culoare diferite, cu excepția negrului pur, sau, în absența completă a vopselei, dau culoarea albă a hârtiei. Dacă le adăugăm negru, obținem CMYK- o metoda de redare a culorii, cand culoarea ceruta se obtine prin scaderea culorilor lipsa din alb.
În al doilea caz, se ia baza negru culoarea ecranului monitorului, fiecare celulă care strălucește în una dintre cele trei culori: roșu-Roșu, verde-verde și albastru-albastru. Apoi, în absența completă a oricărei străluciri, obținem o culoare neagră pură a ecranului, iar oricare dintre culorile necesare este stabilită de raportul fiecăreia dintre cele trei culori. În acest caz, obținem RGB- o metodă de transfer de culoare. Culorile primare pot varia de la 0
inainte de 255
, sau de la 0%
inainte de 100%
, sau poate fi reprezentat ca o valoare hexazecimală. În imaginea de mai jos, puteți vedea rezultatele amestecării culorilor primare.
Sistemul de numere hexazecimale, spre deosebire de numărul zecimal din rândul său de cifre, nu are zece cifre, ci șaisprezece - de unde și numele. În consecință, variantele care nu se repetă ale combinațiilor de două cifre pot fi doar - 256 , pentru a continua o serie de cifre după 9 scrisori de la A inainte de F prin urmare, rândul va arăta așa -
| 0,1,2,3,4,5,6,7,8,9, A, B, C, D, E, F. |
În acest caz, culoarea este specificată de trei numere hexazecimale, fiecare dintre acestea fiind formată din două cifre. Primul număr determină intensitatea roșu culori, medie verde, ultimul lucru- albastru culorile. Toate numerele pot lua valori în intervalul de la 00 inainte de FF(de la 0 la 255). De exemplu: verde este dat ca # 00FF00, roșu - ca # FF0000, albastru - ca # 0000FF, alb - ca #FFFFFF, absența completă a culorii sau negru este dat ca #000000 .
În formularul de mai jos puteți seta orice valoare hexazecimală pentru fiecare dintre cele trei culori și puteți vedea rezultatul amestecării lor făcând clic în câmpul de ieșire.
Exemple de valori de culoare RGB hexazecimale sunt gradații de roșu, albastru și verde.
| vedere | Codul | vedere | Codul | vedere | Codul | vedere | Codul | vedere | Codul | vedere | Codul |
| #010000 | #800000 | #000100 | #008000 | #000001 | #000080 | ||||||
| #100000 | #900000 | #001000 | #009000 | #000010 | #000090 | ||||||
| #200000 | # A00000 | #002000 | # 00A000 | #000020 | # 0000A0 | ||||||
| #300000 | # B00000 | #003000 | # 00B000 | #000030 | # 0000B0 | ||||||
| #400000 | # C00000 | #004000 | # 00C000 | #000040 | # 0000C0 | ||||||
| #500000 | # D00000 | #005000 | # 00D000 | #000050 | # 0000D0 | ||||||
| #600000 | # E00000 | #006000 | # 00E000 | #000060 | # 0000E0 | ||||||
| #700000 | # FF0000 | #007000 | # 00FF00 | #000070 | # 0000FF |
Specificarea culorii folosind literale șir
Pentru ușurință în utilizare, unor culori și combinațiile lor li s-au atribuit nume care sunt recunoscute de toate browserele și a devenit posibilă setarea multor dintre ele după nume. Tabelul de mai jos prezintă câteva dintre denumirile de culori:
| vedere | Nume | vedere | Nume | vedere | Nume | vedere | Nume |
| alb | roșu | portocale | Galben | ||||
| Verde | Albastru | Violet | Negru | ||||
| Aliceblue | Alb antic | Aqua | Acvamarin | ||||
| Azur | Bej | Bisque | Blanchedalmond | ||||
| Albastru violet | Maro | Burlywood | Cadetblue | ||||
| Chartreuse | Ciocolată | Coral | Albastru de colț | ||||
| Matase de porumb | purpuriu | Cyan | Albastru inchis | ||||
| Darkcyan | Toarg de aur negru | Gri închis | Verde inchis | ||||
| Darkkhaki | magenta închisă | verde întunecat | Darkorange | ||||
| Darkorchid | Roșu-închis | Darksalmon | Darkseagreen | ||||
| Albastru ardezie închis | Gri închis ardezie | Turcoaz închis | Darkviolet | ||||
| Roz închis | Deepskyblue | Dimgray | Dodgerblue | ||||
| Caramida de foc | Floralwhite | Padure verde | Fuschia | ||||
| Gainsboro | Alb-fantomă | Aur | Vergea de Aur | ||||
| gri | Verde galben | Mană | Hotpink | ||||
| Indianred | Indigo | Fildeş | Kaki | ||||
| Lavandă | Lavenderblush | Lemonchiffon | Albastru deschis | ||||
| Lightcoral | Lightcyan | Lightrecerogalben | Verde deschis | ||||
| Gri deschis | Roz deschis | Lightsalmon | Lightseagreen | ||||
| Albastru deschis | Gri deschis | Albastru de oțel deschis | Lumină galbenă | ||||
| Lămâie verde | Verde lime | Lenjerie | Magenta | ||||
| Maro | Mediumaquamarine | Albastru mediu | Mediumorchid | ||||
| Mov mediu | Mediumseagreen | Mediumslateblue | verde mijlociu | ||||
| Turcoaz mediu | Roșu-violet mediu | Albastru miez de noapte | Cremă de mentă | ||||
| Mistyrose | Navajowhite | Marinei | Oldlace | ||||
| măsline | Olivedrab | Portocaliu rosu | Orhidee | ||||
| Palegoldenrod | Verde palid | Paleturcoaz | Palevioletred | ||||
| Papayawhip | Peachpuff | Peru | Roz | ||||
| Prună | Pudra albastra | Rosybrown | Albastru regal | ||||
| maro de șa | Mare verde | scoica de mare | Sienna | ||||
| Argint | Cer albastru | Ardezie albastră | Slategray | ||||
| Zăpadă | Springgreen | Steelblue | bronzat | ||||
| Teal | Ciulin | Roșie | Turcoaz | ||||
| violet | Grâu | Fum alb | Galben verde |
Folosind un selector de culori sigur
Din păcate, pe platforme diferite, cu setări de sistem diferite, redarea corectă a culorilor este o problemă. Chestia este că browserul încearcă întotdeauna să ajusteze paleta de culori a documentului la setările sistemului și la capacitățile monitorului, amestecând în mod independent culorile și înlocuindu-le. Ca urmare, uneori utilizatorul nu vede exact ceea ce webmasterul a vrut să-i arate. O cale de ieșire din această situație a fost găsită în utilizarea unei palete, fiecare culoare a cărei culoare este garantată a fi redată la fel de către toate browserele de pe platforme diferite. Acesta este așa-numitul garantat paletă, numită și sigur paletă. Această paletă include culori, ale căror componente de culoare iau următoarele valori: 00 ,33 ,66 ,99 , CC,FF, în tot posibilul 216 combinatiile lor.
| vedere | Codul | vedere | Codul | vedere | Codul | vedere | Codul | vedere | Codul | vedere | Codul |
| Fffffff | CCCCCC | 999999 | 666666 | 333333 | 000000 | ||||||
| CCCC66 | CCCC33 | 999966 | 999933 | 999900 | 666600 | ||||||
| CCFF66 | CCFF00 | CCFF33 | CCCC99 | 666633 | 333300 | ||||||
| 99FF00 | 99FF33 | 99CC66 | 99CC00 | 99CC33 | 669900 | ||||||
| CCFF99 | 99FF99 | 66CC00 | 66CC33 | 669933 | 336600 | ||||||
| 66FF00 | 66FF33 | 33FF00 | 33CC00 | 339900 | 009900 | ||||||
| 33FF33 | 00FF33 | 00FF00 | 00CC00 | 33CC33 | 00CC33 | ||||||
| CCFFCC | 99CC99 | 66CC66 | 669966 | 336633 | 003300 | ||||||
| 99FF99 | 66FF66 | 33FF66 | 00FF66 | 339933 | 006600 | ||||||
| 66FF99 | 33FF99 | 00FF99 | 33CC66 | 00CC66 | 009933 | ||||||
| 66CC99 | 33CC99 | 00CC99 | 339966 | 009966 | 006633 | ||||||
| 99FFCC | 66FFCC | 33FFCC | 00FFCC | 33CCCC | 009999 | ||||||
| CCFFFF | 99FFFF | 66FFFF | 33FFFF | 00FFFF | 00CCCC | ||||||
| 99CCCC | 66CCCC | 339999 | 669999 | 006666 | 336666 | ||||||
| 66CCFF | 33CCFF | 00CCFF | 3399CC | 0099CC | 003333 | ||||||
| 99CCFF | 3399FF | 0099FF | 6699CC | 336699 | 006699 | ||||||
| 0066FF | 3366CC | 0066CC | 0033FF | 003399 | 003366 | ||||||
| 6699FF | 3366FF | 0000FF | 0000CC | 0033CC | 000033 | ||||||
| 3333FF | 3300FF | 3300CC | 3333CC | 000099 | 000066 | ||||||
| 9999CC | 6666FF | 6666CC | 666699 | 333399 | 333366 | ||||||
| CCCCFF | 9999FF | 6666FF | 6600FF | 330099 | 330066 | ||||||
| 9966CC | 9966FF | 6600CC | 6633CC | 663399 | 330033 | ||||||
| CC99FF | CC66FF | 9933FF | 9900FF | 660099 | 663366 | ||||||
| CC66FF | CC33FF | CC00FF | 9900CC | 996699 | 660066 | ||||||
| CC99CC | CC66CC | CC33CC | CC00CC | 990099 | 993399 | ||||||
| FFCCFF | FF99FF | FF66FF | FF33FF | FF00FF | CC3399 | ||||||
| FF66CC | FF00CC | FF33CC | CC6699 | CC0099 | 990066 | ||||||
| FF99CC | FF3399 | FF0099 | CC0066 | 993366 | 660033 | ||||||
| FF6699 | FF3399 | FF0066 | CC3366 | 996666 | 663333 | ||||||
| CC9999 | CC6666 | CC3333 | CC0000 | 990033 | 330000 | ||||||
| FFCCCC | FF9999 | FF6666 | FF3333 | FF0000 | CC0033 | ||||||
| FF6633 | CC3300 | FF3300 | FF0000 | CC0000 | 990000 | ||||||
| FFCC99 | FFCC66 | FF6600 | CC6633 | 993300 | 660000 | ||||||
| FF9900 | FF9933 | CC9966 | CC6600 | 996633 | 663300 | ||||||
| FFCC66 | FFCC00 | FFCC33 | CC9900 | CC9933 | 996600 | ||||||
| FFFFCC | FFFF99 | FFFF66 | FFFF33 | FFFF00 | CCCC00 |
Codurile de culoare CSS sunt folosite pentru a specifica o culoare. De obicei, codurile de culoare sau valorile de culoare sunt folosite pentru a seta o culoare fie pentru prim-planul unui element (de exemplu, culoarea textului, culoarea linkului), fie pentru fundalul 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 seta propriile valori de culoare în diferite formate. Următorul tabel listează toate formatele posibile:
Formatele enumerate sunt descrise mai detaliat mai jos.
Culori CSS - coduri hexazecimale
Cod de culoare hexazecimal este o reprezentare din șase cifre a unei culori. Primele două cifre (RR) reprezintă valoarea roșie, următoarele două reprezintă valoarea verde (GG) și ultimele două reprezintă valoarea albastră (BB).
Culori CSS - coduri hexadecimale scurte
Cod de culoare hexadecimal scurt este forma mai scurtă a notației din șase cifre. Î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 semnul hash „#”. Următoarele sunt exemple de utilizare a notației hexazecimale.
Culori CSS - Valori RGB
Valoarea RGB este codul 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 mai independente de computer. Aceste culori CSS variază de la 000000 la FFFFFF hexazecimal. Sunt sigure de utilizat deoarece asigură că toate computerele afișează corect culoarea atunci când lucrează cu o paletă de 256 de culori.
| Tabel de culori „sigur” 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 |
Vlad Merjevici
În HTML, o culoare este specificată în unul din două moduri: folosind un cod hexazecimal și prin numele unor culori. Metoda bazată pe sistemul numeric hexazecimal este utilizată în principal, ca fiind cea mai universală.
Culori hexazecimale
Numerele hexazecimale sunt folosite pentru a specifica culorile în HTML. 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. Masa 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, 255 zecimale este FF hexazecimal.
Pentru a evita confuzia în definiția sistemului numeric, caracterul hash # este plasat în fața numărului hexazecimal, de exemplu # aa69cc. În acest caz, registrul nu contează, deci 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) sunt verzi, iar ultimele două cifre (47) sunt albastre. Drept urmare, obțineți 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 256 de nuanțe. Astfel, numărul total de culori poate fi 256x256x256 = 16.777.216 combinații. Modelul 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 (de la add - to add), în care adăugarea tuturor celor trei componente formează o culoare 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 obțineți o nuanță gri. Cu cât numărul este mai mare, cu atât culoarea este mai deschisă, valorile variază de la # 000000 (negru) la #FFFFFF (alb).
- O culoare roșie aprinsă se formează dacă componenta roșie este setată la maxim (FF), iar restul componentelor sunt setate la zero. Culoarea # FF0000 este cea mai roșie nuanță roșie posibilă. La fel este și cazul verde (# 00FF00) și albastru (# 0000FF).
- Galbenul (#FFFF00) se obține prin amestecarea roșului cu verdele. Acest lucru este clar vizibil pe roata culorilor (Fig. 6.1), unde sunt prezentate culorile primare (roșu, verde, albastru) și culorile complementare sau complementare. Acestea includ galben, cyan și violet (numit și magenta). În general, orice culoare poate fi obținută prin amestecarea culorilor din apropiere. Deci, cyan (# 00FFFF) se obține prin combinarea albastrului și verdelui.
Orez. 6.1. Cercul de culoare
Culorile hexazecimale nu trebuie să fie alese empiric. În acest scop, un editor grafic care poate lucra cu diferite modele de culoare este potrivit, de exemplu, Adobe Photoshop. În fig. 6.2 arată o fereastră pentru alegerea 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 de selecție a culorilor î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 se datorează modului în care sunt afișate graficele, în care browserul lucrează cu propria paletă și nu poate afișa o culoare pe care nu o are în paletă. În acest caz, culoarea este înlocuită cu o combinație de pixeli de alte culori, apropiate acesteia, care o imită pe cea specificată. Pentru a păstra culoarea neschimbată în diferite browsere, am introdus o paletă de așa-numitele culori web. Culorile web sunt acele culori, pentru fiecare componentă a cărora - roșu, verde și albastru - este setată una dintre cele șase valori - 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC). ), 255 (FF). Parantezele indică valoarea hexazecimală a acestei componente. 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 momentul de față, relevanța culorilor web este foarte mică datorită creșterii calității monitoarelor și extinderii capacităților acestora.
Culori după nume
Pentru a nu memora un set de numere, puteți folosi în schimb numele culorilor utilizate în mod obișnuit. Masa 6.3 listează 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 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ă în ce fel specificați culoarea - după numele ei sau folosind numere hexazecimale. Aceste metode sunt egale în acțiunea lor. Exemplul 6.1 arată cum să setați culoarea de fundal și a textului 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
, iar culoarea textului prin atributul text. Pentru o modificare, atributul text este setat la un număr hexazecimal, iar bgcolor este setat la cuvântul cheie rezervat teal.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. Numerele de la 10 la 15 sunt î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 numeric, simbolul hash # este plasat în fața numărului hexazecimal, 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.
| 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, este indicat cuvântul cheie rgb, iar apoi în paranteze, sunt indicate componentele de culoare, 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% este valoarea maximă de saturație.
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 culorilor în formatele 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 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
HEX / HTML
Culoarea HEX nu este altceva decât o reprezentare hexazecimală RGB.
Culorile sunt reprezentate ca trei grupuri de cifre hexazecimale, unde fiecare grup este responsabil pentru propria sa culoare: # 112233, unde 11 este roșu, 22 este verde, 33 este albastru. Toate valorile trebuie să fie între 00 și FF.
În multe aplicații, este permisă o formă abreviată de notație pentru culorile hexazecimale. Dacă fiecare dintre cele trei grupuri conține aceleași caractere, de exemplu # 112233, atunci acestea pot fi scrise ca # 123.
- h1 (culoare: # ff0000;) / * roșu * /
- h2 (culoare: # 00ff00;) / * verde * /
- h3 (culoare: # 0000ff;) / * albastru * /
- h4 (culoare: # 00f;) / * același albastru, stenografie * /
RGB
Spațiul de culoare RGB (Roșu, Verde, Albastru) este format din toate culorile posibile care pot fi obținute prin amestecarea roșu, verde și albastru. Acest model este popular în fotografie, televiziune și grafică pe computer.
Valorile RGB sunt specificate ca un număr întreg de la 0 la 255. De exemplu, rgb (0,0,255) este afișat ca albastru deoarece parametrul albastru este setat la cea mai mare valoare (255), iar restul este setat la 0.
Unele aplicații (în special browserele web) acceptă scrierea procentuală a valorilor RGB (de la 0% la 100%).
- h1 (culoare: rgb (255, 0, 0);) / * roșu * /
- h2 (culoare: rgb (0, 255, 0);) / * verde * /
- h3 (culoare: rgb (0, 0, 255);) / * albastru * /
- h4 (culoare: rgb (0%, 0%, 100%);) / * același albastru, scriere procentuală * /
Valorile de culoare RGB sunt acceptate în toate browserele majore.
RGBA
Recent, browserele moderne au învățat să lucreze cu modelul de culoare RGBA - o extensie RGB cu suport pentru un canal alfa care determină opacitatea unui obiect.
O valoare de culoare RGBA este specificată ca: rgba (roșu, verde, albastru, alfa). Alfa este un număr care variază de la 0,0 (complet transparent) la 1,0 (complet opac).
- h1 (culoare: rgb (0, 0, 255);) / * albastru în RGB normal * /
- h2 (culoare: rgba (0, 0, 255, 1);) / * același albastru în RGBA, deoarece opacitate: 100% * /
- h3 (culoare: rgba (0, 0, 255, 0,5);) / * opacitate: 50% * /
- h4 (culoare: rgba (0, 0, 255, .155);) / * opacitate: 15,5% * /
- h5 (culoare: rgba (0, 0, 255, 0);) / * complet transparent * /
RGBA este acceptat în IE9+, Firefox 3+, Chrome, Safari și Opera 10+.
Hsl
Modelul de culoare HSL este o reprezentare cilindrică a modelului RGB. HSL reprezintă culorile într-un mod mai intuitiv și mai ușor de înțeles decât RGB tipic. Modelul este adesea folosit în aplicații grafice, în alegerea culorilor și pentru analiza imaginilor.
HSL înseamnă Hue, Saturation, Lightness / Luminance, a nu fi confundat cu luminozitatea.
Nuanța setează poziția culorii pe roata de culori (de la 0 la 360). Saturația este un procent de saturație (de la 0% la 100%). Luminozitatea este procentul de luminozitate (de la 0% la 100%).
- h1 (culoare: hsl (120, 100%, 50%);) / * verde * /
- h2 (culoare: hsl (120, 100%, 75%);) / * verde deschis * /
- h3 (culoare: hsl (120, 100%, 25%);) / * verde închis * /
- h4 (culoare: hsl (120, 60%, 70%);) / * verde pastel * /
HSL este acceptat în IE9+, Firefox, Chrome, Safari și Opera 10+.
HSLA
Similar cu RGB / RGBA, HSL are un mod HSLA cu un canal alfa pentru a indica opacitatea unui obiect.
Valoarea culorii HSLA este dată ca: hsla (nuanță, saturație, luminozitate, alfa). Alfa este un număr care variază de la 0,0 (complet transparent) la 1,0 (complet opac).
- h1 (culoare: hsl (120, 100%, 50%);) / * verde în HSL normal * /
- h2 (culoare: hsla (120, 100%, 50%, 1);) / * același verde în HSLA, deoarece opacitate: 100% * /
- h3 (culoare: hsla (120, 100%, 50%, 0,5);) / * opacitate: 50% * /
- h4 (culoare: hsla (120, 100%, 50%, .155);) / * opacitate: 15,5% * /
- h5 (culoare: hsla (120, 100%, 50%, 0);) / * complet transparent * /
CMYK
Modelul de culoare CMYK este adesea asociat cu imprimarea și imprimarea color. CMYK (spre deosebire de RGB) este un model subtractiv, ceea ce înseamnă că valorile mai mari sunt asociate cu culori mai închise.
Culorile sunt determinate de raportul Cyan, Magenta, Yellow, cu adaos de negru (Key/black).
Fiecare dintre numerele care definesc o culoare în CMYK reprezintă procentul de cerneală dintr-o anumită culoare care alcătuiește o combinație de culori sau, mai degrabă, dimensiunea unui punct raster afișat pe un fotosetter pe un film de o anumită culoare (sau direct pe o placă de imprimare în cazul CTP).
De exemplu, pentru a obține culoarea PANTONE 7526, amestecați 9 părți cyan, 83 magenta, 100 galben și 46 negru. Aceasta poate fi indicată după cum urmează: (9,83,100,46). Uneori folosesc astfel de denumiri: C9M83Y100K46 sau (9%, 83%, 100%, 46%) sau (0,09 / 0,83 / 1,0 / 0,46).
HSB / HSV
HSB (cunoscut și ca HSV) este similar cu HSL, dar sunt două modele de culori diferite. Ambele se bazează pe geometrie cilindrică, dar HSB / HSV se bazează pe modelul „hexcon”, în timp ce HSL se bazează pe modelul „bi-hexcon”. Artiștii preferă adesea să folosească acest model, este în general acceptat că dispozitivul HSB/HSV este mai aproape de percepția naturală a culorilor. În special, modelul de culoare HSB este utilizat în Adobe Photoshop.
HSB / HSV înseamnă Hue, Saturation, Brightness / Value.
Nuanța setează poziția culorii pe roata de culori (de la 0 la 360). Saturația este un procent de saturație (de la 0% la 100%). Luminozitatea este procentul de luminozitate (de la 0% la 100%).
XYZ
Modelul de culoare XYZ (CIE 1931 XYZ) este un spațiu pur matematic. Spre deosebire de RGB, CMYK și alte modele, în XYZ, componentele principale sunt „imaginare”, adică nu puteți lega X, Y și Z cu niciun set de culori de amestecat. XYZ este modelul principal pentru aproape toate celelalte modele de culoare utilizate în domeniile tehnice.
LAB
Modelul de culoare LAB (CIELAB, "CIE 1976 L * a * b *") este calculat din spațiul CIE XYZ. La dezvoltarea Lab, scopul a fost de a crea un spațiu de culoare în care schimbarea culorii va fi mai liniară din punct de vedere al percepției umane (comparativ cu XYZ), adică, astfel încât aceeași modificare a valorilor coordonatelor de culoare în regiuni diferite ale spațiului de culoare produce aceeași senzație de schimbare a culorii.
