Culoare lăptoasă html. Culorile în „MTA”: ce trebuie să știți? Coduri de culoare

Codurile de culoare în CSS sunt folosite pentru a specifica o culoare. Î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.

Nota: 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 î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

Î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):

CuloareNumeCuloareNume CuloareNume CuloareNume
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 ei

  • Încearcă singur »

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 de saturație medie:

Exemplu: specificarea culorii folosind RGB

  • Încearcă singur »

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

  • Încearcă singur »

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 comune (nume, HEX și RGB):

nume englezesc nume rusesc Eşantion 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 închis #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
Verde de mare 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ță.

Din păcate, nu este încă posibilă afișarea senzațiilor gustative pe site. Dar acest lucru poate fi compensat pe deplin cu ajutorul culorilor. La urma urmei, culorile html vă permit să afișați oricare dintre milioanele de nuanțe. Deci " creioane colorate Sunt mult mai mult de șapte în setul lui.

Schema de culori în html

În html, culoarea poate fi specificată în mai multe formate:

1. Ca valoare hexazecimală – se utilizează codul specificat în sistemul numeric hexazecimal. Astfel de coduri de culoare în html constau din trei perechi de numere hexazecimale. Fiecare pereche este responsabilă pentru saturația nuanței cu culoarea sa primară:

  • Prima pereche numerică este responsabilă pentru culoarea roșie;
  • A doua pereche este pentru conținutul de culoare verde;
  • Acesta din urmă este pentru conținutul său albastru.

Un semn hash este plasat la începutul codului (înaintea numerelor). Acesta este codul de culoare hexazecimal. Pe lângă numerele de la 1 la 9, acest sistem de numere folosește litere din alfabetul latin (A, B, C, D, E, F).

De exemplu, codul de culoare albă din html va arăta ca #FFFFFF:

2. Cuvinte cheie – HTML acceptă în prezent aproximativ 147 de cuvinte cheie. Dar nu toate aceste cuvinte sunt unice. Unele dintre ele se referă la aceeași nuanță de culoare.

Culoarea gri este reprezentată de două cuvinte cheie: gri și gri. Codul lor hexazecimal (HEX) este dat de aceeași valoare #808080.

Exemplu:

#808080




3. În format RGB - această codificare a culorilor în html se bazează pe utilizarea a trei valori, stabilite în intervalul de la 0 la 255. Fiecare dintre ele determină saturația nuanței cu una dintre culorile primare:

  • R – roșu (roșu);
  • G – verde (verde);
  • B – albastru (albastru).

Numărul de culoare în format RGB este scris sub următoarea formă: rgb(0, 210, 100).

culoare de fundal:rgb(100,186,43)


4. În formatul RGBA - este un format RGB îmbunătățit, unde a patra valoare specifică transparența culorii ca fracție zecimală de la 0 la 1.

Exemplu de utilizare:

culoare de fundal:rgba(100,86,143,0.2)

culoare de fundal:rgba(100,86,143,0.5)

culoare de fundal:rgba(100,86,143,0.8)

culoare de fundal:rgba(100,86,143,1)


Tabele de culori HTML și generatoare de culori

Cu o gamă atât de largă de formate de setare a culorilor, este ușor să fii confuz. Prin urmare, a fost inventat un tabel special de culori. Oferă 147 de nume cheie de nuanțe de culoare cu coduri de conformitate în toate standardele majore de culoare. În plus, fiecare câmp este echipat cu o bară pentru selectarea vizuală a culorii. Unul dintre aceste tabele este prezentat pe site-ul colorscheme.ru:


Dar chiar și cu această structurare a potrivirii, alegerea nuanței potrivite poate fi dificilă. Și nu este un fapt că tabelul de coduri de culoare îl va conține pe cel de care aveți nevoie.

Pentru a ocoli acest obstacol și a face alegerea nuanței potrivite cât mai ușor posibil, au fost dezvoltate servicii web interactive. Interfața lor de utilizator poate diferi ușor una de cealaltă.

Pe site-ul html-color-codes.info, generatorul de culori arată astfel:


Și în cadrul serviciului color-picker.appsmaster.co, acest instrument este implementat puțin diferit:


Saturația fiecărei culori din generator este setată folosind glisoare speciale. Vizual, nuanța este afișată de culoarea cadrului și dreptunghiului din partea stângă. În partea de jos, 3 câmpuri afișează codul de culoare în formate de bază.

Dar generatorul de culori este disponibil nu numai pe site-urile specializate. Aproape toate editoarele grafice sunt echipate cu un instrument similar. De exemplu, Photoshop:


Măsuri de siguranță atunci când lucrați cu culoarea

Și asta a fost cu mult timp în urmă, în epoca plăcilor video care suportau doar 256 de culori. În acele vremuri îndepărtate, sistemele de operare puteau afișa doar un anumit număr de nuanțe de opt biți fără distorsiuni.

Apoi a fost dezvoltat un mare tabel de culori sigure. Specifica 216 nuanțe care puteau fi afișate fără distorsiuni în oricare dintre browserele de atunci. Și până în ziua de azi aceasta" mare manuscris» este încă disponibil pentru unele resurse:


În zilele noastre totul s-a schimbat. Prin urmare, toate regulile de siguranță atunci când lucrați cu culoarea în html sunt complet anulate. La urma urmei, hardware-ul computerelor moderne acceptă mai mult de 16 milioane de nuanțe diferite. Și 216 culori sigure s-au scufundat în uitare.

Aceste date sunt pe deplin confirmate de statistici. Judecând după asta, în 2014, doar 0,5% dintre utilizatori au computere care suportă doar 256 de nuanțe.

Bazele armoniei culorilor

Nu toți suntem înzestrați cu un simț natural al gustului armonios. Prin urmare, alegerea culorii potrivite poate fi o adevărată provocare. Dar, laudele științei, ea a reușit chiar să descrie armonia culorilor sub forma mai multor scheme. Toate se bazează pe utilizarea unei roți de culoare. Scheme pentru selecția armonioasă a culorilor în html:

  • Schemă de culori paralelă - când ambele nuanțe din roata de culori sunt paralele;
  • Schema triadică - toate colțurile unui triunghi se bazează pe una dintre culori;
  • Monocromatic - atunci când sunt selectate mai multe nuanțe apropiate de aceeași culoare;
  • Analog este o versiune mai avansată a circuitului monocromatic. În acest caz, nuanțele de aceeași culoare sunt situate la o anumită distanță.

Implementarea tuturor acestor scheme este bine prezentată în cadrul serviciului paletton.com. Vă permite să selectați cu ușurință o culoare armonioasă.

Coduri Minecraft flori, sau Minecraft coduri formatare, permite oricărui jucător să adauge flori și să formateze textul în toate modurile posibile direct în Minecraft. Coduri de culoare de la &0-9 - la &a-f. Adăugați-le înaintea textului dvs. Mesajele de la jucători pot conține coduri de culoare care vă permit să adăugați culoare propozițiilor dvs.

Culori și coduri de formatare

Semnul ampersand (&) urmat de un număr hexazecimal în mesaje semnalează clientului să schimbe culorile atunci când afișează text. În plus, textul poate fi formatat cu & urmat de o literă. Puteți adăuga diferite culori la cărți, blocuri de comandă, numele serverului, descrierea serverului (motd), nume lumii, semne și chiar numele jucătorilor.

Este foarte ușor să vă formatați textul în configurații sau în joc folosind diagrama de culori de mai jos. &r este folosit pentru a reseta toate codurile, de ex. &mAAA&rBBB va fi afișat ca AAA BBB.

Vă prezentăm un tabel cu codurile de culoare existente în Minecraft pentru confortul dvs.:

CodNumeDenumirea tehnicăCuloarea simboluluiCuloarea umbrei simbolului
RGBHexRGBHex
&0 Negrunegru0 0 0 000000 0 0 0 000000
&1 Albastru închisalbastru_închis0 0 170 0000AA0 0 42 00002A
&2 Verde închisverde_închis0 170 0 00AA000 42 0 002A00
&3 Albastru-verde închisdark_aqua0 170 170 00AAA0 42 42 002A2A
&4 Roșu închisroșu_închis170 0 0 AA000042 0 0 2A0000
&5 Mov închisviolet_închis170 0 170 AA00AA42 0 42 2A002A
&6 Auraur255 170 0 FFAA0042 42 0 2A2A00
&7 Grigri170 170 170 AAAAAA42 42 42 2A2A2A
&8 Gri închisgri_închis85 85 85 555555 21 21 21 151515
&9 Albastrualbastru85 85 255 5555FF21 21 63 15153F
&oVerdeverde85 255 85 55FF5521 63 21 153F15
&bAlbastru-verdeacva85 255 255 55FFFF21 63 63 153F3F
&cRoşuroşu255 85 85 FF555563 21 21 3F1515
&dviolet deschisviolet_deschis255 85 255 FF55FF63 21 63 3F153F
&eGalbengalben255 255 85 FFFF5563 63 21 3F3F15
&fAlbalb255 255 255 FFFFFF63 63 63 3F3F3F

Uneori este necesar subliniază, tăiați, evidențiați orice text. Acest lucru se face folosind formatarea textului. Este folosit exact în același mod ca și culorile (am pus înaintea textului cod, de exemplu &lMinecraft = Minecraft.

Pentru confortul dvs., mai jos este un tabel cu coduri de formatare:

CodNume
&kText magic
&lText îngroșat
&mText barat
&nText subliniat
&oText italic
&rText fără formatare

CSS nu este înțeles). Prin urmare, viitorul webmaster trebuie pur și simplu să studieze Instrumente HTML care vă permit să schimbați culoarea, de exemplu, pentru a realiza buletine informative prin e-mail luminoase și colorate care să atragă atenția publicului țintă al site-ului.

Această postare este destul de lungă, dar din ea veți afla despre toate caracteristicile tehnice ale lucrului cu culoarea folosind HTML. Vom începe înregistrarea prin înțelegerea întrebării: de ce trebuie să evidențiem anumite elemente ale unei pagini HTML cu culoare? Apoi vom vorbi despre modelul RGB, care vă permite să setați culorile în HTML folosind coduri speciale (pe parcurs, ne vom uita la codurile de culoare zecimale și la valorile de culoare HTML hexazecimale). Tot din această postare veți afla despre paleta de culori și, de asemenea, veți înțelege de ce nu există paletă în HTML. Și la sfârșitul acestei publicații vor exista exemple de schimbare a culorii de fundal, a textului și a linkurilor.

Utilizarea culorilor în HTML

Paginile de site ar fi plictisitoare și neinteresante fără imagini, așa cum am vorbit mai devreme și în detaliu. Dar imaginile au un dezavantaj semnificativ: fiecare imagine este una suplimentară și, în consecință, o încărcare suplimentară pentru găzduire.

Aș dori să notez că nu am folosit o singură imagine pentru a-mi proiecta blogul WordPress; La fel Astăzi vom vorbi despre culori în HTML. Culorile în HTML sunt folosite în scopuri diferite, de exemplu, putem proiecta machete de site-uri web prin evidențierea anumitor elemente cu o culoare sau alta.

Folosind culoarea, putem concentra atenția vizitatorilor noștri asupra unui anumit text sau bloc al site-ului. Rețineți că se determină și folosind culoarea în așa fel încât utilizatorul să poată înțelege: pe ce link a făcut deja clic, pe care nu a vizitat încă și pe ce pagină HTML se află în prezent.

Atenție folosind culori pentru a proiecta documente HTML, nu toate culorile merg împreună și nu fiecare culoare va fi plăcută vizitatorilor site-ului dvs. Dar ar fi bine să întrebați designerii web despre aceste subtilități, acest articol vă va ajuta să înțelegeți caracteristicile tehnice care vă permit să controlați culoarea elementelor paginii HTML.

Dar nu trebuie să uitați că designul trebuie separat de conținut, așa că este mai bine să folosiți CSS pentru a manipula culoarea pe paginile HTML, dar despre asta vom vorbi într-o altă postare. Acum vom vedea Ce instrumente are HTML pentru a controla culoarea în paginile site-ului?.

În industria IT, există multe modele de culoare pentru manipularea culorilor. Cel mai utilizat model de reprezentare a culorilor este modelul RGB. Despre câteva dintre caracteristicile acestui model vom vorbi aici și va exista o publicație separată pentru o introducere mai detaliată a RGB. Mai jos veți găsi o listă de modele de culori utilizate în IT (nu doar HTML și CSS):

  1. Model RGB. Acest model a devenit foarte răspândit și este poate una dintre cele mai convenabile și comune modalități de a manipula culoarea elementelor HTML.
  2. Model RGBA. Acest model este foarte asemănător cu modelul RGB, dar include un canal alfa pentru culoare. Caracteristica specială a modelului RGBA este că vă permite să ajustați nu numai culoarea elementului HTML, ci și transparența acestuia datorită prezenței unui canal alfa. Modelul RGBA a fost adăugat la CSS3 și nu este acceptat de browserele mai vechi.
  3. Model HSL. Particularitatea modelului HSL este că setăm culoarea folosind parametrii săi: nuanță, intensitate și luminozitate. Acest model este ceva mai greu de înțeles decât modelul RGB.
  4. Model HSLA. Acest model este foarte asemănător cu modelul HSL, dar la fel ca și modelul RGBA, vă permite să lucrați cu canalul de culoare alfa, astfel că folosind HSLA putem seta nu doar culoarea unui element HTML pe pagină, ci și transparența acestuia. .
  5. Model HSV (HSB). Acest model nu trebuie confundat cu modelul HSL. Rețineți că primele patru modele pot fi folosite în HTML sau CSS pentru a proiecta pagini web, dar modelul HSV nu. HSV a fost proiectat de unul dintre fondatorii Pixar în 1978 și este foarte asemănător cu HSL.
  6. Model CMY sau CMYK. Acest model este utilizat în toate imprimantele color pentru imprimare. Modelul CMYK se bazează pe regula conform căreia tipărirea are loc pe coli albe de hârtie. Orice culoare CMYK se obține prin amestecarea Cyan (albastru pal, turcoaz), Magenta (magenta) și galben. Fiecare culoare din modelul CMY are o caracteristică de opacitate (cantitate de cerneală), măsurată ca procent. Dar pe lângă cele trei culori enumerate, modelul CMYK folosește și negru.

Toate modelele de culoare de mai sus sunt dependente de hardware, adică dacă dvs setați culoarea unui element HTML folosind modelul RGB sau HSL, atunci este imposibil să spuneți cu certitudine ce nuanță exactă de culoare va vedea un vizitator al site-ului dvs., deoarece monitoarele tuturor utilizatorilor sunt diferite și transmit culorile diferit. De asemenea, rețineți că toate modelele de mai sus se bazează pe modelul RGB și orice culoare specificată în oricare dintre modele (cu excepția HSLA și RGBA datorită prezenței unui canal alfa) poate fi convertită în RGB.

Dacă vorbim despre modele de transfer de culoare independente de hardware, este de remarcat modelul LAB. Așadar, am luat o mică pauză de la lucrul cu culoarea în HTML, familiarizându-ne cu unele modele de culoare. Rețineți că browserele „înțeleg” doar primele patru modele: HSL, RGB, HSLA și RGBA. Prin urmare, putem controla doar culoarea elementelor HTML folosind aceste modele.

Cum se formează culoarea unui element HTML: câteva caracteristici ale modelului RGB

Să ne dăm seama cum se formează culoarea unui element HTMLși cu unele caracteristici ale modelului RGB. Rețineți că vom vorbi despre modelul RGB, precum și despre alte modele care sunt folosite pentru proiectarea paginilor web, puțin mai târziu în postări separate.

Deci, modelul RGB reprezintă roșu, verde, albastru. Modelul RGB se bazează pe principiul aditivității. Acest principiu este că pentru a obține orice culoare, culoarea se adaugă negru. Pentru o mai bună înțelegere, imaginați-vă că ecranul dvs. este un perete negru și aveți trei spoturi: primul strălucește roșu, al doilea strălucește verde, iar al treilea strălucește albastru. Puteți regla luminozitatea fiecărui spot folosind o riglă cu numere de la 0 la 255. În consecință, dacă setați reflectorul la zero, acesta se stinge și nu strălucește dacă valoarea este 255, atunci reflectorul produce cea mai strălucitoare culoare posibilă; .

Astfel, se dovedește că dacă străluciți un reflector roșu și unul verde în același punct, atunci veți observa o pată galbenă pe un perete negru. Dacă combinați roșu și albastru, obțineți violet, iar dacă combinați verde și albastru, punctul de lumină de pe un perete negru va fi Cyan, dar dacă îndreptați toate cele trei spoturi într-un punct, punctul de lumină va fi alb.

Principiul descris mai sus stă la baza modelului RGB și este folosit pentru a manipula culorile în elemente HTML dintr-o pagină dintr-un browser.

Atribute HTML pentru schimbarea culorii elementelor: culoarea de fundal a elementului și culoarea textului din interiorul elementului

Folosit pentru a face elementele paginii unice. Folosind atributele HTML putem manipula culoarea elementelor:

  1. Culoarea atributului HTML. Acest atribut vă permite să schimbați culoarea textului din interiorul elementului HTML. Atributul poate lua valori sub formă de nume de culori HTML și coduri de model RGB în notații hexazecimale și zecimale. Atributul de culoare este un atribut HTML unic care vă permite să schimbați culoarea textului în interiorul anumitor elemente HTML.
  2. Atribut text HTML. Acest atribut este un atribut de etichetă unic . Etichetă împreună cu etichete Şi forma . Dacă vă amintiți, în interiorul recipientului sunt plasate elemente care sunt apoi afișate de browser în zona de vizualizare. Atributul text vă permite să specificați Culoarea implicită a textului pentru întreaga pagină HTML.
  3. Atributul HTML bgcolor. Este, de asemenea, un atribut HTML unic și vă permite să schimbați culoarea de fundal a unor elemente HTML.
  4. Atribut HTML vlink. Acest atribut este unic și se aplică numai etichetei pentru a schimba culoarea unui link pe care utilizatorul l-a vizitat deja.
  5. Atribut HTML alink. Acest atribut este, de asemenea, unic și se aplică numai etichetei . Atributul alink schimbă culoarea linkului HTML activ.
  6. Atribut link HTML. Atributul link este utilizat numai împreună cu o etichetă și servește la schimbarea culorii link-urilor paginilor HTML pe care utilizatorul nu le-a vizitat încă.

Vă rugăm să rețineți: utilizarea atributelor pentru a schimba culoarea elementelor HTML nu este recomandată, deoarece există foi de stil în cascadă care vă permit să separați designul unei pagini web de conținutul acesteia.

Utilizarea codurilor de culoare zecimală în HTML

Deci, am vorbit despre faptul că puteți seta luminozitatea reflectoarelor folosind o riglă specială pe care există desene numerotate de la 0 la 255. Acum să vedem cum ne va ajuta acest lucru să schimbăm culoarea elementelor HTML. Chestia este că putem schimba culoarea textului din interiorul unui element HTML sau culoarea de fundal în HTML folosind cod zecimal, după cum urmează:

Dacă creați un document HTML în care este descris containerul de corp, ca în exemplu, veți vedea:

  1. Culoarea de fundal a documentului HTML este acum verde: bgcolor="rgb (0,255,0)".
  2. Culoarea textului paginii HTML va deveni albastră: text="rgb (0,0,255)".
  3. Culoarea HTML a unui link pe care utilizatorul nu l-a vizitat va fi albă: link="rgb (255,255,255)".
  4. Culorile linkului care este deschis în prezent vor fi negre: alink="rgb (0,0,0)".
  5. Și culoarea link-ului HTML care a fost deja vizitat va fi roșu: vlink="rgb (255,0,0)".

Vă rugăm să rețineți: nimeni nu vă interzice să reglați „puterea reflectoarelor” la discreția dvs., puteți setați culoarea HTML, de exemplu, astfel:

rgb(94, 85, 50)

Și obține culoarea surprizei copilărești. Aceasta este particularitatea, flexibilitatea și comoditatea modelului RGB. Monitorul dvs. este un perete negru cu reflectoare strălucind pe el și puteți ajusta puterea acestor spoturi și puteți crea tot felul de culori de fundal, text și link-uri folosind atribute HTML în sistemul de notație zecimală sau, de asemenea, puteți spune: folosind coduri de culoare zecimale.

De fapt Este greșit să spui coduri de culoare zecimale în HTML, mai corect ar fi să spunem Codurile de culoare zecimale RGB, deoarece acest model este folosit nu numai pentru proiectarea paginilor web în HTML și CSS.

Valori de culoare HTML hexazecimale

Setarea culorii elementelor HTML folosind coduri zecimale ale modelului RGB nu este foarte convenabilă (și în prezent, nu toate browserele acceptă această metodă de manipulare a culorilor), deoarece înregistrarea nu va fi cea mai compactă pentru care este mult mai convenabil setați culoarea elementelor HTML folosind valori hexazecimale. În imaginea de mai jos puteți vedea cum valorile zecimale sunt convertite în hexazecimal.

Pentru cei care nu sunt familiarizați cu sistemul numeric hexazecimal, ar trebui să se ofere o mică explicație, astfel încât să puteți ușor manipulați culoarea elementelor HTML folosind coduri de model RGB hexazecimale. În primul rând, sistemul numeric zecimal este numit astfel deoarece orice număr poate fi obținut printr-o combinație de zece cifre (terminologia este importantă: există o diferență între un număr și o cifră): 0, 1, 2, 3, 5, 6, 7, 8, 9.

În sistemul numeric hexazecimal, orice număr poate fi scris folosind o combinație de șaisprezece cifre: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f. Pentru ușurință de înțelegere, puteți presupune că a este zece și f este cincisprezece. De exemplu, numărul șaisprezece ar fi scris în hexazecimal ca 10. Și numărul 255 ar fi scris ca ff.

Acum să vedem cum putem setați culoarea elementelor HTML folosind valori hexazecimale, să repetăm ​​exemplul nostru anterior, înlocuind codurile de culoare zecimale cu omologii lor hexazecimali:

< body alink = ”#000000” link="#ffffff” vlink="ff0000” bgcolor="#00ff00” text="#0000ff”>

Vă rugăm să rețineți: scrierea culorii în HTML în format hexazecimal este oarecum mai compactă decât în ​​zecimală, acesta este primul. În al doilea rând: puterea fiecărui spot este setată de numere de la 0 la 255. Pentru a scrie numărul 255 sunt necesare două cifre în format hexazecimal (ff = 250), deci luminozitatea fiecărui canal de culoare (reflectoarele noastre sunt numite corect canal de culoare, canal de culoare) este setat de două numere de la 0 la f.

Vă rugăm să rețineți: luminozitatea fiecărui canal de culoare este setată separat, dar dacă ne imaginăm că acesta este un singur număr, atunci numărul maxim posibil în sistemul numeric hexazecimal al modelului RGB este ffffff, ne va da alb, iar în sistem zecimal este: 16.777.215. Acest număr de culori și nuanțe vă permite să setați/utilizați modelul RGB. Acest număr provine din faptul că fiecare canal de culoare are 256 de valori de luminozitate (de la 0 la 255), respectiv: 256 * 256 * 256 = 16.777.215.

Valorile de culoare HTML hexazecimale sunt mai compacte și mai clare, cei mai mulți designeri web și designeri de layout folosesc valori hexazecimale pentru a manipula culoarea în HTML, așa că vă recomandăm să nu vă obișnuiți cu forma zecimală a notației de culoare, ci să utilizați imediat hexazecimalul.

Este clar că la început va fi dificil pentru un designer începător sau un designer de layout să navigheze în forma hexazecimală a notației de culoare, astfel încât aproape orice editor grafic are o așa-numită paletă de culori, care vă permite să selectați culoarea dorită și să obțineți cod pentru diferite modele de culori în diferite sisteme de numere.

Unele editoare de text, cum ar fi , au extensii de paletă care sunt foarte utile atunci când doriți să selectați rapid o culoare și să o schimbați. Nu pot spune nimic despre asta în acest sens.

Nume de culori în HTML

Atributele HTML pot lua drept valori nu numai coduri zecimale și valori hexazecimale, dar și nume speciale de flori. Schimbarea culorii elementelor HTML folosind numele acestuia nu este o idee bună. În primul rând, în spatele numelui de culoare în HTML se află codul modelului RGB și, în al doilea rând, fiecare browser afișează diferit culoarea elementului HTML specificat de nume, depinde doar de dorința dezvoltatorilor browserului.

De aceea utilizarea unui nume de culoare în HTML nu este recomandată. Modelul RGB este dependent de hardware, iar culoarea specificată de nume depinde de browser și chiar de versiunea acestuia. Să încercăm să setăm culoarea elementelor paginii HTML folosind numele:

< body alink = ”black ”link = ”#alb” vlink=”roșu” bgcolor=”verde” text=”albastru”>

După cum înțelegeți, există o mulțime de culori și nuanțe. Merită remarcat aici că atributele HTML nu vă permit să setați un gradient CSS are această opțiune, dar despre asta vom vorbi într-o altă postare. Și multe culori în HTML au nume. Puteți găsi un tabel cu nume de culori în HTML și codurile lor RGB pe site-ul meu.

Tabelul de mai sus arată ce culoare va avea elementul HTML dacă îl specificați folosind numele. Acest tabel conține 16 culori și numele acestora, care sunt aprobate de W3C și ar trebui să fie afișate la fel în orice browser. Dar, de fapt, în HTML poți folosi aproximativ 200 de nume de culori care sunt suportate de browserele majore, precum: Opera, Chrome, Firefox, Safari, Internet Explorer (această afirmație este foarte controversată în privința acestuia din urmă).

Paleta de culori HTML

De fapt nu există o paletă de culori în HTML. Să ne amintim definiția cuvântului paletă. O paletă este o placă mică și subțire de formă pătraunghiulară sau ovală pe care artistul amestecă vopsele și obține tot felul de culori. Uneori se face o gaură în paletă pentru degetul mare pentru a-l face confortabil de ținut. Veți găsi o imagine a paletei mai jos. De aceea nu există o paletă în HTML.

Dar în diverse editori de text există pluginuri pentru paleta de culori acel ajutor selectați rapid culoarea unui element HTML. Există, de asemenea, o paletă de culori în editorii grafici, deoarece nu este foarte convenabil și distractiv pentru un designer să stea și să calculeze: ce culoare va ieși la cutare sau cutare luminozitate a unui canal sau al unuia. În imaginea de mai jos puteți vedea cea mai simplă paletă a editorului Paint.

Rețineți că multe module și pluginuri de paletă de culori vă permit să obțineți un cod de culoare nu numai în format RGB/RGBA, ci și în formatul altor modele. Ține minte că nu există o paletă în HTML, ei bine, cu excepția cazului în care ești un artist până la bază și numiți paleta de culori a paginii HTML acele culori care au fost folosite pentru a o decora (la urma urmei, uneori, o paletă se referă la culorile pe care le folosește un anumit artist sau la culorile care au fost folosite la crearea unui anumit tablou).

Învățați să schimbați culoarea textului în HTML

Am primit multă teorie despre culori în HTML, haideți să exersăm și să încercăm lucrați cu culorile elementelor HTML. Primul lucru pe care vom învăța să-l facem este schimba culoarea textului în documentul HTML folosind atribute și etichete speciale. Deschideți orice editor și scrieți următorul cod în el:

Schimbarea culorii textului într-un document HTML

Învățați să lucrați cu culoarea în HTML

Schimbarea culorii textului

Pentru a schimba culoarea textului, putem folosi atributul unic BODY text al elementului și putem folosi și elementul FONT și atributul său de culoare. Acest text va fi gri.

< ! DOCTYPE html >

< html lang = "ru-RU" >

< head >

< meta charset = "UTF-8" >

< title >Schimbarea culorii textului din documentul HTML< / title >

< link rel = "stylesheet" type = "text/css" href = "style.css" / >

< / head >

< body text = "#ff0000" >

< h1 > < font color = "rgb(0,255,0)" >Învățați să lucrați cu culoarea în HTML< / font > < / h1 >

< h2 > < font color = "yellow" >Schimbarea culorii textului< / font > < / h2 >

< p >Pentru a schimba culoarea textului putem folosi o culoare unică

atributul BODY text al elementului și, de asemenea, utilizați elementul FONT

< / body >

< / html >

Voi salva acest fișier ca color.html și vă sfătuiesc să nu uitați de . Înregistrarea culorii în sistemul numeric zecimal nu este acceptată de Chrome, Firefox și Opera, dar IE înțelege această notație de culoare și evidențiază antetul HTML în verde:

Lucrul corect de spus nu este schimbarea culorii textului în HTML, ci schimbarea culorii fontului în HTML. Despre