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.
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.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, marker, 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 |
