Culoare rgb metalica. Culoarea în stiluri poate fi specificată în diferite moduri: prin valoare hexazecimală, după nume, în format RGB, RGBA, HSL, HSLA

>>Gestiunea culorilor

Valori hexazecimale de culoare RGB

Metodele de descriere și procesare a culorii diferă unele de altele prin reprezentarea finală pentru care sunt destinate. Să comparăm, de exemplu, reprezentarea culorilor pentru imprimare și pentru monitoarele de computer. În primul caz, se ia baza alb culoarea hârtiei pe care se aplică ulterior trei culori primare: albastru, VioletȘi galben. Amestecându-se între ele și cu culoarea albă a hârtiei în proporții diferite, aceste trei culori primare dau nuanțe de culoare diferite, cu excepția negrului pur, sau în absența completă a vopselelor dau hârtie albă. Dacă le adăugăm culoare neagră, obținem CMYK-o metoda de transmitere a culorii cand culoarea ceruta se obtine prin scaderea culorilor lipsa din alb.

În al doilea caz, se ia baza negru culoarea ecranului monitorului, fiecare celulă a căruia strălucește într-una dintre cele trei culori: roșu-roșu, verde-verde și albastru-albastru. Apoi, în absența completă a oricărei străluciri, obținem o culoare neagră pură a ecranului, iar oricare dintre culorile necesare este dată de raportul fiecăreia dintre cele trei culori. În acest caz vom obține RGB-metoda de transmitere a culorii. Culorile primare pot avea valori care variază de la 0 inainte de 255 , sau de la 0% inainte de 100% , sau poate fi reprezentat ca o valoare hexazecimală. În figura de mai jos puteți vedea rezultatele amestecării culorilor primare.

Sistemul de numere hexazecimale, spre deosebire de sistemul de numere zecimal, nu are zece cifre, ci șaisprezece - de unde și numele. În consecință, pot exista doar variante nerepetate ale combinațiilor de două cifre - 256 , pentru a continua seria numerelor după 9 scrisori de la A inainte de F, prin urmare, seria va arăta așa -

0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F.

Pentru a converti numerele dintr-un sistem numeric în altul și invers, utilizați calculatorul de mai jos. Valoarea maximă aici poate fi FF - 255 .

În acest caz, culoarea este specificată de trei numere hexazecimale, fiecare dintre ele formată din două cifre. Primul număr determină intensitatea roșu culori, mediu- verde, ultimul lucru- albastru culorile. Toate numerele pot lua valori în intervalul de la 00 inainte de FF(de la 0 la 255). De exemplu: culoarea verde este dată ca #00FF00, roșu - ca #FF0000, albastru - ca #0000FF, alb - ca #FFFFFF, absența completă a culorii sau negru este dat ca #000000 .

În formularul de mai jos puteți specifica orice valori hexazecimale pentru fiecare dintre cele trei culori și puteți vedea rezultatul amestecării lor făcând clic în câmpul de ieșire.

Exemple de valori de culoare RGB hexazecimale: gradații de roșu, albastru și verde.

vedere	cod	vedere	cod	vedere	cod	vedere	cod	vedere	cod	vedere	cod
	#010000		#800000		#000100		#008000		#000001		#000080
	#100000		#900000		#001000		#009000		#000010		#000090
	#200000		#A00000		#002000		#00A000		#000020		#0000A0
	#300000		#B00000		#003000		#00B000		#000030		#0000B0
	#400000		#C00000		#004000		#00C000		#000040		#0000C0
	#500000		#D00000		#005000		#00D000		#000050		#0000D0
	#600000		#E00000		#006000		#00E000		#000060		#0000E0
	#700000		#FF0000		#007000		#00FF00		#000070		#0000FF

Specificarea culorii utilizând literale șir

Pentru ușurință în utilizare, unor culori și combinațiile lor li s-au atribuit nume care sunt recunoscute de toate browserele și a devenit posibilă setarea multor dintre ele după nume. Tabelul de mai jos prezintă câteva dintre numele culorilor:

vedere	Nume	vedere	Nume	vedere	Nume	vedere	Nume
	alb		roșu		Portocale		Galben
	Verde		Albastru		Violet		Negru
	Aliceblue		Alb antic		Aqua		Acvamarin
	Azur		Bej		Bisque		Blanchedalmond
	Albastru violet		Maro		Burlywood		Cadetblue
	Chartreuse		Ciocolată		Coral		Albastru de colț
	Matase de porumb		purpuriu		Cyan		Albastru inchis
	Darkcyan		Toarg de aur negru		Gri închis		Verde inchis
	Darkkhaki		magenta închisă		verde întunecat		Darkorange
	Darkorchid		Roșu-închis		Darksalmon		Darkseagreen
	Albastru ardezie închis		Gri închis ardezie		Turcoaz închis		Darkviolet
	Roz închis		Deepskyblue		Dimgray		Dodgerblue
	Caramida de foc		Alb floral		Padure verde		Fuschia
	Gainsboro		Alb-fantomă		Aur		Vergea de Aur
	gri		Verde galben		Mană		Hotpink
	Indianred		Indigo		Fildeş		Kaki
	Lavandă		Lavenderblush		Lemonchiffon		Albastru deschis
	Lightcoral		Lightcyan		Lightrecerogalben		Verde deschis
	Gri deschis		Roz deschis		Lightsalmon		Lightseagreen
	Albastru deschis		Gri deschis		Albastru de oțel deschis		Lumină galbenă
	Lămâie verde		Verde lime		Lenjerie		Magenta
	Maro		Mediumaquamarine		Albastru mediu		Mediumorchid
	Mov mediu		Mediumseagreen		Mediumslateblue		verde mijlociu
	Turcoaz mediu		Roșu-violet mediu		Albastru miez de noapte		Cremă de mentă
	Mistyrose		Navajowhite		Marinei		Oldlace
	măsline		Oliverab		Portocaliu rosu		Orhidee
	Palegoldenrod		Verde palid		Paletteurquoise		Palevioletred
	Papayawhip		Peachpuff		Peru		Roz
	Prună		Pudra albastra		Rosybrown		Albastru regal
	maro de șa		Mare verde		scoica de mare		Sienna
	Argint		Cer albastru		Ardezie albastră		Slategray
	Zăpadă		Springgreen		Steelblue		bronzat
	Teal		Ciulin		Roșie		Turcoaz
	violet		Grâu		Fum alb		Galben verde

Lista de litere minuscule cu nume de culori este destul de extinsă și mai mult decât suficientă. Dacă trebuie să setați o culoare de fundal atât de neobișnuită încât nici măcar nu are un nume, puteți utiliza o valoare hexazecimală.

Folosind o paletă de culori sigură

Din păcate, pe platforme diferite, cu setări de sistem diferite, reproducerea corectă a culorilor este o problemă. Chestia este că browserul încearcă întotdeauna să ajusteze paleta de culori a documentului la setările sistemului și la capacitățile monitorului, amestecând în mod independent culorile și înlocuindu-le. Ca urmare, uneori utilizatorul nu vede exact ce a vrut webmasterul să-i arate. O cale de ieșire din această situație a fost găsită în utilizarea unei palete, fiecare culoare a cărei culoare este garantată a fi redată în mod egal de către toate browserele de pe platforme diferite. Acesta este așa-numitul garantat paletă, numită și sigur paletă. Această paletă include culori ale căror componente de culoare iau următoarele valori: 00 ,33 ,66 ,99 , CC,FF, în toate modurile posibile 216 combinatiile lor.

FFFFFF CCCCCC 999999 666666 333333 000000 CCCC66 CCCC33 999966 999933 999900 666600 CCFF66 CCFF00 CCFF33 CCCC99 666633 333300 99FF00 99FF33 99CC66 99CC00 99CC33 669900 CCFF99 99FF99 66CC00 66CC33 669933 336600 66FF00 66FF33 33FF00 33CC00 339900 009900 33FF33 00FF33 00FF00 00CC00 33CC33 00CC33 CCFFCC 99CC99 66CC66 669966 336633 003300 99FF99 66FF66 33FF66 00FF66 339933 006600 66FF99 33FF99 00FF99 33CC66 00CC66 009933 66CC99 33CC99 00CC99 339966 009966 006633 99FFCC 66FFCC 33FFCC 00FFCC 33CCCC 009999 CCFFFF 99FFFF 66FFFF 33FFFF 00FFFF 00CCCC 99CCCC 66CCCC 339999 669999 006666 336666 66CCFF 33CCFF 00CCFF 3399CC 0099CC 003333 99CCFF 3399FF 0099FF 6699CC 336699 006699 0066FF 3366CC 0066CC 0033FF 003399 003366 6699FF 3366FF 0000FF 0000CC 0033CC 000033 3333FF 3300FF 3300CC 3333CC 000099 000066 9999CC 6666FF 6666CC 666699 333399 333366 CCCCFF 9999FF 6666FF 6600FF 330099 330066 9966CC 9966FF 6600CC 6633CC 663399 330033 CC99FF CC66FF 9933FF 9900FF 660099 663366 CC66FF CC33FF CC00FF 9900CC 996699 660066 CC99CC CC66CC CC33CC CC00CC 990099 993399 FFCCFF FF99FF FF66FF FF33FF FF00FF CC3399 FF66CC FF00CC FF33CC CC6699 CC0099 990066 FF99CC FF3399 FF0099 CC0066 993366 660033 FF6699 FF3399 FF0066 CC3366 996666 663333 CC9999 CC6666 CC3333 CC0000 990033 330000 FFCCCC FF9999 FF6666 FF3333 FF0000 CC0033 FF6633 CC3300 FF3300 FF0000 CC0000 990000 FFCC99 FFCC66 FF6600 CC6633 993300 660000 FF9900 FF9933 CC9966 CC6600 996633 663300 FFCC66 FFCC00 FFCC33 CC9900 CC9933 996600 FFFFCC FFFF99 FFFF66 FFFF33 FFFF00 CCCC00

vedere	cod	vedere	cod	vedere	cod	vedere	cod	vedere	cod	vedere	cod

HEX/HTML

Culoarea 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 permit o formă scurtă de notație de culoare hexazecimală. Dacă fiecare dintre cele trei grupuri conține aceleași caractere, de exemplu #112233, atunci acestea pot fi scrise ca #123.

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

RGB

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

Valorile RGB sunt specificate ca un număr întreg de la 0 la 255. De exemplu, rgb(0,0,255) este afișat ca albastru deoarece parametrul albastru este setat la cea mai mare valoare (255), iar ceilalți sunt setati la 0.

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

h1 (culoare: rgb(255, 0, 0); ) /* roșu */
h2 (culoare: rgb(0, 255, 0); ) /* verde */
h3 (culoare: rgb(0, 0, 255); ) /* albastru */
h4 (culoare: rgb(0%, 0%, 100%); ) /* același albastru, intrare 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 care variază de la 0,0 (complet transparent) la 1,0 (complet opac).

h1 (culoare: rgb(0, 0, 255); ) /* albastru în RGB obișnuit */
h2 (culoare: rgba(0, 0, 255, 1); ) /* același albastru în RGBA, deoarece opacitate: 100% */
h3 (culoare: rgba(0, 0, 255, 0,5); ) /* opacitate: 50% */
h4 (culoare: rgba(0, 0, 255, .155); ) /* opacitate: 15,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 mai intuitiv și mai ușor de citit de om decât RGB tipic. Modelul este adesea folosit în aplicații grafice, palete de culori și analiza imaginilor.

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

Nuanța specifică poziția culorii pe roata de culori (de la 0 la 360). Saturația este valoarea procentuală a saturației (de la 0% la 100%). Luminozitatea este un procent de luminozitate (de la 0% la 100%).

h1 (culoare: hsl(120, 100%, 50%); ) /* verde */
h2 (culoare: hsl(120, 100%, 75%); ) /* verde deschis */
h3 (culoare: hsl(120, 100%, 25%); ) /* verde închis */
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 canal alfa pentru a indica opacitatea unui obiect.

Valoarea culorii HSLA este specificată ca: hsla (nuanță, saturație, luminozitate, alfa). Parametrul alfa este un număr care variază de la 0,0 (complet transparent) la 1,0 (complet opac).

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

CMYK

Modelul de culoare CMYK este adesea asociat cu imprimarea și imprimarea color. 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/negru).

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 precis, dimensiunea punctului de pe ecran care este scos pe mașina de fotocompunere pe filmul de culoarea respectivă (sau direct pe placa de imprimare în cazul CTP).

De exemplu, pentru a obține culoarea PANTONE 7526, ar trebui să amestecați 9 părți cyan, 83 părți magenta, 100 părți galben și 46 părți negru. Acesta poate fi notat astfel: (9,83,100,46). Uneori sunt utilizate următoarele 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 geometrie 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 culorilor. Î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 specifică poziția culorii pe roata de culori (de la 0 la 360). Saturația este valoarea procentuală a saturației (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 principale sunt „imaginare”, ceea ce înseamnă că nu puteți asocia X, Y și Z cu niciun set de culori de amestecat. 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 de proiectare al laboratorului a fost de a crea un spațiu de culoare în care modificările de culoare ar fi mai liniare în ceea ce privește percepția umană (comparativ cu XYZ), adică, astfel încât aceeași modificare a valorilor coordonatelor de culoare în diferite regiuni ale spațiului de culoare să fie produce aceeași senzație de schimbare a culorii.

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 în fața 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	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 controlează 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 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 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

ROȘU		VERDE		ALBASTRU
	0 1 2 3 4 5 6 7 8 9 a b c d e f	0 1 2 3 4 5 6 7 8 9 a b c d e f	0 1 2 3 4 5 6 7 8 9 a b c d e f	0 1 2 3 4 5 6 7 8 9 a b c d e f	0 1 2 3 4 5 6 7 8 9 a b c d e f

...click aici