Cod rgb de culoare violet. Culoarea în stiluri poate fi specificată în diferite moduri: prin valoare hexazecimală, după nume, în format RGB, RGBA, HSL, HSLA
După cum știți, culoarea poate afecta starea unei persoane: atât mentală, cât și fizică. În fiecare zi, în timp ce navighează pe site-uri web 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 vizitatorului pentru a atinge anumite obiective.
Acest lucru se datorează faptului că unele nuanțe calmează, iar altele, dimpotrivă, excită. Î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 proporții variate a trei componente principale, care sunt:
- Culoare rosie ( roșu);
- Culoarea verde ( Verde);
- Culoarea albastră ( 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. Deoarece producătorii își dotează produsele cu caracteristici diferite, în 1996 a fost creat un sistem unificat de sinteză a culorilor bazat pe RGB numit sRGB, la care Microsoft și HP au lucrat împreună.
Reprezentarea numerică a culorii
După cum am menționat mai devreme, culorile RGB sunt formate prin amestecarea culorilor primare. Pentru a descrie intensitatea fiecăruia dintre ele, a fost adoptată o schemă în care culoarea este reprezentată de intervalul 0-255 (8 biți), care în notație 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 ia valori mai mici de 255, atunci se obțin diferite nuanțe de roșu, verde și albastru. Următorul este un tabel cu gradațiile lor, precum și valorile hexazecimale ale fiecăreia dintre nuanțe:
Tabelele de culori RGB
Desigur, pe lângă gradările de culori primare, există și cele mixte, iar numărul lor este destul de mare. Prin urmare, a fost creat un tabel de culori RGB, care prezintă toate nuanțele existente, precum și numele și reprezentările numerice ale acestora ( în formă zecimală și hexazecimală).
O puteți vizualiza aici. Acest tabel face viața mult mai ușoară pentru web designeri, deoarece în câteva secunde puteți găsi nuanța necesară și aflați reprezentarea numerică a acesteia.
Paletă de culori RGB sigură
Cu toate acestea, la un moment dat a apărut o problemă cu afișarea culorilor în diferite browsere și, pentru a o rezolva, a fost compilată așa-numita paletă „sigură” de culori RGB, care au fost derivate prin calcule matematice.
Când browserul nu poate afișa corect o culoare, încearcă să obțină ceva aproape de ceea ce are nevoie prin amestecarea culorilor adiacente și, cel mai probabil, rezultatul va fi complet inacceptabil:
Folosind codurile de culoare RGB din această paletă, un dezvoltator web poate avea liniște în ceea ce privește afișarea culorilor pe paginile site-ului său atunci când sunt vizualizate folosind diferite browsere, platforme și monitoare. Deși în acest moment tabelul culorilor sigure își pierde relevanța ( progresul tehnologic încă nu stă pe loc), când îl folosești, poți, după cum se spune, să dormi liniștit.
Culoare aurie în modelul RGB
Cuvântul „aur” a fost folosit pentru prima dată la începutul secolului al XIV-lea pentru a descrie culoarea unui element chimic numit Aurum - aur. În modelul RGB, culoarea aurie 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 modelul RGB, culoarea bej are următoarele reprezentări numerice.
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 diferite nuanțe de culoare, cu excepția negrului pur, sau în absența completă a vopselelor dau hârtie albă. Dacă le adăugăm și culoare neagră, obținem CMYK- o metoda de transmitere a culorii cand culoarea ceruta este obtinuta 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 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 ele 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 utilizând 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 să se specifice multe 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 î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 | ||||
| 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 |
În HTML, culoarea poate fi specificată în trei moduri:
Setarea unei culori în HTML după numele acesteia
Unele culori pot fi specificate după numele lor, folosind numele culorii în engleză ca valoare. Cele mai comune cuvinte cheie: negru, alb, roșu, verde, albastru etc.:
Culoarea textului – roșu
Cele mai populare culori ale standardului World Wide Web Consortium (W3C):
| Culoare | Nume | Culoare | Nume | Culoare | Nume | Culoare | Nume |
|---|---|---|---|---|---|---|---|
| Negru | gri | Argint | alb | ||||
| Galben | Lămâie verde | Aqua | Fucsie | ||||
| roșu | Verde | Albastru | Violet | ||||
| Maro | măsline | Marinei | Teal |
Exemplu de utilizare a diferitelor nume de culori:
Exemplu: specificarea unei culori după numele acesteia
- Incearca-l tu insuti "
Antet pe fundal roșu
Antet pe fundal portocaliu
Îndreptare pe fundal de var
Text alb pe fundal albastru
Antet pe fundal roșu
Antet pe fundal portocaliu
Îndreptare pe fundal de var
Text alb pe fundal albastru
Specificarea culorii folosind RGB
Când se afișează culori diferite pe un monitor, paleta RGB este folosită ca bază. Orice culoare se obține prin amestecarea a trei culori de bază: R - roșu, G - verde, B - albastru. Luminozitatea fiecărei culori este dată de un octet și, prin urmare, poate lua valori de la 0 la 255. De exemplu, RGB(255,0,0) este afișat ca roșu, deoarece roșu este setat la cea mai mare valoare (255) și restul sunt setate la 0 Puteți seta și culoarea ca procent. Fiecare parametru indică nivelul de luminozitate al culorii corespunzătoare. De exemplu: valorile rgb(127, 255, 127) și rgb(50%, 100%, 50%) vor seta aceeași culoare verde mediu:
Exemplu: Specificarea culorii folosind RGB
- Incearca-l tu insuti "
rgb(127, 255, 127)
rgb(50%, 100%, 50%)
rgb(127, 255, 127)
rgb(50%, 100%, 50%)
Setați culoarea după valoarea hexazecimală
Valori R G B poate fi specificat și folosind valori hexazecimale (HEX) de culoare sub forma: #RRGGBB unde RR (roșu), GG (verde) și BB (albastru) sunt valori hexazecimale de la 00 la FF (la fel ca zecimalul 0-255). ). Sistemul hexazecimal, spre deosebire de sistemul zecimal, se bazează, după cum sugerează și numele, pe numărul 16. Sistemul hexazecimal folosește următoarele semne: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Aici numerele de la 10 la 15 sunt înlocuite cu litere latine. Numerele mai mari de 15 în sistemul hexazecimal sunt reprezentate prin combinarea a două caractere într-o singură valoare. De exemplu, cel mai mare număr 255 în zecimală corespunde celei mai mari valori FF în hexazecimal. Spre deosebire de sistemul zecimal, un număr hexazecimal este precedat de un simbol hash. # , de exemplu, #FF0000 este afișat ca roșu, deoarece roșul este setat la cea mai mare valoare (FF) și restul culorilor sunt setate la valoarea minimă (00). Semne după simbolul hash # Puteți introduce atât litere mari, cât și litere mici. Sistemul hexazecimal vă permite să utilizați forma prescurtată #rgb, unde fiecare caracter este echivalent cu dublu. Astfel, intrarea #f7O ar trebui considerată ca #ff7700.
Exemplu: Culoare HEX
- Incearca-l tu insuti "
roșu: #FF0000
verde: #00FF00
albastru: #0000FF
roșu: #FF0000
verde: #00FF00
albastru: #0000FF
roșu+verde=galben: #FFFF00
roșu+albastru=violet: #FF00FF
verde+albastru=cian: #00FFFF
Lista culorilor utilizate frecvent (nume, HEX și RGB):
| nume englezesc | nume rusesc | Probă | HEX | RGB | ||
|---|---|---|---|---|---|---|
| Nemuritoare | Nemuritoare | #E52B50 | 229 | 43 | 80 | |
| Chihlimbar | Chihlimbar | #FFBF00 | 255 | 191 | 0 | |
| Aqua | Albastru verde | #00FFFF | 0 | 255 | 255 | |
| Azur | Azur | #007FFF | 0 | 127 | 255 | |
| Negru | Negru | #000000 | 0 | 0 | 0 | |
| Albastru | Albastru | #0000FF | 0 | 0 | 255 | |
| Bondi Blue | Apa de pe plaja Bondi | #0095B6 | 0 | 149 | 182 | |
| Alamă | Alamă | #B5A642 | 181 | 166 | 66 | |
| Maro | Maro | #964B00 | 150 | 75 | 0 | |
| Albastru ca cerul | Azur | #007BA7 | 0 | 123 | 167 | |
| Verde închis de primăvară | Verde închis de primăvară | #177245 | 23 | 114 | 69 | |
| Smarald | Smarald | #50C878 | 80 | 200 | 120 | |
| Vânătă | Vânătă | #990066 | 153 | 0 | 102 | |
| Fucsie | Fucsie | #FF00FF | 255 | 0 | 255 | |
| Aur | Aur | #FFD700 | 250 | 215 | 0 | |
| gri | Gri | #808080 | 128 | 128 | 128 | |
| Verde | Verde | #00FF00 | 0 | 255 | 0 | |
| Indigo | Indigo | #4B0082 | 75 | 0 | 130 | |
| Jad | Jad | #00A86B | 0 | 168 | 107 | |
| Lămâie verde | Lămâie verde | #CCFF00 | 204 | 255 | 0 | |
| Malachit | Malachit | #0BDA51 | 11 | 218 | 81 | |
| Marinei | Albastru inchis | #000080 | 0 | 0 | 128 | |
| Ocru | Ocru | #CC7722 | 204 | 119 | 34 | |
| măsline | măsline | #808000 | 128 | 128 | 0 | |
| Portocale | Portocale | #FFA500 | 255 | 165 | 0 | |
| Piersică | Piersică | #FFE5B4 | 255 | 229 | 180 | |
| Dovleac | Dovleac | #FF7518 | 255 | 117 | 24 | |
| Violet | violet | #800080 | 128 | 0 | 128 | |
| roșu | roșu | #FF0000 | 255 | 0 | 0 | |
| Şofran | Şofran | #F4C430 | 244 | 196 | 48 | |
| Mare verde | Marea verde | #2E8B57 | 46 | 139 | 87 | |
| Verde de mlaștină | Bolotny | #ACB78E | 172 | 183 | 142 | |
| Teal | Albastru verde | #008080 | 0 | 128 | 128 | |
| Ultramarin | Ultramarin | #120A8F | 18 | 10 | 143 | |
| violet | violet | #8B00FF | 139 | 0 | 255 | |
| Galben | Galben | #FFFF00 | 255 | 255 | 0 | |
Codurile de culoare (fond) după saturație și nuanță.
Vlad Merjevici
În HTML, culoarea este specificată într-unul din două moduri: folosind codul hexazecimal și prin numele anumitor culori. Metoda bazată pe sistemul numeric hexazecimal este folosită î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 culorilor (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
Culorile web
Dacă setați calitatea de redare a culorilor 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 ne asigura că culoarea rămâne aceeași în diferite browsere, a fost introdusă o paletă de așa-numite 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.
| Numele culorii | 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 .
