După cum știți, culoarea poate afecta starea unei persoane: atât mentală, cât și fizică. În fiecare zi, privind site-urile de pe Internet, ochii evaluează milioane de culori și nuanțe. Un web designer care este familiarizat cu psihologia culorii poate manipula starea de spirit a unui vizitator pentru a atinge orice scop.
Acest lucru se datorează faptului că unele nuanțe sunt liniștitoare, în timp ce altele, dimpotrivă, sunt incitante. În continuare, vom vorbi despre modul în care culoarea este sintetizată și afișată folosind tehnologia computerizată.
RGB este un model de culoare care reprezintă o metodă de obținere a tuturor culorilor și nuanțelor acestora prin amestecarea în diverse proporții a trei componente principale, care sunt:
- Culoare rosie ( roșu);
- Culoarea verde ( Verde);
- culoarea albastra ( Albastru).
De aici provine numele abreviat RGB. Aceste culori au fost alese ca fiind principale dintr-un motiv: motivul este fiziologia retinei ochiului uman și modul în care le percepe:
Modelul RGB rămâne cel mai popular astăzi și este folosit pentru a reproduce culorile pe ecranele TV și pe monitoarele computerelor. Pe măsură ce producătorii își dotează produsele cu diferite caracteristici, în 1996 a fost creat un sistem unificat de sinteză a culorilor bazat pe RGB, numit sRGB, la care Microsoft și HP au colaborat.
Reprezentarea numerică a culorilor
După cum am menționat mai devreme, culorile RGB sunt formate prin amestecarea culorilor principale. Pentru a descrie intensitatea fiecăruia dintre ele s-a adoptat o schemă în care culoarea este reprezentată de intervalul 0-255 (8 biți), care în sistemul hexazecimal corespunde cu 00-FF.
Adică, culorile primare vor arăta astfel:
- Roșu - RGB (255,0,0);
- Verde - RGB (0.255.0);
- Albastru - RGB (0,0,255);
Dacă intensitatea culorii capătă valori mai mici de 255, atunci se obțin diferite nuanțe de roșu, verde și albastru. Mai jos este un tabel cu gradația lor, precum și valorile hexazecimale ale fiecăreia dintre nuanțe:
Tabelele de culori RGB
Desigur, pe lângă gradațiile culorilor primare, există și cele mixte, iar numărul lor este destul de mare. Prin urmare, a fost creat un tabel de culori RGB, în care sunt prezentate toate nuanțele existente, precum și numele și reprezentările numerice ale acestora ( zecimal și hexazecimal).
Vă puteți familiariza cu el aici. Acest tabel face viața mult mai ușoară pentru web designeri, deoarece în câteva secunde puteți găsi nuanța dorită și aflați reprezentarea numerică a acesteia.
Paletă de culori RGB sigură
Cu toate acestea, la un moment dat a apărut o problemă de afișare a culorilor în diferite browsere, iar pentru a o rezolva, a fost compilată o așa-numită paletă „sigură” de culori RGB, care au fost deduse prin calcule matematice.
Când browserul nu poate afișa corect o culoare, încearcă să se apropie de cea dorită amestecând culorile adiacente și, cel mai probabil, rezultatul va fi complet inacceptabil:
Prin utilizarea codurilor de culoare RGB din această paletă, un dezvoltator web nu se poate teme să afișeze culori pe paginile site-ului lor atunci când este vizualizat cu diferite browsere, platforme și monitoare. Deși în acest moment tabelul culorilor sigure își pierde relevanța ( progresul tehnic tot nu sta pe loc), când îl folosești, poți, după cum se spune, să dormi bine.
Culoare aurie în modelul RGB
Pentru prima dată, cuvântul „aur” a fost folosit la începutul secolului al XIV-lea pentru a descrie culoarea unui element chimic numit Aurum - aur. În RGB, aurul este reprezentat de următoarele valori numerice:
- RGB (255, 215, 0) - sistem zecimal;
- HEX # FFD700 - sistem hexazecimal.
Culoare bej în modelul RGB
Culoarea bej ocupă un loc destul de semnificativ în istorie, chiar dacă nu este cea mai expresivă. Multe monumente culturale, în special sculpturi antice, au fost realizate din piatră de sălatură și piatră de sălatură, care au o tentă bej. În RGB, bejul are următoarele reprezentări numerice.
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
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 |
>> 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 |
Culoarea în limbajul CSS poate fi setată în diferite moduri:
- dupa nume,
- prin valoare hexazecimală,
- în formatele RGB și RGBA,
- în formatele HSL și HSLA.
Atribuirea culorilor după nume
Browserele acceptă specificarea unor culori pentru elemente după nume. În acest tabel, unele cuvinte cheie (nume de culori în limba engleză) utilizate pentru a seta proprietățile culorii sunt 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 marin | |
| 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, denumirea culorilor este preluată 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 roșu, verde și albastru, puteți obține câteva milioane de nuanțe. Toate combinațiile posibile sunt stocate în memoria computerelor.
Treci la subiect.
Pentru a seta proprietăți în acest format, utilizați notația rgb (r, g, b), unde r, g, b sunt trei canale pentru fiecare culoare (roșu, verde, albastru). Valorile pentru fiecare canal variază de la 0 la 255.
Cod simplu.
Pentru a clarifica totul, voi da 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 o clasă div.rgb, este necesară pentru ca blocurile create de tag-ul
Apoi, în cod, setăm culoarea de fundal a blocului
Încercați să editați acest exemplu și să specificați valorile dvs., de exemplu rgb (100, 100, 100).
Setarea culorii folosind RGBA
CSS3 introduce 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 - A sau canal alfa. Acest canal stabilește transparența culorii. Valorile sale sunt setate în intervalul de la 0 la 1. O valoare egală cu 0 corespunde transparenței totale, 1 - opacității complete (culoarea va fi aceeași cu cea specificată în primele trei canale RGB) și intermediară valori, cum ar fi 0,4 sau 0,6 - la diferite grade de transluciditate.
Cod simplu.
Asa functioneaza:
Acest cod este vizual similar cu următorul, care utilizează modelul RGB pentru a seta valoarea culorii:
Iată rezultatul:
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ă rgb (255, 0, 0) roșu.
Valoare hexazecimală (cod HEX)
În viața de zi cu zi, folosim sistemul zecimal de numărare. Originile sale sunt foarte simple - avem zece degete pe mâini și înainte era convenabil să numărăm pe degete în viață. Dacă în sistemul zecimal există zece cifre: de la 0 la 9, iar numărul 10 este deja următoarea cifră, atunci în sistemul hexazecimal există 16 cifre, iar următoarea cifră va fi numărul 16.
Pentru a indica codurile de culoare ca cifre hexazecimale, se folosesc cifre zecimale obișnuite de la 0 la 9 și pentru a indica cifrele de la 10 la 15 se folosesc litere latine de la A la F, adică (0, 1, 2, 3, 4, 5 , 6, 7, 8, 9, A, B, C, D, E, F). Pentru claritate, să rezumam acest lucru într-un tabel:
Pentru a scrie numere hexazecimale mai mari decât F (15 în sistemul zecimal), ca și în sistemul zecimal, se folosește și unirea a două cifre, dar deja hexazecimală, ceea ce este evident. Deci, pentru a scrie numărul zecimal 255 în notația hexazecimală se folosește FF.
Sistemul hexazecimal este mai ușor de înțeles pentru computer, procesează mai rapid valorile specificate de valoarea hexazecimală.
Pentru a specifica culoarea în sistem 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 notații este aceeași cu setarea culorii RGB (rgb (r, g, b)) - fiecare cifră hexazecimală din codul HEX indică saturația culorii în canalul său RGB.
Acest cod va afișa următoarele elemente:
Și iată o poză cu rezultatul din secțiunea „Setarea culorii cu RGB” din această pagină de mai sus.
Fig. 1. Culori în RGB. Vedem că culorile sunt identice.
Este permisă o notație prescurtată a codului HEX de culoare: 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 a notației este acceptabilă:
De exemplu, culoarea # ff22aa poate fi scrisă astfel - # f2a, sau culoarea # 44aa22 poate fi specificată ca # 4a2.
Setarea culorii folosind HSL
CSS3 introduce un nou format pentru specificarea culorilor.
HSL este o abreviere a cuvintelor englezești Hue, Saturate și Lightness.
Nuanța în HSL este o valoare a culorii pe o roată specială de culoare (Figura 2) și este specificată în grade. În analogie cu modelul RGB, 0 ° corespunde roșului, 120 ° corespunde verdelui și 240 ° corespunde albastrului.
Valoarea nuanței va varia de la 0 la 359.
Figura 2. Roata de culori HSL. A doua valoare este saturația (Saturate) este setată în procente. La 100% saturație, culoarea este maximă „suculentă”, pe măsură ce indicatorul de saturație se deplasează la 0%, culoarea devine din ce în ce 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 însemna culorile negre (fără lumină) și, respectiv, alb (explozit), indiferent de culoarea din roata de culori a fost selectată în primul canal. Valoarea optimă a luminozității culorii poate fi considerată egală cu 50%.
Setarea culorii cu HSLA
HSLA este legat de HSL, la fel ca RGB cu RGBA. În formatul HSLA, ca și în RGBA, se adaugă un canal alfa care este responsabil pentru transparența culorii.
Culoarea HSL este mai ușor de citit. Putem spune că este intuitiv. De exemplu, un cod 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 de înțeles abia 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 fac 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 canalul alfa, va fi afișată în format RGB.
