Culoare rgb galben închis. Culoarea în stiluri poate fi specificată în diferite moduri: prin valoare hexazecimală, după nume, în format RGB, RGBA, HSL, HSLA
Vlad Merjevici
În HTML, culoarea este specificată în unul din două moduri: folosind codul hexazecimal și prin numele anumitor culori. Metoda bazată pe sistemul numeric hexazecimal este utilizată în mod predominant, fiind cea mai universală.
Culori hexazecimale
HTML folosește numere hexazecimale pentru a specifica culorile. Sistemul hexazecimal, spre deosebire de sistemul zecimal, se bazează, după cum sugerează și numele, pe numărul 16. Numerele vor fi după cum urmează: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. Numerele de la 10 la 15 sunt înlocuite cu litere latine. În tabel 6.1 arată corespondența dintre numerele zecimale și hexazecimale.
Numerele mai mari de 15 în sistemul hexazecimal sunt formate prin combinarea a două numere într-unul singur (Tabelul 6.2). De exemplu, numărul 255 în zecimală corespunde numărului FF în hexazecimal.
Pentru a evita confuzia în definirea sistemului numeric, un număr hexazecimal este precedat de un simbol hash #, de exemplu #aa69cc. În acest caz, cazul nu contează, așa că este permis să scrieți #F0F0F0 sau #f0f0f0.
O culoare tipică folosită în HTML arată astfel.
Aici culoarea de fundal a paginii web este setată la #FA8E47. Simbolul hash # în fața unui număr înseamnă că este hexazecimal. Primele două cifre (FA) definesc componenta roșie a culorii, a treia până la a patra cifre (8E) definesc componenta verde, iar ultimele două cifre (47) definesc componenta albastră. Rezultatul final va fi această culoare.
| 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 de culori (Fig. 6.1), care prezintă culorile primare (roșu, verde, albastru) și altele complementare sau suplimentare. Acestea includ galben, cyan și violet (numit și magenta). În general, orice culoare poate fi obținută prin amestecarea culorilor în apropierea acesteia. Astfel, cyan (#00FFFF) se obține prin combinarea albastrului și verdelui.
Orez. 6.1. Cercul de culoare
Culorile bazate pe valori hexazecimale nu trebuie să fie selectate empiric. În acest scop, este potrivit un editor grafic care poate lucra cu diferite modele de culoare, de exemplu, Adobe Photoshop. În fig. Figura 6.2 prezintă fereastra pentru selectarea unei culori în acest program; valoarea hexazecimală rezultată a culorii curente este conturată cu o linie. Îl puteți copia și lipi în codul dvs.
Orez. 6.2. Fereastra pentru alegerea culorilor în Photoshop
Culori web
Dacă setați calitatea de redare a culorii a monitorului la 8 biți (256 de culori), atunci aceeași culoare poate fi afișată diferit în browsere diferite. Acest lucru se datorează modului în care sunt afișate graficele, când browserul funcționează cu propria paletă și nu poate afișa o culoare care nu este în paleta sa. În acest caz, culoarea este înlocuită cu o combinație de pixeli de alte culori, apropiate acesteia, care o imită pe cea dată. Pentru a vă asigura că culoarea rămâne aceeași în diferite browsere, a fost introdusă o paletă de așa-numitele culori web. Culorile web sunt acele culori pentru care fiecare componentă - roșu, verde și albastru - este setată la una dintre cele șase valori - 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC) , 255 (FF). Valoarea hexazecimală a acestei componente este indicată între paranteze. Numărul total de culori din toate combinațiile posibile dă 6x6x6 - 216 culori. Un exemplu de culoare web este #33FF66.
Caracteristica principală a culorii web este că apare la fel în toate browserele. În prezent, relevanța culorilor web este foarte mică datorită îmbunătățirii calității monitoarelor și extinderii capacităților acestora.
Culori după nume
Pentru a evita să vă amintiți un set de numere, puteți utiliza în schimb numele culorilor utilizate în mod obișnuit. În tabel 6.3 arată numele numelor de culori populare.
| 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 .Codurile de culoare în CSS sunt folosite pentru a specifica culorile. În mod obișnuit, codurile de culoare sau valorile de culoare sunt utilizate 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 |
>>Gestiunea culorilor
Valori hexazecimale de culoare RGB
Metodele de descriere și procesare a culorii diferă unele de altele prin reprezentarea finală pentru care sunt destinate. Să comparăm, de exemplu, reprezentarea culorilor pentru imprimare și pentru monitoarele de computer. În primul caz, se ia baza alb culoarea hârtiei pe care se aplică ulterior 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 vopselelor dau hârtie albă. Dacă le adăugăm culoare neagră, obținem CMYK-o metoda de transmitere 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 într-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 dată de raportul fiecăreia dintre cele trei culori. În acest caz vom obține RGB-metoda de transmitere a culorii. 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 figura de mai jos puteți vedea rezultatele amestecării culorilor primare.
Sistemul de numere hexazecimale, spre deosebire de sistemul de numere zecimal, nu are zece cifre, ci șaisprezece - de unde și numele. În consecință, pot exista doar variante nerepetate ale combinațiilor de două cifre - 256 , pentru a continua seria numerelor după 9 scrisori de la A inainte de F, prin urmare, seria 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, mediu- 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: culoarea 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 specifica orice valori hexazecimale 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: gradații de roșu, albastru și verde.
| vedere | cod | vedere | cod | vedere | cod | vedere | cod | vedere | cod | vedere | cod |
| #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 literele ș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 numele culorilor:
| 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-închis | 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 | ||||
| violet mediu | Mediumseagreen | Mediumslateblue | verde mijlociu | ||||
| Turcoaz mediu | Roșu-violet mediu | Albastru miez de noapte | Cremă de mentă | ||||
| Mistyrose | Navajowhite | Marinei | Oldlace | ||||
| măsline | Oliverab | Portocaliu rosu | Orhidee | ||||
| Palegoldenrod | Verde palid | Paletteurquoise | 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 o paletă de culori sigură
Din păcate, pe platforme diferite, cu setări de sistem diferite, reproducerea 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 ce a vrut webmasterul 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ă în mod egal 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 toate modurile posibile 216 combinatiile lor.
| vedere | cod | vedere | cod | vedere | cod | vedere | cod | vedere | cod | vedere | cod |
| FFFFFF | 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 |
Culoarea în CSS poate fi setată în diferite moduri:
- dupa nume,
- prin valoare hexazecimală,
- în formatele RGB și RGBA,
- în formatele HSL și HSLA.
Setați culoarea după nume
Browserele acceptă specificarea unor culori pentru elemente după nume. Acest tabel conține câteva cuvinte cheie (nume de culori în limba engleză) utilizate pentru a specifica proprietățile culorii, codul RGB, codul hexazecimal (HEX) și codul HSL.
| Nume | Culoare | RGB | HEX | HSL | Descriere |
|---|---|---|---|---|---|
| alb | rgb(255, 255, 255) | #ffffff sau #fff | hsl(0, 0%, 100%) | alb | |
| argint | rgb(192, 192, 192) | #c0c0c0 | hsl(0, 0%, 75%) | Gri | |
| gri | rgb(128, 128, 128) | #808080 | hsl(0, 0%, 50%) | Gri inchis | |
| negru | rgb(0, 0, 0) | #000000 sau #000 | hsl(0, 0%, 0%) | Negru | |
| maro | rgb(128, 0, 0) | #800000 | hsl(0, 100%, 25%) | Roșu-închis | |
| roșu | rgb(255, 0, 0) | #ff0000 sau #f00 | hsl(0, 100%, 50%) | roșu | |
| portocale | rgb(255, 165, 0) | #ffa500 | hsl(38,8, 100%, 50%) | Portocale | |
| galben | rgb(255, 255, 0) | #ffff00 sau #ff0 | hsl(60, 100%, 50%) | Galben | |
| măsline | rgb(128, 128, 0) | #808000 | hsl(60, 100%, 25%) | măsline | |
| lămâie verde | rgb(0, 255, 0) | #00ff00 sau #0f0 | hsl(120, 100%, 50%) | Verde deschis | |
| verde | rgb(0, 128, 0) | #008000 | hsl(120, 100%, 25%) | Verde | |
| acva | rgb(0, 255, 255) | #00ffff sau #0ff | hsl(180, 100%, 50%) | Albastru | |
| albastru | rgb(0, 0, 255) | #0000ff sau #00f | hsl(240, 100%, 50%) | Albastru | |
| marina | rgb(0,0,128) | #000080 | hsl(240, 100%, 25%) | Albastru inchis | |
| teal | rgb(0, 128, 128) | #008080 | hsl(180, 100%, 25%) | Albastru verde | |
| fucsie | rgb(255, 0, 255) | #ff00ff sau #f0f | hsl(300, 100%, 50%) | Roz | |
| Violet | rgb(128, 0, 128) | #800080 | hsl(300, 100%, 25%) | violet |
Acesta este un exemplu de utilizare a numelor de culori, numele culorilor sunt preluate din tabelul extins.
Iată cum funcționează acest cod:
Setarea culorii folosind RGB
RGB este un model de culoare aditiv. În limba engleză plus- adaos. RGB este o abreviere a cuvintelor englezești: Red, Green, Blue - red, green, blue). Din aceasta rezultă clar că în modelul RGB culorile sunt sintetizate prin adăugarea a trei culori (roșu, verde, albastru) în cantități diferite.
Amestecând culorile roșu, verde și albastru puteți obține câteva milioane de nuanțe. Toate combinațiile posibile sunt stocate în memoria computerului.
Treci la subiect.
Pentru a seta proprietăți în acest format, utilizați notația rgb(r, g, b), unde r, g, b sunt cele trei canale pentru fiecare culoare (roșu, verde, albastru). Valorile pentru fiecare canal sunt setate în intervalul de la 0 la 255.
Exemplu de cod.
Pentru a clarifica totul, iată un exemplu de cod:
Iată cum ar trebui să funcționeze acest exemplu:
Fig.1. Culori în RGB. Explicatii de exemplu.
La începutul paginii creăm clasa div.rgb, este necesară pentru blocurile create de etichetă
Apoi, în cod setăm culoarea de fundal a blocului
Încercați să editați acest exemplu și să specificați propriile valori, de exemplu rgb(100, 100, 100) .
Setarea culorii folosind RGBA
CSS3 are un nou instrument pentru lucrul cu culoarea - formatul RGBA. Poate fi numită o evoluție a modelului RGB, dar cu adăugarea unui nou canal - canalul A sau alfa. Acest canal stabilește transparența culorii. Valorile sale sunt setate în intervalul de la 0 la 1. O valoare de 0 corespunde transparenței totale, 1 - opacității complete (culoarea va fi aceeași cu cea specificată în primele trei canale RGB) și valorilor intermediare cum ar fi 0,4 sau 0,6 - transluciditate în grade diferite.
Exemplu de cod.
Iată cum va funcționa:
Acest cod este similar vizual cu următorul, care utilizează modelul RGB pentru a specifica o valoare a culorii:
Iată rezultatul lui:
O valoare a canalului alfa egală cu zero face orice culoare invizibilă - absolut transparentă; o valoare egală cu unu traduce culoarea în codul RGB fără modificări. Proprietatea rgba(255,0,0,1.0) arată culoarea roșie rgb(255, 0, 0) .
După valoare hexazecimală (cod HEX)
În viața de zi cu zi, folosim sistemul de numărare zecimală. Originile sale sunt foarte simple - avem zece degete pe mâini și să numărăm pe degete a fost convenabil în viață. Dacă sistemul zecimal are zece cifre: de la 0 la 9, iar numărul 10 este următoarea cifră, atunci sistemul numeric hexazecimal are 16 cifre, iar următoarea cifră este numărul 16.
Pentru a indica codurile de culoare, cifrele zecimale obișnuite de la 0 la 9 sunt folosite ca cifre hexazecimale, iar literele latine de la A la F sunt folosite pentru a indica numerele de la 10 la 15, adică (0, 1, 2, 3, 4, 5 , 6, 7, 8, 9, A, B, C, D, E, F). Pentru claritate, să punem asta într-un tabel:
Pentru a scrie numere hexazecimale mai mari decât F (15 în sistemul zecimal), ca și în sistemul zecimal, se folosesc și combinația de două cifre, dar deja hexazecimală, ceea ce este evident. Astfel, pentru a scrie numărul zecimal 255 în notație hexazecimală, utilizați notația FF.
Sistemul hexazecimal este mai ușor de înțeles de computer și procesează mai rapid valorile stabilite de valoarea hexazecimală.
Pentru a specifica o culoare în hexazecimal, precedați valoarea numerică cu semnul „#”, exemplu: #FFC0CB. Valoarea #FFC0CB în sine constă din trei cifre hexazecimale FF, C0 și CB. Semnificația acestei intrări este aceeași cu setarea culorii în format RGB (rgb(r, g, b)) - fiecare cifră hexazecimală din codul HEX indică saturația culorii în canalul său al modelului RGB.
Acest cod va afișa următoarele elemente:
Și iată o imagine cu rezultatul din secțiunea „Setarea culorilor folosind RGB” din această pagină de mai sus.
Fig.1. Culori în RGB. Vedem că culorile sunt identice.
Este permisă o notație scurtă a codului de culoare HEX: un număr din 6 cifre poate fi scris ca un număr din 3 cifre. Acest lucru este valabil numai atunci când două cifre din valoarea culorii unui canal sunt repetate.
Adică, următoarea abreviere este acceptabilă:
De exemplu, culoarea #ff22aa poate fi scrisă ca #f2a, sau culoarea #44aa22 poate fi scrisă ca #4a2.
Setarea culorii folosind HSL
CSS3 are un nou format pentru specificarea culorilor.
Formatul HSL este o abreviere pentru cuvintele englezești: Hue (nuanță), Saturate (saturație) și Lightness (luminozitate).
Nuanța în HSL este valoarea unei culori pe o roată specială de culori (Figura 2) și este specificată în grade. Dacă tragem analogii cu modelul RGB, atunci 0° corespunde roșului, 120° corespunde verdelui și 240° corespunde albastrului.
Valoarea nuanței se va schimba de la 0 la 359.
Figura 2. Roata de culori HSL. A doua valoare - saturația (Saturate) este setată ca procent. La 100% saturație, culoarea este cât se poate de „suculentă”; pe măsură ce indicatorul de saturație se deplasează spre 0%, culoarea devine mai ternă și se rostogolește în gri.
A treia valoare, Luminozitatea, este, de asemenea, setată ca procent. Cu cât procentul este mai mare, cu atât culoarea va fi mai strălucitoare. Valorile extreme de 0% și 100% vor indica culorile negre (fără lumină) și, respectiv, alb (supraexpus), și nu contează ce culoare din roata de culori a fost selectată în primul canal. Valoarea optimă a luminozității culorii este de 50%.
Setarea culorii folosind HSLA
Formatul HSLA este legat de HSL, la fel cum RGB este de RGBA. În formatul HSLA, ca și în RGBA, este adăugat un canal alfa, care este responsabil pentru transparența culorii.
Culoarea specificată în format HSL este mai ușor de citit. Putem spune că este intuitiv. De exemplu, codul hsl(120,60%,50%) poate reprezenta culoarea finală dacă există o imagine a roții de culori HSL în memorie. Nu același lucru se poate spune despre formatele RGB și HEX; codul de culoare specificat în aceste formate devine clar doar după ce este vizualizat pe monitor.
Noile formate în CSS3 (HSL, HSLA și RGBA) funcționează în browsere începând de la versiunile: IE 9.0, Opera 10.0 Firefox 3.0. Cum pot face ca stilurile să funcționeze pe browsere mai vechi?
Somebloсk (culoare de fundal: rgb(255,50,50); culoare de fundal: rgba(255,50,50,0.85))
Când utilizați acest cod în browsere mai vechi, culoarea de fundal pentru clasa .somebloсk, deși nu va folosi un canal alfa, va fi afișată în format RGB.
HEX/HTML
Culoarea HEX nu este altceva decât o reprezentare hexazecimală a RGB.
Culorile sunt reprezentate ca trei grupuri de cifre hexazecimale, unde fiecare grup este responsabil pentru propria culoare: #112233, unde 11 este roșu, 22 este verde, 33 este albastru. Toate valorile trebuie să fie între 00 și FF.
Multe aplicații permit o formă scurtă de notație de culoare hexazecimală. 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) constă din toate culorile posibile care pot fi create 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 celelalte sunt setate la 0.
Unele aplicații (în special browserele web) acceptă înregistrarea 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, intrare 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 a RGB cu suport pentru un canal alfa, care determină opacitatea unui obiect.
Valoarea culorii RGBA este specificată ca: rgba (roșu, verde, albastru, alfa). Parametrul 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 obișnuit */
- 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 a modelului RGB într-un sistem de coordonate cilindric. HSL reprezintă culorile într-un mod mai intuitiv și mai ușor de citit de om decât RGB tipic. Modelul este adesea folosit în aplicații grafice, palete de culori și analiza imaginilor.
HSL înseamnă Hue (culoare/nuanță), Saturation (saturație), Luminozitate/Luminare (luminozitate/luminozitate/luminozitate, a nu fi confundat cu luminozitatea).
Nuanța specifică poziția culorii pe roata de culori (de la 0 la 360). Saturația este valoarea procentuală a saturației (de la 0% la 100%). Luminozitatea este un procent 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 care acceptă un canal alfa pentru a indica opacitatea unui obiect.
Valoarea culorii HSLA este specificată ca: hsla (nuanță, saturație, luminozitate, alfa). Parametrul 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 dintre cyan (cyan), magenta (magenta), galben (galben), cu adăugarea de negru (cheie/negru).
Fiecare dintre numerele care definesc o culoare în CMYK reprezintă procentul de cerneală dintr-o anumită culoare care alcătuiește combinația de culori sau, mai precis, dimensiunea punctului de pe ecran care este scos pe mașina de fotocompunere pe filmul de culoarea respectivă (sau direct pe placa de imprimare în cazul CTP).
De exemplu, pentru a obține culoarea PANTONE 7526, ar trebui să amestecați 9 părți cyan, 83 părți magenta, 100 părți galben și 46 părți negru. Acesta poate fi notat astfel: (9,83,100,46). Uneori sunt utilizate următoarele 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 (culoare/nuanță), Saturation (saturație), Brightness/Value (luminozitate/valoare).
Nuanța specifică poziția culorii pe roata de culori (de la 0 la 360). Saturația este valoarea procentuală a saturației (de la 0% la 100%). Luminozitatea este un procent din 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”, ceea ce înseamnă că nu puteți asocia 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. Scopul de proiectare al laboratorului a fost de a crea un spațiu de culoare în care modificările de culoare să fie mai liniare în ceea ce privește percepția umană (comparativ cu XYZ), adică, astfel încât aceeași modificare a valorilor coordonatelor de culoare în diferite regiuni ale spațiului de culoare să fie produce aceeași senzație de schimbare a culorii.
