Culoarea paginilor principale ale Yandex. Detectarea automată a culorilor - experiența echipei Yandex. Ce ai vrut cu adevărat?

Bună ziua, dragi cititori ai blogului. Continui să public articole în secțiunea „”. Astăzi vreau să vorbesc despre culorile din codul HTML și CSS, să explic pentru cei care încă nu știu cum le puteți seta, cum sunt formate, cum să folosiți programe special concepute pentru aceasta pentru a căuta sau a captura culoarea dorită și mult mai mult.

Problema specificării nuanței dorite poate fi deosebit de relevantă pentru webmasterii începători, atunci când codurile date în documentul web (de exemplu, #f3af6c) nu sunt complet clare și nu este clar cum și unde pot fi obținute aceste informații (de unde să găsiți tabelele de culori Html și CSS) și cum să le utilizați pentru a proiecta un text sau orice alt bloc al unui document web.

Permiteți-mi să vă reamintesc că ne-am familiarizat deja cu principiile fundamentale folosite în . De asemenea, ne-am uitat deja la etichete și am învățat, am învățat multe și cum.

Coduri și tabel de culori RGB de bază

Este destul de logic ca limbajul de marcare hipertext și foile de stil în cascadă să aibă capacitatea de a colora documentele, pentru că altfel site-urile ar fi foarte plictisitoare și monotone. Pentru a face acest lucru, ei folosesc de obicei un model numit RGB (un acronim derivat din trei cuvinte englezești pentru roșu, verde și albastru).

În modelul RGB sunt folosite doar trei culori (este clar că acestea sunt roșu, verde și albastru), fiecare dintre acestea putând fi reprezentată cu un nivel diferit de luminozitate al strălucirii. Pentru fiecare dintre canale (roșu, verde și albastru), puteți selecta una dintre cele 256 de gradări posibile de luminozitate. Numărul 256 este luat deoarece atât de multe valori de nuanță pot fi codificate într-un octet de informații.

În consecință, pentru documentul nostru web putem alege orice nuanță dintr-un număr mare de posibile (256*256*256). De exemplu, pentru a obține negru, toate cele trei canale ale schemei de culori trebuie să aibă o valoare de luminozitate zero, iar pentru a obține alb, roșu, verde și albastru trebuie să aibă luminozitate maximă.

Să încercăm acum să ne dăm seama cum să setăm luminozitatea în fiecare canal și câte posibilități avem pentru asta?

De fapt, există două căi principale:

  1. setare prin înregistrarea luminozității pentru fiecare canal (roșu, verde și albastru) în notație hexazecimală
  2. sarcină prin introducerea numelui culorii în codul documentului web

Să începem cu cele complexe și să încercăm să ne dăm seama cum să scriem culorile în cod hexazecimal. Dacă am vrea, de exemplu, să notăm codul pentru alb în sistemul zecimal, am obține codul 256 256 256, iar pentru negru - 0 0 0. Aici, probabil, totul este clar.

Dar în sistemul numeric hexazecimal, pe lângă cifrele arabe, sunt folosite și primele șase litere ale alfabetului latin și există o specificitate proprie în formarea numerelor. Nu cred că merită să aprofundăm acest lucru, dar, ca exemplu, voi spune că albul pentru HTML poate fi setat astfel: #ffffff, iar negru astfel: #000000. Acestea. 00 corespunde cu 0 în notație zecimală, iar ff corespunde cu 256.

Acestea. Fiecărui canal de culoare RGB din codul CSS îi sunt alocate două cifre hexazecimale, astfel încât intrările de valoare de culoare constau din șase cifre (sau litere care sunt echivalente cu cifrele din sistemul hexazecimal), precedate de semnul hash „#”. Este destul de simplu.

De exemplu, în tabelul de mai jos pentru cele mai simple nuanțe, intrările lor hexazecimale vor arăta astfel:

Desigur, nu sunteți obligat să veniți cu și să comparați coduri de nuanțe hexazecimale cu cele pe care doriți să le vedeți în proiectul dvs. de internet. Puteți selecta culorile pentru site în orice editor grafic (chiar și în ), unde cu siguranță vă vor arăta o înregistrare a acestei nuanțe în format RGB, sau găsiți un tabel de culori Html și copiați codul de care aveți nevoie de acolo.

Culorile Yandex - selecția paletei de nuanțe RGB în rezultatele Yandex

Nu doriți să utilizați un editor grafic în acest scop sau să căutați un tabel cu coduri? Nici o problemă. Derulați puțin în jos această pagină și veți găsi o mulțime de programe care sunt specifice și adaptate special pentru lucrul cu culoarea în cod Html sau CSS.

Dacă acest lucru nu vă convine, deschideți-l și introduceți-l în bara de căutare cerere cu numele acelei nuanțe, care vă interesează (deși puteți introduce pur și simplu: gri-maro-zmeură).

Drept urmare, în partea de sus a rezultatelor căutării, veți vedea un tabel de paletă Yandex.Colors foarte convenabil pentru selectarea culorilor pentru site-ul dvs. În colțul din dreapta jos al acestei palete puteți copia codul hexazecimal al nuanței de care aveți nevoie (în fața ei există un marcaj hash), pe care apoi trebuie doar să-l lipiți în locul potrivit în documentul dvs. web.

Toate acestea se realizează datorită așa-numitului, care este conceput pentru a ajuta designerii și designerii de layout.

Puteți setați culoarea în bara de căutare Yandex, atât sub forma numelui, cât și sub forma unui cod - ca urmare, veți vedea cum va arăta pe ecran și, dacă este necesar, puteți obține notația sa hexazecimală.

De fapt, acest instrument poate fi util și pentru utilizatorii obișnuiți de internet, de exemplu, pentru a înțelege cum va arăta mobilierul în nuanța argintii-maro-zmeură-pătat. De asemenea, puteți viziona un videoclip despre utilizarea acestui vrăjitor Yandex:

Unele culori în limbajul de marcare hipertext poate fi specificat folosind cuvinte, de exemplu, „negru” înseamnă negru, „alb” înseamnă alb etc. Dar există o avertizare. Prin urmare, setarea culorii este posibilă numai pentru un număr limitat dintre ele.

Ei bine, în primul rând, este probabil clar că nu veți putea reprezenta toate cele 16 milioane de nuanțe posibile în schema RGB folosind cuvinte în orice tabel (veți să obosiți să defilați prin el).

În al doilea rând, în validatorul W3C pentru specificația Hypertext Markup Language 4.01 (este pe deplin suportat de toate browserele posibile în acest moment), sunt definite doar 16 culori, care pot fi specificate în cod Html sau CSS cu cuvintele:

De asemenea, puteți găsi tabele de nuanțe mult mai detaliate care pot fi specificate în cuvinte în cod, dar există posibilitatea ca în unele browsere această culoare să nu fie afișată corect.

Prin urmare, cu excepția tabelului de 16 nuanțe de bază prezentat mai sus, toate celelalte culori ar trebui specificate în codul documentelor web numai folosind notația hexazecimală, pentru a evita excesele inutile.

Utilizarea codurilor de culoare și a numelor în webmastering

În momentul de față, tot designul extern al paginilor web este lăsat la CSS (cascading style sheets) și specificarea unui cod de culoare direct în Html este extrem de rară, dar se întâmplă. În plus, există situații în care este imposibilă utilizarea foilor de stil CSS externe dintr-un motiv sau altul (de exemplu, în cazul creării unei versiuni).

Prin urmare, voi da în continuare un exemplu de setare a culorilor în Html, deși în acest caz vor fi deja folosite etichete nerecomandate de validatorul W3C. De exemplu, anterior culoarea pentru fundal era setată în eticheta „BODY” prin atributul „bgcolor”, iar textul era colorat imediat pe întreaga pagină web folosind atributul „text”.

Setarea nuanțelor necesare în acest caz ar putea arăta, de exemplu, astfel:

Conținutul documentului

Rezultatul este o pagină web cu un fundal bej și font albastru închis. Înainte de a intra în uz CSS, pentru a schimba culoarea fontului oricărei secțiuni individuale de text, eticheta „FONT”, care nu mai este recomandată de validatorul W3C, era utilizată pe scară largă, în care atributul „culoare” cu același nume era inclus pentru seteaza culoarea:

secțiune de text care trebuia colorată în albastru

Pentru a vedea rezultatul codului scris pe ecran, trebuie să salvați acest fișier cu extensia html și apoi să îl deschideți în orice browser convenabil pentru dvs.

Acum, pentru ca aspectul site-ului dvs. să fie considerat valid, este recomandat setați culorile elementelor din foaia de stil în cascadă prin reguli și proprietăți adecvate. Regulile pentru o astfel de inserare în CSS nu diferă de cele descrise mai sus.

După cum puteți vedea, uneori, pentru a scurta notația de nuanță, nu sunt folosite șase caractere, ci doar trei, dacă se potrivesc pentru fiecare canal - „#6с0” în loc de „#66с00”.

Selectați o culoare din paleta unui program special sau capturați-o de pe ecran

După cum am scris chiar mai sus, schema de culori RGB (roșu, verde, albastru) este folosită peste tot. Pentru fiecare dintre cele trei culori principale, există 256 de gradări - de la 0 la 255 (dacă convertim aceste valori în sistemul numeric hexazecimal, obținem - de la 00 la FF).

Deoarece avem trei culori principale, din combinația cărora se formează toate celelalte nuanțe, apoi notația hexazecimală va arăta cam așa: 99FF66 (nuanță de verde). Adăugând # în fața acestuia, obținem codul #99FF66, care poate fi folosit atât în ​​HTML, cât și în fișierele de stil. Este de la sine înțeles că tu însuți nu ar trebui să-ți dai seama și să-ți amintești toate aceste prostii.

Pentru a face acest lucru, puteți utiliza un program special care vă permite să selectați nuanța dorită pe paletă (sau capturați-l de pe ecran instrument ca o pipetă) și obțineți imediat codul acestuia. Nu trebuie să aveți un program, dar mergeți la Yandex și introduceți numele oricărei culori în bara de interogări (am scris despre asta chiar mai sus).

Iată o listă de programe care vă permit să implementați pe deplin toate acestea:


Multă baftă! Ne vedem curând pe paginile site-ului blogului

S-ar putea să fiți interesat

Liste în cod HTML - etichete UL, OL, LI și DL
Cum să inserați un link și o imagine (foto) în etichetele HTML - IMG și A
Cum se creează un hyperlink (A, Href, țintă gol), cum se deschide într-o fereastră nouă pe site și, de asemenea, face o imagine un link în cod HTML
Font (față, dimensiune și culoare), etichete Blockquote și pre - formatare de text vechi în HTML pur (nu este folosit CSS)
Tabele în HTML - etichete Table, Tr și Td, precum și Colspan, Cellpadding, Cellspacing și Rowspan pentru a le crea
Formulare Html pentru site - etichete Form, Input and Select, Option, Textarea, Label și altele pentru crearea elementelor de formular web Selectați, Opțiune, Zona de text, Etichetă, Set de câmpuri, Legendă - Etichete HTML pentru forma de liste derulante și câmpuri de text
Img - Etichetă HTML pentru inserarea unei imagini (Src), alinierea și împachetarea textului în jurul acesteia (aliniere), precum și setarea fundalului (fundal)
Directivele de comentariu și Doctype în codul HTML, precum și conceptul de elemente bloc și inline (etichete)
Ce este limbajul de marcare hipertext HTML și cum să vizualizați o listă cu toate etichetele în validatorul W3C
Caractere cu spații albe și formatarea codului lor în Html, precum și caractere speciale care nu se îndepărtează și alte mnemonice

Când au creat Yandex, dezvoltatorii s-au asigurat că este ușor și ușor de înțeles de utilizat.

Nu este nimic de prisos în setările de design și font, astfel încât utilizatorii pot înțelege rapid ce este.

Fiecare versiune a browserului Yandex este proiectată frumos, designul este realizat de cei mai buni specialiști. Dar există utilizatori cărora nu le place monotonia. Se vor plictisi rapid chiar și de cea mai frumoasă priveliște, vor dori să „schimbe situația” și să „insufle viață” în munca lor cu browserul web.

Nu este nimic în neregulă cu asta, altfel de ce au introdus dezvoltatorii funcția de schimbare a interfeței? Astfel încât oricine nu-i place fundalul standard sau se plictisește de monotonie poate schimba aspectul aplicației.

Pentru a schimba aspectul browserului Yandex, trebuie să fiți distras doar câteva minute:

  • Porniți browserul web.
  • Deschideți o filă nouă (puteți face acest lucru în setările de lângă bara de marcaje).
  • Un „Panou expres” va apărea în fața ta. Trebuie să mergeți în partea de jos a ecranului și să faceți clic pe pictograma „Schimbați fundalul”.
  • Apoi se va deschide o listă cu o varietate de modele de browser, printre care trebuie să îl alegeți pe cel care vă place cel mai mult. După ce ați selectat desenul corespunzător, faceți clic pe butonul „Efectuat”.

Nu trebuie să vă faceți griji cu privire la schimbarea fundalului de fiecare dată - nu trebuie. Acum, de fiecare dată când intri în „Panoul Express” (chiar dacă ai închis și redeschis Yandex), te vei bucura de o imagine plăcută. Și lucrul cu spirit înalt este mult mai interesant și mai ușor!

Este posibil să punem ceva „al nostru” pe fundal?

Dezvoltatorii Yandex, desigur, nu pot mulțumi fiecare utilizator cu imaginile pe care le oferă pentru schimbarea fundalului. Dacă te uiți prin lista completă a modelelor disponibile și nu găsești nimic potrivit, nu dispera.

Astfel de cazuri sunt asigurate de creatorii browserului Yandex: puteți descărca imagini personale disponibile pe computer. Acest lucru dă frâu deplin imaginației. Cât de plăcut ar fi, de exemplu, dacă de fiecare dată când intri în Express Panel, ai vedea un fragment luminos din viața ta sau o fotografie a unui copil mic?

Pentru a seta o imagine de pe dispozitiv ca fundal, aveți nevoie de:

  • activați Yandex;
  • deschide o nouă fereastră secundară;
  • găsiți funcția „Schimbați fundalul” și faceți clic pe ea;
  • În spatele ultimei imagini există o pictogramă „+”, trebuie să faceți clic pe ea;
  • selectați fotografia pe care doriți să o vedeți în browser și apăsați pe Enter („Enter”).

Acum puteți seta absolut orice imagine, care este salvată până la următoarea modificare.


Algoritm nou pentru selectarea culorilor pentru cardurile promoționale ale aplicației în Yandex Launcher.

Diverse servicii Yandex lucrează cu culoarea pentru a rezolva problemele de interfață: evidențierea blocurilor de informații și a răspunsurilor la obiect, gestionarea atenției și crearea unei ierarhii vizuale.

Exemple de utilizare a algoritmilor de selecție a culorilor în căutare și Yandex.Music

În funcție de sarcină, selectarea culorii poate necesita calcule complexe. Dar se întâmplă că este mult mai ușor să obții rezultatul dorit.

Avem carduri promoționale pentru aplicații în Yandex Launcher: evaluare, descriere și butonul „Instalare”. Acestea sunt recomandări contextuale - se deschid în partea de sus a listei de aplicații sau într-un folder de pe desktop.

Implementare inițială

Culoarea pentru fundalul cardului a fost selectată automat pe baza pictogramei, butonul era alb translucid. Algoritmul a încercat să determine culoarea principală a pictogramei prin sortarea pixelilor după tonul de culoare. Această abordare nu a dat întotdeauna un rezultat frumos, a avut dezavantaje:

  • determinarea incorectă a culorii;
  • culori „murdare” din cauza medierii;
  • nasturi plictisiți, cărți plictisitoare.

Exemple de carduri cu probleme

Ce ai vrut cu adevărat?

Cardul ar fi trebuit să devină o adevărată continuare a icoanei, iar culorile ar fi trebuit să fie bogate și strălucitoare. Am vrut să creez senzația că cardul a fost făcut manual cu grijă și nu a alunecat în ceva generat automat neglijent.

Întotdeauna vrei să-l faci mai frumos, dar resursele nu sunt nelimitate. Nu existau planuri să aloce o echipă care să scrie o bibliotecă miracol pentru determinarea culorilor. Așadar, sarcina este de a îmbunătăți algoritmul de determinare a culorilor cu un efort minim, de a-ți da seama cum să colorezi frumos cardul fără a inventa o navă spațială.

Sâmbătă am aruncat praful de pe editorul de cod, am scos HTML5 și Canvas și am început să vin cu idei. Luni am venit la echipă cu o propunere.

Nou algoritm de detectare a culorilor

Pasul 1. Luați pictograma. Aruncăm pixeli albi, negri și transparenți.

Pictograma originală → Pătrat de pixeli filtrați

Pasul 2. Reducem imaginea rezultată la 2 × 2 pixeli (cu antialiasing dezactivat). Ca rezultat, obținem patru culori de pictogramă. Dacă imaginea originală este omogenă, se pot repeta - nu e mare lucru.

Rezultat după al doilea pas. Pictograma sursă → Culori

Avem anti-aliasing dezactivat, astfel încât culorile să nu se amestece și să devină „murdare”.

De fapt, se dovedește așa: pătratul este împărțit în patru părți, luăm pixelul din mijloc din rândul de sus al fiecărui sfert. Implementarea este simplă: nici măcar nu avem nevoie de un eșantion redus real al imaginii sau de lucru cu grafica în general. Luăm pixeli cu poziția dorită din matricea unidimensională obținută după primul pas.

Pasul 3. Aproape totul este gata. A mai rămas doar puțin: scoatem culorile rezultate, le convertim în HSL și le sortăm după luminozitate (L). Pictăm cardul.

Schema luminii:

  • fundal - cea mai deschisă culoare;
  • buton - cel mai apropiat de lumină;
  • textul este cel mai întunecat.

Schemă întunecată (dacă două sau mai multe culori sunt întunecate):

  • fundal - cea mai închisă culoare;
  • buton - cel mai apropiat de întuneric;
  • textul este cel mai ușor.

Aplicând culori, verificăm contrastul: diferența de Luminozitate între fundal și butonul ≥ 20; între fundal și text ≥ 60. Dacă nu se potrivește, corectați-l.

Cărțile rezultate. Pictogramă sursă → Culori → Card

Și încă câteva exemple de carduri:

Rezultat

Avem cartonașe colorate, realizate din culori reale de pictograme, fără impurități „murdare”. Folosind mai multe culori, cardul arată mult mai vibrant. Este deosebit de frumos că, cu un fundal uniform al pictogramei, cardul devine continuarea sa directă: granița dintre ele nu se observă deloc.

Și cel mai important: la două zile după ce a fost propus noul algoritm, prima implementare era deja disponibilă în versiunea dev. L-am testat în cadrul echipei, am stabilit pragurile pentru filtru în primul pas și am prevăzut cazuri speciale:

  • o pictogramă de o singură culoare - faceți fundalul puțin mai întunecat, astfel încât să nu se îmbine;
  • pictogramă cu fundal - priviți pixelii din jurul marginilor; dacă toate sunt la fel, punem același fundal de card.

Algoritmul revizuit va fi inclus în următoarea ediție. Mulțumiri speciale șefului echipei de dezvoltare Yandex Launcher, Dima Ovcharov, pentru interes, dorință și răbdare. În sfârșit - mai multe exemple.




www.livemaster.ru

Coduri și tabel de culori RGB de bază

Este destul de logic ca limbajul de marcare hipertext și foile de stil în cascadă să aibă capacitatea de a colora documentele, pentru că altfel site-urile ar fi foarte plictisitoare și monotone. Pentru a face acest lucru, ei folosesc de obicei un model numit RGB (un acronim derivat din trei cuvinte englezești pentru roșu, verde și albastru).

În modelul RGB sunt folosite doar trei culori (este clar că acestea sunt roșu, verde și albastru), fiecare dintre acestea putând fi reprezentată cu un nivel diferit de luminozitate al strălucirii. Pentru fiecare dintre canale (roșu, verde și albastru), puteți selecta una dintre cele 256 de gradări posibile de luminozitate. Numărul 256 este luat deoarece atât de multe valori de nuanță pot fi codificate într-un octet de informații.

În consecință, pentru documentul nostru web putem alege orice nuanță dintr-un număr mare de posibile (256*256*256). De exemplu, pentru a obține negru, toate cele trei canale ale schemei de culori trebuie să aibă o valoare de luminozitate zero, iar pentru a obține alb, roșu, verde și albastru trebuie să aibă luminozitate maximă.


Să încercăm acum să ne dăm seama cum să setăm luminozitatea în fiecare canal și câte posibilități avem pentru asta?

De fapt, există două căi principale:

  1. setare prin înregistrarea luminozității pentru fiecare canal (roșu, verde și albastru) în notație hexazecimală
  2. sarcină prin introducerea numelui culorii în codul documentului web

Să începem cu cele complexe și să încercăm să ne dăm seama cum să scriem culorile în cod hexazecimal. Dacă am vrea, de exemplu, să notăm codul pentru alb în sistemul zecimal, am obține codul 256 256 256, iar pentru negru - 0 0 0. Aici, probabil, totul este clar.

Dar în sistemul numeric hexazecimal, pe lângă cifrele arabe, sunt folosite și primele șase litere ale alfabetului latin și există o specificitate proprie în formarea numerelor. Nu cred că merită să aprofundăm acest lucru, dar, ca exemplu, voi spune că albul pentru HTML poate fi setat astfel: #ffffff, iar negru astfel: #000000. Acestea. 00 corespunde cu 0 în notație zecimală, iar ff corespunde cu 256.

Acestea. Fiecărui canal de culoare RGB din codul CSS îi sunt alocate două cifre hexazecimale, astfel încât intrările de valoare de culoare constau din șase cifre (sau litere care sunt echivalente cu cifrele din sistemul hexazecimal), precedate de semnul hash „#”. Este destul de simplu.

De exemplu, în tabelul de mai jos pentru cele mai simple nuanțe, intrările lor hexazecimale vor arăta astfel:


Desigur, nu sunteți obligat să veniți cu și să comparați coduri de nuanțe hexazecimale cu cele pe care doriți să le vedeți în proiectul dvs. de internet. Puteți selecta culorile pentru site-ul dvs. în orice editor grafic (chiar și în editorul online gratuit Pixlr Editor), unde cu siguranță vi se va afișa o înregistrare a acestei nuanțe în format RGB, sau găsiți un tabel de culori Html și copiați codul de care aveți nevoie de acolo.

Culorile Yandex - selecția paletei de nuanțe RGB în rezultatele Yandex

Nu doriți să utilizați un editor grafic în acest scop sau să căutați un tabel cu coduri? Nici o problemă. Derulați puțin în jos această pagină și veți găsi o mulțime de programe care sunt specifice și adaptate special pentru lucrul cu culoarea în cod Html sau CSS.

Dacă acest lucru nu vă convine, deschideți pur și simplu Yandex și intrați în bara de căutare cerere cu numele acelei nuanțe, care vă interesează (deși puteți introduce pur și simplu: gri-maro-zmeură).

Drept urmare, în partea de sus a rezultatelor căutării, veți vedea un tabel de paletă Yandex.Colors foarte convenabil pentru selectarea culorilor pentru site-ul dvs. În colțul din dreapta jos al acestei palete puteți copia codul hexazecimal al nuanței de care aveți nevoie (în fața ei există un marcaj hash), pe care apoi trebuie doar să-l lipiți în locul potrivit în documentul dvs. web.

Toate acestea se realizează datorită așa-numitului „vrăjitor” Yandex, care este conceput pentru a ajuta designerii și designerii de layout.

Puteți setați culoarea în bara de căutare Yandex, atât sub forma numelui, cât și sub forma unui cod - ca urmare, veți vedea cum va arăta pe ecran și, dacă este necesar, puteți obține notația sa hexazecimală.

De fapt, acest instrument poate fi util și pentru utilizatorii obișnuiți de internet, de exemplu, pentru a înțelege cum va arăta mobilierul în nuanța argintii-maro-zmeură-pătat. De asemenea, puteți viziona un videoclip despre utilizarea acestui vrăjitor Yandex:

Unele culori în limbajul de marcare hipertext poate fi specificat folosind cuvinte, de exemplu, „negru” înseamnă negru, „alb” înseamnă alb etc. Dar există o avertizare. Prin urmare, setarea culorii este posibilă numai pentru un număr limitat dintre ele.

Ei bine, în primul rând, este probabil clar că nu veți putea reprezenta toate cele 16 milioane de nuanțe posibile în schema RGB folosind cuvinte în orice tabel (veți să obosiți să defilați prin el).

În al doilea rând, în validatorul W3C pentru specificația Hypertext Markup Language 4.01 (este pe deplin suportat de toate browserele posibile în acest moment), sunt definite doar 16 culori, care pot fi specificate în cod Html sau CSS cu cuvintele:

De asemenea, puteți găsi tabele de nuanțe mult mai detaliate care pot fi specificate în cuvinte în cod, dar există posibilitatea ca în unele browsere această culoare să nu fie afișată corect.

Prin urmare, cu excepția tabelului de 16 nuanțe de bază prezentat mai sus, toate celelalte culori ar trebui specificate în codul documentelor web numai folosind notația hexazecimală, pentru a evita excesele inutile.

Utilizarea codurilor de culoare și a numelor în webmastering

În momentul de față, tot designul extern al paginilor web este lăsat la CSS (cascading style sheets) și specificarea unui cod de culoare direct în Html este extrem de rară, dar se întâmplă. În plus, există situații în care, dintr-un motiv sau altul, este imposibilă utilizarea foilor de stil CSS externe (de exemplu, în cazul creării unei ediții a listei de corespondență de abonare).

Prin urmare, voi da în continuare un exemplu de setare a culorilor în Html, deși în acest caz vor fi deja folosite etichete nerecomandate de validatorul W3C. De exemplu, anterior culoarea pentru fundal era setată în eticheta „BODY” prin atributul „bgcolor”, iar textul era colorat imediat pe întreaga pagină web folosind atributul „text”.

Setarea nuanțelor necesare în acest caz ar putea arăta, de exemplu, astfel:

Conținutul documentului

Rezultatul este o pagină web cu un fundal bej și font albastru închis. Înainte de a intra în uz CSS, pentru a schimba culoarea fontului oricărei secțiuni individuale de text, eticheta „FONT”, care nu mai este recomandată de validatorul W3C, era utilizată pe scară largă, în care atributul „culoare” cu același nume era inclus pentru seteaza culoarea:


secțiune de text care trebuia colorată în albastru

Pentru a vedea rezultatul codului scris pe ecran, trebuie să salvați acest fișier cu extensia html și apoi să îl deschideți în orice browser convenabil pentru dvs.

Acum, pentru ca aspectul site-ului dvs. să fie considerat valid, este recomandat setați culorile elementelor din foaia de stil în cascadă prin reguli și proprietăți adecvate. Regulile pentru o astfel de inserare în CSS nu diferă de cele descrise mai sus.

După cum puteți vedea, uneori, pentru a scurta notația de nuanță, nu sunt folosite șase caractere, ci doar trei, dacă se potrivesc pentru fiecare canal - „#6с0” în loc de „#66с00”.

ktonanovenkogo.ru

Paleta de culori RGB, cum să setați corect culorile în CSS și Html.

După cum știți, pentru a rezolva problemele legate de designul color al textului, este utilizată construcția general acceptată RGB(acesta este, roșu- Roșu, Verde– Verde și în consecință Albastru- Albastru)


Paleta de culori RGB implică utilizarea a doar trei culori, fiecare dintre acestea putând fi reprezentată cu un nivel diferit de luminozitate. În codul CSS și Html, pentru fiecare culoare din paletă, puteți defini una dintre cele 256 posibile gradații de culoare.

Astfel, pentru a proiecta un document puteți folosi un număr destul de mare de culori - 256-256-256. De exemplu, pentru a obține negru ca rezultat, toate cele trei culori RGB este necesar să setați valoarea luminozității la zero și invers, dacă este necesară culoarea albă, atunci, în consecință, pentru toate culorile trebuie să setați luminozitatea maximă.

Să aruncăm o privire mai atentă asupra modului de a seta luminozitatea culorii în Html. Puteți regla luminozitatea în două moduri:

  1. Prin setarea codului de culoare a paletei pentru pagină în cod HTML, determinând luminozitatea culorilor RGB folosind sistemul de numere hexazecimale
  2. Prin setarea culorilor în CSS folosind notația hexazecimală.

Să ne uităm la scrierea codului în markup hexazecimal și hipertext. În primul rând, să ne amintim sistemul numeric zecimal - de exemplu, dacă avem nevoie de culoare albă, atunci codul acesteia va arăta ca: 256 256 256, în cazul culorii negre: 0 0 0.


Spre deosebire de codul zecimal, care conține doar numere, paleta hexazecimală conține și litere ale alfabetului latin. Adică, în acest caz există un sistem specific de reprezentare a numerelor. De exemplu, culoarea albă în HTML este specificată ca: #ffffff, iar negru: #000000. Este ușor de observat că aici 00 corespunde cu 0, iar ff corespunde cu 256 (dacă este convertit în zecimal).

Astfel, paleta de culori RGB a Html, CSS este împărțită în canale, fiecăruia fiind alocate două caractere hexazecimale. De aceea, toate culorile din codul HTML sunt construite din șase litere (echivalate cu numere) și numerele în sine. Trebuie remarcat faptul că codul este precedat de simbolul „#”.

Desigur, nu este nevoie să selectați manual un cod de culoare - trebuie doar să lansați orice editor grafic, să găsiți o culoare potrivită și să vedeți codul de culoare în sistemul RGB în informațiile detaliate. Există o altă opțiune, mai simplă - o paletă de culori HTML cu coduri. Găsiți-l și copiați-l pentru dvs.

Culori Yandex – selectarea unui cod de culoare HTML în paleta RGB din ieșirea Yandex.


Printre altele, puteți alege o schemă de culori pentru site-ul dvs. folosind Yandex. Pentru a face acest lucru, trebuie doar să introduceți cuvântul „culoare” sau numele culorii de care aveți nevoie în bara de căutare. Ca urmare a solicitării, paleta va fi afișată în ieșire Yandex.Culori. cu care puteți selecta culorile. În colțul din dreapta puteți vedea codul de culoare în RGB și hexazecimal, care este utilizat la construirea unui document web.

Această opțiune de la Yandex simplifică foarte mult procesul de lucru. Este foarte simplu - introduceți numele culorii și obțineți codul necesar.

Trebuie remarcat faptul că unele dintre culorile din marcajul hipertext pot fi specificate folosind un cuvânt, de exemplu: „gri” - gri, „alb” - alb, „negru” - negru etc. Desigur, setarea unei culori în HTML în acest fel este posibilă doar pentru o varietate nu foarte mare de culori. Într-adevăr, 16 milioane de culori RGB nu pot fi găsite în nicio carte de referință sau tabel folosind cuvinte.

Validatorul W3C 4.01 (hipertext markup) prezintă o paletă de 16 nuanțe de bază, cu ajutorul căreia este alcătuit un tabel de culori CSS și Html și din care se vede clar ce culori pot fi specificate în cuvinte.


Alte culori trebuie specificate folosind codul hexazecimal.

Numele culorilor paletei RGB în paginile web, precum și înlocuirea culorii textului în sine folosind atributul de culoare, exemple și metode de utilizare a codurilor de culoare în CSS și Html.

În zilele noastre, designul extern al paginilor se face folosind CSS (cascading style sheets), dar, cu toate acestea, destul de des puteți găsi cazuri în care culoarea este specificată în HTML.

Prin urmare, mai jos este un exemplu de specificare a culorii în HTML.

pagina site-ului dvs

Rezultatul final va fi o pagină cu font violet pe un fundal auriu.

Anterior, în CSS, pentru a specifica culoarea textului într-o anumită zonă, era necesar să introduceți eticheta „FONT” (nerecomandată de W3C), iar pentru a seta culoarea, atributul „culoare” a fost inclus în aceasta:

text care trebuia colorat în roșu

Pentru a colora un element de text în culoarea de care aveți nevoie, trebuie să utilizați eticheta „FONT” pentru a scrie cod HTML care va arăta astfel:

Text a cărui culoare de font doriți să o înlocuiți

Momentan, pentru a obține un aspect valid al site-ului, vă recomand să utilizați CSS atunci când setați codul de culoare. În general, regulile de inserare a codurilor de culoare în CSS nu diferă de cele discutate mai sus.

www.bestseoblog.ru