Culoare negru transparent. Tutorial HTML

Această pagină conține un tabel cu cuvinte cheie care pot fi folosite pentru a desemna culori în astfel de limbaje pentru dezvoltatori web precum: HTML, CSS, JavaScript, Flash etc.

În vechile specificații pentru concernul WC3 erau specificate doar 16 cuvinte cheie, cu ajutorul cărora erau setate culorile în HTML și CSS. În alte specificații, mai moderne, au fost adăugate alte 130 de cuvinte cheie pentru a indica numele culorilor. Următorul tabel conține numele culorilor și codurile hexadecimale și RGB cărora le corespund.

Conform regulilor CSS, numele culorilor nu țin cont de majuscule și minuscule. Intrările de culoare IndianRed și indianred sunt echivalente.

De asemenea, este de remarcat faptul că dintre cele 146 de cuvinte cheie din tabel, există de fapt mai puține culori în el. Acest lucru se datorează faptului că unele cuvinte cheie se referă la aceeași culoare. Astfel, denumirile Gri și Gri reprezintă codul de culoare gri 50% #808080, iar cuvântul Magenta este sinonim pentru culoarea HTML Fuchsia, corespunzător codului hexazecimal #FF00FF. De asemenea, sunt sinonime cuvintele Aqua și Cyan, acestea corespund codului #00FFFF.

Modulul de culoare CSS detaliază valori care permit autorilor să definească culorile și opacitatea elementelor html, precum și valorile proprietății culorii.

proprietatea culorii

1. Culori prioritare: proprietatea culorii

Proprietatea specifică culoarea fontului folosind diferite sisteme de redare a culorilor. Proprietatea descrie culoarea conținutului text al elementului. În plus, este folosit pentru a furniza o valoare indirectă potențială (currentColor) pentru orice alte proprietăți care iau valori de culoare.

Proprietatea este moștenită.

2. Valori de culoare

2.1. Cuvinte cheie principale

Lista de cuvinte cheie principale include următoarele semnificații:

Numele culorilor nu fac distincție între majuscule și minuscule.

Sintaxă

Culoare: teal;

2.2. Valori numerice de culoare

2.2.1. Culori model RGB

Formatul hexazecimal al unei valori RGB este semnul # urmat imediat de trei sau șase caractere hexazecimale. Notația RGB din trei cifre #rgb este convertită în forma de șase cifre #rrggbb prin copierea cifrelor, mai degrabă decât prin adăugarea de zerouri. De exemplu, #fb0 se extinde la #ffbb00 . Acest lucru asigură faptul că #ffffff alb poate fi specificat în intrarea scurtă #fff și elimină orice dependență de adâncimea culorii afișajului.

Formatul unei valori RGB în notație funcțională este rgb(, urmat de o listă de trei valori numerice separate prin virgulă (fie trei valori întregi, fie trei valori procentuale), urmată de un simbol). Valoarea întreagă 255 corespunde cu 100% și F sau FF în notație hexazecimală:

Rgb(255.255.255) = rgb(100%, 100%, 100%) = #FFF

Caracterele de spațiu sunt permise în jurul valorilor numerice.

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 de 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.

Există mai multe moduri de a reprezenta culoarea în design web.

HEX este un sistem de reprezentare a culorilor hexazecimală bazat pe baza 16. Pentru acest sistem, cifrele zecimale arabe de la 0 la 9 și litere latine de la A la F sunt folosite pentru a completa numărul digital la 16. Pentru design web, 16 culori primare (cheie) sunt folosite, așa-numitul cod de culoare hexazecimal #RRGGBB, unde fiecare pereche este responsabilă pentru cota sa de culoare: RR – roșu, GG – verde și BB – albastru. Fiecare fracțiune de culoare variază de la 00 la FF.

Alte două reprezentări ale culorii în design web sunt: ​​sub formă de RGB(*,*,*), unde fiecare fracțiune „*” a unei culori este reprezentată prin cifre zecimale de la 0 la 255 și prin nume de culori în limba engleză.

La crearea unei imagini color, principala problemă este reproducerea corectă a culorilor pe diferite tipuri de computere, monitoare și browsere. Dacă browserul nu poate afișa corect o culoare, selectează una similară sau amestecă mai multe culori. Și uneori poate fi înlocuit cu o culoare complet diferită.

Masă 16 culori primare, care sunt utilizate în toate browserele

Masă violet culorile și nuanțele sale

Masă gri culorile și nuanțele sale

Culoarea în CSS poate fi setată în diferite moduri:

• dupa nume,
• prin valoare hexazecimală,
• în formatele RGB și RGBA,
• în formatele HSL și HSLA.

Setați culoarea după nume

Browserele acceptă specificarea unor culori pentru elemente după nume. Acest tabel conține câteva cuvinte cheie (nume de culori în limba engleză) utilizate pentru a specifica proprietățile culorii, codul RGB, codul hexazecimal (HEX) și codul HSL.

Acesta este un exemplu de utilizare a numelor de culori, numele culorilor sunt preluate din tabelul extins.

Iată cum funcționează acest cod:

Setarea culorii folosind RGB

RGB este un model de culoare aditiv. În limba engleză plus- adaos. RGB este o abreviere a cuvintelor englezești: Red, Green, Blue - red, green, blue). Din aceasta rezultă clar că în modelul RGB culorile sunt sintetizate prin adăugarea a trei culori (roșu, verde, albastru) în cantități diferite.

Amestecând culorile roșu, verde și albastru puteți obține câteva milioane de nuanțe. Toate combinațiile posibile sunt stocate în memoria computerului.

Treci la obiect.

Pentru a seta proprietăți în acest format, utilizați notația rgb(r, g, b), unde r, g, b sunt cele trei canale pentru fiecare culoare (roșu, verde, albastru). Valorile pentru fiecare canal sunt setate în intervalul de la 0 la 255.

Exemplu de cod.

Pentru a clarifica totul, iată un exemplu de cod:

Iată cum ar trebui să funcționeze acest exemplu:

Explicații de exemplu.

La începutul paginii creăm clasa div.rgb, este necesară pentru blocurile create de etichetă

au fost afișate la dimensiunea necesară: 240px cu 40px. Atribuim proprietății line-height o valoare de 40px, adică egală cu înălțimea blocului, acest lucru vă va permite să afișați text în bloc

la centrul vertical. Centram textul pe orizontala folosind regula ( text-align: center ;).

Apoi, în cod setăm culoarea de fundal a blocului

folosind atributul style, folosind proprietatea de fundal și alocarea de valori pentru rgb(255, 0, 0) , rgb(0, 255, 0) și rgb(0, 0, 255) . Adică, facem alternativ un canal cât mai saturat posibil, iar canalele rămase nu sunt folosite pentru sinteză, deoarece valoarea lor este zero.

Încercați să editați acest exemplu și să specificați propriile valori, de exemplu rgb(100, 100, 100) .

Setarea culorii folosind RGBA

CSS3 are un nou instrument pentru lucrul cu culoarea - formatul RGBA. Poate fi numită o evoluție a modelului RGB, dar cu adăugarea unui nou canal - canalul A sau alfa. Acest canal stabilește transparența culorii. Valorile sale sunt setate în intervalul de la 0 la 1. O valoare de 0 corespunde transparenței totale, 1 - opacității complete (culoarea va fi aceeași cu cea specificată în primele trei canale RGB) și valorilor intermediare ​​cum ar fi 0,4 sau 0,6 - transluciditate în grade diferite.

Exemplu de cod.

Iată cum va funcționa:

Acest cod este vizual similar cu următorul, care utilizează modelul RGB pentru a specifica o valoare de culoare:

Iată rezultatul lui:

O valoare a canalului alfa egală cu zero face orice culoare invizibilă - absolut transparentă o valoare egală cu unu traduce culoarea în codul RGB fără modificări; Proprietatea rgba(255,0,0,1.0) arată culoarea roșie rgb(255, 0, 0) .

După valoare hexazecimală (cod HEX)

În viața de zi cu zi, folosim sistemul de numărare zecimală. Originile sale sunt foarte simple - avem zece degete pe mâini și să numărăm pe degete a fost convenabil în viață. Dacă sistemul zecimal are zece cifre: de la 0 la 9, iar numărul 10 este următoarea cifră, atunci sistemul numeric hexazecimal are 16 cifre, iar următoarea cifră este numărul 16.

Pentru a indica codurile de culoare, cifrele zecimale obișnuite de la 0 la 9 sunt folosite ca cifre hexazecimale, iar literele latine de la A la F sunt folosite pentru a indica numerele de la 10 la 15, adică (0, 1, 2, 3, 4, 5 , 6, 7, 8, 9, A, B, C, D, E, F). Pentru claritate, să punem asta într-un tabel:

Pentru a scrie numere hexazecimale mai mari decât F (15 în sistemul zecimal), ca și în sistemul zecimal, se folosesc și combinația de două cifre, dar deja hexazecimală, ceea ce este evident. Astfel, pentru a scrie numărul zecimal 255 în notație hexazecimală, utilizați notația FF.

Sistemul hexazecimal este mai ușor de înțeles de computer și procesează mai rapid valorile stabilite de valoarea hexazecimală.

Pentru a specifica o culoare în hexazecimal, precedați valoarea numerică cu semnul „#”, exemplu: #FFC0CB. Valoarea #FFC0CB în sine constă din trei cifre hexazecimale FF, C0 și CB. Semnificația acestei intrări este aceeași cu setarea culorii în format RGB (rgb(r, g, b)) - fiecare cifră hexazecimală din codul HEX indică saturația culorii în canalul său al modelului RGB.

#FF0000

#00FF00

#0000FF

Acest cod va afișa următoarele elemente:

Și iată o poză cu rezultatul din secțiunea „Setarea culorilor folosind RGB” din această pagină de mai sus.

Fig.1. Culori în RGB.

Vedem că culorile sunt identice.

Este permisă o notație scurtă a codului de culoare HEX: un număr de 6 cifre poate fi scris ca un număr de 3 cifre. Acest lucru este valabil numai atunci când două cifre din valoarea culorii unui canal sunt repetate.

Adică, următoarea abreviere este acceptabilă:

De exemplu, culoarea #ff22aa poate fi scrisă ca #f2a, sau culoarea #44aa22 poate fi scrisă ca #4a2.

Setarea culorii folosind HSL

CSS3 are un nou format pentru specificarea culorilor.

Formatul HSL este o abreviere pentru cuvintele englezești: Hue (nuanță), Saturate (saturație) și Lightness (luminozitate).

Nuanța în HSL este valoarea unei culori pe o roată specială de culori (Figura 2) și este specificată în grade. Dacă trasăm analogii cu modelul RGB, atunci 0° corespunde roșului, 120° corespunde verdelui și 240° corespunde albastrului.

Valoarea nuanței se va modifica în intervalul de la 0 la 359.

Figura 2. Roata de culori HSL.

A doua valoare - saturația (Saturate) este setată ca procent. La 100% saturație, culoarea este cât se poate de „suculentă” pe măsură ce indicatorul de saturație se deplasează spre 0%, culoarea devine mai ternă și se rostogolește în gri.

A treia valoare, Luminozitatea, este, de asemenea, setată ca procent. Cu cât procentul este mai mare, cu atât culoarea va fi mai strălucitoare. Valorile extreme de 0% și 100% vor indica culorile negre (fără lumină) și, respectiv, alb (supraexpus), și nu contează ce culoare din roata de culori a fost selectată în primul canal. Valoarea optimă a luminozității culorii este de 50%.

Setarea culorii folosind HSLA

Formatul HSLA este legat de HSL, la fel cum RGB este de RGBA. În formatul HSLA, ca și în RGBA, este adăugat un canal alfa, care este responsabil pentru transparența culorii.

Culoarea specificată în format HSL este mai ușor de citit. Putem spune că este intuitiv. De exemplu, codul hsl(120,60%,50%) poate reprezenta culoarea finală dacă există o imagine a roții de culori HSL în memorie. Nu același lucru se poate spune despre formatele RGB și HEX codul de culoare specificat în aceste formate devine clar doar după ce este vizualizat pe monitor.

Noile formate în CSS3 (HSL, HSLA și RGBA) funcționează în browsere începând de la versiunile: IE 9.0, Opera 10.0 Firefox 3.0. Cum pot face ca stilurile să funcționeze pe browsere mai vechi?

Somebloсk (culoare de fundal: rgb(255,50,50); culoare de fundal: rgba(255,50,50,0.85))

Când utilizați acest cod în browsere mai vechi, culoarea de fundal pentru clasa .somebloсk, deși nu va folosi un canal alfa, va fi afișată în format RGB.

Distribuie pe Facebook Distribuie

Distribuie pe TwitterTweet

Distribuie pe Google Plus Distribuie

Distribuie pe Pinterest Distribuie

Trimite e-mail Mail