Culoare albă în html. Tutorial HTML

folosind atributul de stil 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 pentru a include propriile valori, cum ar fi rgb(100, 100, 100) .

Setarea culorii cu RGBA

CSS3 a introdus 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 - A sau canal alfa. Acest canal stabilește transparența culorii. Valorile sale sunt setate în intervalul de la 0 la 1. O valoare egală cu 0 corespunde transparenței totale, 1 - opacității complete (culoarea va fi aceeași cu cea setată î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 seta valoarea culorii:

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 zecimal de numărare. Originile sale sunt foarte simple - avem zece degete pe mâini și era convenabil să numărăm pe degete în viață. Dacă există zece cifre în sistemul zecimal: de la 0 la 9, iar numărul 10 este următoarea cifră, atunci există 16 cifre în sistemul numeric hexazecimal, iar următoarea cifră va fi numărul 16.

Pentru a indica codurile de culoare, cifrele zecimale obișnuite de la 0 la 9 sunt folosite ca cifre hexazecimale și 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ă rezumam acest lucru într-un tabel:

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

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

Pentru a specifica o culoare în sistemul 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 de model RGB.

Acest cod va afișa următoarele elemente:

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

Fig.1. Culori în RGB.

Vedem că culorile sunt identice.

Este permisă o notație prescurtată pentru codul de culoare HEX: un număr din 6 cifre poate fi scris ca un număr din 3 cifre. Acest lucru este valabil numai dacă două cifre din valoarea culorii aceluiași 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 cu HSL

CSS3 are un nou format pentru specificarea culorilor.

Formatul HSL este o abreviere a cuvintelor englezești: Hue (hue), Saturate (saturație) și Lightness (luminozitate).

Nuanța în HSL este o valoare a culorii pe o roată specială de culoare (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 schimba 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 din ce în ce mai ternă și se rostogolește în gri.

A treia valoare - luminozitatea (Lightness) 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, respectiv, culorile negre (lipsa luminii) și alb (expuse), și nu contează ce culoare din roata de culori a fost selectată în primul canal. Valoarea optimă poate fi considerată valoarea luminozității culorii egală cu 50%.

Setarea culorii cu HSLA

Formatul HSLA este legat de HSL, la fel ca RGB și RGBA. În formatul HSLA, precum și în RGBA, se adaugă un canal alfa care este responsabil pentru transparența culorilor.

O culoare 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. Acest lucru nu se poate spune despre formatele RGB și HEX, codul de culoare specificat în aceste formate devine clar doar după ce este redat pe monitor.

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

Someblock (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 utilizează un canal alfa, va fi afișată în format RGB.

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 următoarele: 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 definiția sistemului numeric, numărul hexazecimal este precedat de simbolul hash #, de exemplu #666999. Fiecare dintre cele trei culori - roșu, verde și albastru - poate lua valori de la 00 la FF. Astfel, desemnarea culorii este împărțită în trei componente #rrggbb, unde primele două caractere marchează componenta roșie a culorii, cele două din mijloc marchează verde, iar ultimele două marchează 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ă nume. În tabel. 1 arată numele, codul hexadecimal, valorile în format RGB, HSL și descrierea.

Tab. 1. Nume de culori

Nume	Culoare	Codul	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 marin
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

Cu 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 o culoare 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 acceptabil să setați culoarea ca procent, în timp ce 100% va corespunde numărului 255. Mai întâi, este specificat cuvântul cheie rgb, apoi componentele de culoare sunt specificate î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 stabilește transparența elementului. O valoare de 0 este complet transparentă, 1 este opac, iar o valoare intermediară precum 0,5 este translucidă.

RGBA este adăugat la CSS3, astfel încât validarea codului CSS ar trebui să fie efectuată conform acestei versiuni. Trebuie remarcat faptul că standardul CSS3 este încă în curs de dezvoltare și unele dintre caracteristicile sale se pot schimba. De exemplu, o culoare RGB adăugată la proprietatea culoare de fundal trece validarea, dar una adăugată la proprietatea de fundal nu. Î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 format dintr-o combinație a primelor litere Hue (nuanță), Saturate (saturație) și Lightness (luminozitate). Nuanța este valoarea culorii de pe roata de culori (Fig. 1) și este specificată în grade. 0° este roșu, 120° este verde și 240° este albastru. Valoarea nuanței poate varia de la 0 la 359.

Orez. 1. Roata de culori

Saturația este intensitatea unei culori, 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ă de saturație.

Luminozitatea setează cât de strălucitoare este culoarea și este specificată ca procent de la 0% la 100%. Valorile mici fac culoarea mai închisă, în timp ce valorile mari o fac 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 care stabilește transparența elementului. O valoare de 0 este complet transparentă, 1 este opac, iar o valoare intermediară precum 0,5 este translucidă.

Valorile de culoare în formatele RGBA, HSL și HSLA sunt adăugate la CSS3, așa că atunci când utilizați aceste formate, verificați validitatea codului față de versiune.

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

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

Rezultatul acestui exemplu este prezentat în Fig. 2.

Orez. 2. Culori pe pagina web

HEX/HTML

O culoare în format HEX nu este altceva decât o reprezentare hexazecimală a RGB.

Culorile sunt reprezentate ca trei grupuri de cifre hexazecimale, unde fiecare grup este responsabil pentru propria sa culoare: #112233, unde 11 este roșu, 22 este verde, 33 este albastru. Toate valorile trebuie să fie între 00 și FF.

Multe aplicații acceptă o notație scurtă pentru culorile hexazecimale. Dacă fiecare dintre cele trei grupuri conține aceleași caractere, de exemplu #112233, atunci acestea pot fi scrise ca #123.

1. h1 (culoare: #ff0000; ) /* roșu */
2. h2 (culoare: #00ff00; ) /* verde */
3. h3 (culoare: #0000ff; ) /* albastru */
4. h4 (culoare: #00f; ) /* același albastru, stenografie */

RGB

Spațiul de culoare RGB (Roșu, Verde, Albastru) este format din toate culorile posibile care pot fi obținute prin amestecarea roșu, verde și albastru. Acest model este popular în fotografie, televiziune și grafică pe computer.

Valorile RGB sunt specificate ca un întreg între 0 și 255. De exemplu, rgb(0,0,255) este afișat ca albastru deoarece parametrul albastru este setat la cea mai mare valoare (255), iar restul este setat la 0.

Unele aplicații (în special browserele web) acceptă procente RGB (de la 0% la 100%).

1. h1 (culoare: rgb(255, 0, 0); ) /* roșu */
2. h2 (culoare: rgb(0, 255, 0); ) /* verde */
3. h3 (culoare: rgb(0, 0, 255); ) /* albastru */
4. h4 (culoare: rgb(0%, 0%, 100%); ) /* același albastru, notație procentuală */

Valorile de culoare RGB sunt acceptate în toate browserele majore.

RGBA

Recent, browserele moderne au învățat să lucreze cu modelul de culoare RGBA, o extensie a RGB cu suport pentru un canal alfa care determină opacitatea unui obiect.

Valoarea culorii RGBA este specificată ca: rgba (roșu, verde, albastru, alfa). Parametrul alfa este un număr între 0,0 (complet transparent) și 1,0 (complet opac).

1. h1 (culoare: rgb(0, 0, 255); ) /* albastru în RGB obișnuit */
2. h2 (culoare: rgba(0, 0, 255, 1); ) /* același albastru în RGBA deoarece opacitate: 100% */
3. h3 (culoare: rgba(0, 0, 255, 0,5); ) /* opacitate: 50% */
4. h4 (culoare: rgba(0, 0, 255, .155); ) /* opacitate: 15,5% */
5. h5 (culoare: rgba(0, 0, 255, 0); ) /* complet transparent */

RGBA este acceptat în IE9+, Firefox 3+, Chrome, Safari și Opera 10+.

HSL

Modelul de culoare HSL este o reprezentare a modelului RGB într-un sistem de coordonate cilindric. HSL reprezintă culorile într-un mod care este mai intuitiv și mai ușor de înțeles decât RGB tipic. Modelul este adesea folosit în aplicații grafice, în paletele de culori și pentru analiza imaginilor.

HSL înseamnă Hue (culoare / nuanță), Saturation (saturație), Lightness / Luminance (luminozitate / luminozitate / luminozitate, a nu fi confundat cu luminozitatea).

Nuanța setează poziția culorii pe roata de culori (de la 0 la 360). Saturația este o valoare procentuală de saturație (de la 0% la 100%). Luminozitatea este un procent de luminozitate (de la 0% la 100%).

1. h1 (culoare: hsl(120, 100%, 50%); ) /* verde */
2. h2 (culoare: hsl(120, 100%, 75%); ) /* verde deschis */
3. h3 (culoare: hsl(120, 100%, 25%); ) /* verde închis */
4. h4 (culoare: hsl(120, 60%, 70%); ) /* verde pastel */

HSL este acceptat în IE9+, Firefox, Chrome, Safari și Opera 10+.

HSLA

Similar cu RGB/RGBA, HSL are un mod HSLA cu suport pentru un canal alfa pentru a specifica opacitatea unui obiect.

Valoarea culorii HSLA este specificată ca: hsla (nuanță, saturație, luminozitate, alfa). Parametrul alfa este un număr între 0,0 (complet transparent) și 1,0 (complet opac).

1. h1 (culoare: hsl(120, 100%, 50%); ) /* verde în HSL obișnuit */
2. h2 (culoare: hsla(120, 100%, 50%, 1); ) /* același verde în HSLA deoarece opacitate: 100% */
3. h3 (culoare: hsla(120, 100%, 50%, 0,5); ) /* opacitate: 50% */
4. h4 (culoare: hsla(120, 100%, 50%, .155); ) /* opacitate: 15,5% */
5. h5 (culoare: hsla(120, 100%, 50%, 0); ) /* complet transparent */

CMYK

Modelul color CMYK este adesea asociat cu imprimarea color, cu imprimarea. CMYK (spre deosebire de RGB) este un model subtractiv, ceea ce înseamnă că valorile mai mari sunt asociate cu culori mai închise.

Culorile sunt determinate de raportul dintre cyan (cyan), magenta (magenta), galben (galben), cu adăugarea de negru (cheie / negruK).

Fiecare dintre numerele care definesc o culoare în CMYK reprezintă procentul de cerneală dintr-o anumită culoare care alcătuiește combinația de culori, sau mai bine zis, dimensiunea punctului ecranului afișat pe fotocompozitor pe filmul acestei culori (sau direct pe placă de imprimare în cazul CTP).

De exemplu, pentru a obține culoarea „PANTONE 7526”, ați amesteca 9 părți cyan, 83 părți magenta, 100 galben și 46 negru. Acesta poate fi notat astfel: (9,83,100,46). Uneori folosesc astfel de denumiri: C9M83Y100K46 sau (9%, 83%, 100%, 46%) sau (0,09 / 0,83 / 1,0 / 0,46).

HSB/HSV

HSB (cunoscut și ca HSV) este similar cu HSL, dar sunt două modele de culori diferite. Ambele se bazează pe geometria cilindrică, dar HSB/HSV se bazează pe modelul „hexcon”, în timp ce HSL se bazează pe modelul „bi-hexcon”. Artiștii preferă adesea să folosească acest model, este în general acceptat că dispozitivul HSB / HSV este mai aproape de percepția naturală a culorii. În special, modelul de culoare HSB este utilizat în Adobe Photoshop.

HSB / HSV înseamnă Hue (culoare / nuanță), Saturation (saturație), Brightness / Value (luminozitate / valoare).

Nuanța setează poziția culorii pe roata de culori (de la 0 la 360). Saturația este o valoare procentuală de saturație (de la 0% la 100%). Luminozitatea este un procent din luminozitate (de la 0% la 100%).

XYZ

Modelul de culoare XYZ (CIE 1931 XYZ) este un spațiu pur matematic. Spre deosebire de RGB, CMYK și alte modele, în XYZ componentele primare sunt „imaginare”, ceea ce înseamnă că nu puteți mapa X, Y și Z la niciun set de culori mixte. XYZ este modelul principal pentru aproape toate celelalte modele de culoare utilizate în domeniile tehnice.

LAB

Modelul de culoare LAB (CIELAB, „CIE 1976 L*a*b*”) este calculat din spațiul CIE XYZ. Scopul Lab a fost de a crea un spațiu de culoare în care schimbarea culorii să fie mai liniară în ceea ce privește percepția umană (comparativ cu XYZ), adică aceeași modificare a valorilor coordonatelor de culoare în diferite zone ale spațiului de culoare ar produce aceeași senzație de schimbare a culorii.