Cod de culoare portocaliu. Culoarea în stiluri poate fi specificată în diferite moduri: prin valoare hexazecimală, după nume, în format RGB, RGBA, HSL, HSLA

Î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

  • 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 comune (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ță.

Numerele hexazecimale sunt folosite 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. Numerele mai mari de 15 în sistemul hexazecimal sunt formate prin combinarea a două numere într-unul singur. De exemplu, numărul 255 în zecimală corespunde numărului FF în hexazecimal. Pentru a evita confuzia în determinarea sistemului numeric, un simbol hash # este plasat înaintea numărului hexazecimal, de exemplu #666999. Fiecare dintre cele trei culori - roșu, verde și albastru - poate lua valori de la 00 la FF. Astfel, simbolul de culoare este împărțit în trei componente #rrggbb, unde primele două simboluri indică componenta roșie a culorii, cele două din mijloc - verde, iar ultimele două - albastru. Este permisă utilizarea formei prescurtate #rgb, unde fiecare caracter trebuie dublat. Astfel, intrarea #fe0 ar trebui considerată 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ă numele lor. În tabel 1 arată numele, codul hexazecimal, RGB, valorile HSL și descrierea.

Masa 1. Denumiri de culori
Nume Culoare Cod 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 inchis
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

Folosind 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 defini culoarea folosind valorile roșu, verde și albastru în termeni zecimali. Fiecare dintre cele trei componente de culoare ia o valoare de la 0 la 255. De asemenea, este permisă specificarea culorii ca procent, cu 100% corespunzând numărului 255. Mai întâi, specificați cuvântul cheie rgb, apoi specificați componentele de culoare între paranteze. , 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 specifică transparența elementului. O valoare de 0 este complet transparentă, 1 este opac, iar o valoare intermediară precum 0,5 este semitransparentă.

RGBA a fost adăugat la CSS3, așa că codul CSS trebuie validat față de această versiune. Trebuie remarcat faptul că standardul CSS3 este încă în curs de dezvoltare și unele caracteristici se pot schimba. De exemplu, o culoare în format RGB adăugată la proprietatea culoare de fundal este validată, dar una adăugată la proprietatea de fundal nu mai este validă. Î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 derivat din combinația primelor litere Hue (nuanță), Saturate (saturație) și Lightness (luminozitate). Nuanța este valoarea culorii de pe roata culorilor (Fig. 1) și este dată în grade. 0° corespunde roșului, 120° verde și 240° albastru. Valoarea nuanței poate varia de la 0 la 359.

Orez. 1. Roata de culori

Saturația este intensitatea unei culori și este măsurată ca procent de la 0% la 100%. O valoare de 0% indică lipsa culorii și o nuanță de gri, 100% este valoarea maximă pentru saturație.

Luminozitatea specifică cât de strălucitoare este culoarea și este specificată ca procent de la 0% la 100%. Valorile scăzute fac culoarea mai închisă, iar valorile ridicate fac culoarea mai deschisă; 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 pentru a specifica transparența elementului. O valoare de 0 este complet transparentă, 1 este opac, iar o valoare intermediară precum 0,5 este semitransparentă.

Valorile de culoare RGBA, HSL și HSLA sunt adăugate la CSS3, așa că vă rugăm să verificați codul pentru validitatea versiunii atunci când utilizați aceste formate.

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

Culori

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 rezultate. Amintiți-vă, un leu este un prădător și un animal periculos!

Arrrgh!

Rezultatul acestui exemplu este prezentat în Fig. 2.

Orez. 2. Culori pe pagina web

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ă remarc că nu am folosit o singură imagine pentru a-mi proiecta blogul WordPress; aspectul a fost conceput complet folosind culoare. Exact 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 astfel încât utilizatorul să poată înțelege: pe ce link a făcut deja clic, pe ce link 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 obișnuite 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ță, planeitate și ușurință. 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, atunci merită 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 unor 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 link-ului HTML activ.
  6. Atributul 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 culorii reflectoarelor folosind o riglă specială pe care există desene numerotate de la 0 la 255. Acum să vedem cum acest lucru ne va ajuta 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 folosind atribute HTML în sistemul de notație zecimală sau, puteți spune și: 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 acest moment, nu toate browserele acceptă această metodă de manipulare a culorilor), deoarece înregistrarea nu va fi cea mai compactă; este mult mai convenabil să 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 după cum urmează: 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”>

Notă: 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 cu două cifre 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, pentru că 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. Tine 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

Avem 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 al elementului de text BODY și putem folosi și elementul FONT și atributul său de culoare. Acest text va fi incolorat.

< ! 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 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

Coduri Minecraft culorile, sau Minecraft coduri formatare, permiteți 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 un & 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 inchisalbastru inchis0 0 170 0000AA0 0 42 00002A
&2 Verde inchisverde inchis0 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 Violet î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 inchisgri închis85 85 85 555555 21 21 21 151515
&9 Albastrualbastru85 85 255 5555FF21 21 63 15153F
&AVerdeverde85 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, a evidentia 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
&lMiniatură
&mText barat
&nText subliniat
&oText italic
&rText fără formatare