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 pe Limba engleză.
Atunci când creați o imagine color, principala problemă este reproducerea corectă a culorilor tipuri diferite 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ă.
Masa 16 culori primare, care sunt utilizate în toate browserele
| Nume | Culoare | Hex | (RGB) |
| Aqua (valul mării) | #00FFFF | (000,255,255) | |
| Negru | #000000 | (000,000,000) | |
| Albastru | #0000FF | (000,000,255) | |
| fucsia (magenta) | #FF00FF | (255,000,255) | |
| gri | #808080 | (128,128,128) | |
| Verde | #008000 | (000,128,000) | |
| Tei (verde aprins) | #00FF00 | (000,255,000) | |
| Maroon (visiniu închis) | #800000 | (128,000,000) | |
| Bleumarin (albastru închis) | #000080 | (000,000,128) | |
| măsline | #808000 | (128,128,000) | |
| Violet | #800080 | (128,000,128) | |
| roșu | #FF0000 | (255,000,000) | |
| Argint | #C0C0C0 | (192,192,192) | |
| Teal (gri-verde) | #008080 | (000,128,128) | |
| alb | #FFFFFF | (255,255,255) | |
| Galben | #FFFF00 | (255,255,000) |
Masa Violet culorile și nuanțele sale
| Nume | Culoare | Hex | (RGB) |
| Magenta (magenta) | #FFCBDB | (255,203,219) | |
| Magenta (magenta) | #FF0099 | (255,000,153) | |
| Magenta (magenta) | #F95A61 | (249,090,097) | |
| fucsia (fucsia) | #FF00FF | (255,000,255) | |
| Mauvein (violet anilină) | #EF0097 | (239,000,151) | |
| Roz somon (roz portocaliu) | #FF91A4 | (255,145,164) | |
| Cenise (o nuanță de violet) | #DE3163 | (153,149,140) | |
| vinete vinete (vinete) | #990066 | (153,000,132) | |
| Blush de lavandă (roz-lavandă) | #FFF0F5 | (255,240,245) | |
| liliac (liliac) | #C8A2C8 | (200,162,200) | |
| Magenta (magenta) | #FF008F | (255,000,143) | |
| orhidee (orhidee) | #DA70D6 | (218,112,214) | |
| Roșu-violet (violet-roșu) | #C71585 | (199,021,133) | |
| Sanguin (sangvin) | #92000A | (146,000,010) | |
| Ciulin (nuanță de violet) | #D8BFD8 | (185,211,238) | |
| Violet-vinete (o nuanță de violet) | #991199 | (153,017,153) | |
| Rosa vivo (roz intens) | #FF007F | (255,000,127) | |
| Lavandă-trandafir (o nuanță de violet) | #FBA0E3 | (108,123,139) | |
| Mountbatten roz | #997ABD | (153,122,141) |
Masa gri culorile și nuanțele sale
| Nume | Culoare | Hex | (RGB) |
| gri | #808080 | (128,128,128) | |
| gri | #bebebe | (190,190,190) | |
| (nuanță gri) | #858585 | (133,133,133) | |
| Gri33 | #545454 | (084,084,084) | |
| (Ardezie gri) | #708090 | (112,128,144) | |
| (Cuarţ) | #99958с | (153,149,140) | |
| (Gri deschis) | #bbbbbb | (187,187,187) | |
| (Argint) | #c0c0c0 | (192,192,192) | |
| (gri-alb) | #f0f0f0 | (240,240,240) | |
| (Barba lui Abdel-Kerim) | #e0e0e0 | (224,224,224) | |
| Gri deschis (gri deschis) | #d3d3d3 | (211,211,211) | |
| LightStateGray() | #778899 | (119,136,153) | |
| StateGray-1 (albastru pal floarea de colț1) | #c6e2ff | (198,226,255) | |
| StateGray-2 (albastru pal de floarea de colț2) | #b9d3ee | (185,211,238) | |
| StateGray3() | #9fb6cd | (159,182,205) | |
| StateGray4() | #6c7b8b | (108,123,139) |
Tabel (paletă) de culori html vă oferă posibilitatea de a alege în mod independent tonul de care aveți nevoie. Valoarea culorii este afișată în trei formate: Hex, RGB și HSV.
- Hex constă din trei valori de două caractere în sistemul numeric hexazecimal. De exemplu: #ff00b3, unde prima pereche de numere este roșie, a doua este verde și a treia este albastră.
- RGB (RedGreenBlue) are forma „200.100.255”, indicând cantitatea tonului corespunzător (roșu, verde, albastru) în culoarea rezultată.
- HSV (Hue, Saturation, Value - tone, saturation, value) este un model de culoare în care coordonatele sunt:
- Nuanță - ton de culoare, poate varia de la 0° la 360°.
- Saturație - saturație, variază de la 0-100 sau 0-1. Cu cât este mai mare acest parametru, cu atât culoarea este mai „pură”, motiv pentru care acest parametru este uneori numit puritate a culorii. Și cu cât acest parametru este mai aproape de zero, cu atât culoarea este mai aproape de gri neutru.
- Valoare (valoarea culorii) - setează luminozitatea, valoarea poate varia și între 0-100 sau 0-1.
Introdu codul de culoare: MERGE
Lista de culori cu nume
Tabelul listează numele de culori în limba engleză (care pot fi utilizate ca valori) acceptate de toate browserele și valorile lor hexazecimale. Toate culorile enumerate sunt „sigure”, ceea ce înseamnă că vor apărea la fel în toate browserele.
| Numele culorii | HEX | Culoare |
|---|---|---|
| Negru | #000000 | |
| Marinei | #000080 | |
| Albastru inchis | #00008B | |
| MediumBlue | #0000CD | |
| Albastru | #0000FF | |
| Verde inchis | #006400 | |
| Verde | #008000 | |
| Teal | #008080 | |
| DarkCyan | #008B8B | |
| DeepSkyBlue | #00BFFF | |
| Turcoaz închis | #00CED1 | |
| MediumPrimăvaraVerde | #00FA9A | |
| Lămâie verde | #00FF00 | |
| SpringGreen | #00FF7F | |
| Aqua | #00FFFF | |
| Cyan | #00FFFF | |
| Midnight Blue | #191970 | |
| Dodger Blue | #1E90FF | |
| LightSeaGreen | #20B2AA | |
| Padure verde | #228B22 | |
| Mare verde | #2E8B57 | |
| DarkSlateGray | #2F4F4F | |
| Verde lime | #32CD32 | |
| MediumSeaGreen | #3CB371 | |
| Turcoaz | #40E0D0 | |
| Albastru regal | #4169E1 | |
| SteelBlue | #4682B4 | |
| DarkSlateBlue | #483D8B | |
| Turcoaz mediu | #48D1CC | |
| Indigo | #4B0082 | |
| DarkOliveGreen | #556B2F | |
| CadetBlue | #5F9EA0 | |
| Floarea de colțAlbastru | #6495ED | |
| MediumAquaMarine | #66CDAA | |
| DimGray | #696969 | |
| Ardezie albastră | #6A5ACD | |
| OliveDrab | #6B8E23 | |
| Gri ardezie | #708090 | |
| LightSlateGray | #778899 | |
| Medium SlateBlue | #7B68EE | |
| GazonVerde | #7CFC00 | |
| Chartreuse | #7FFF00 | |
| Acvamarin | #7FFFD4 | |
| Maro | #800000 | |
| Violet | #800080 | |
| măsline | #808000 | |
| gri | #808080 | |
| Cer albastru | #87CEEB | |
| LightSkyBlue | #87CEFA | |
| Albastru violet | #8A2BE2 | |
| Roșu-închis | #8B0000 | |
| DarkMagenta | #8B008B | |
| SaddleBrown | #8B4513 | |
| DarkSeaGreen | #8FBC8F | |
| Verde deschis | #90EE90 | |
| Violet mediu | #9370D8 | |
| DarkViolet | #9400D3 | |
| Verde palid | #98FB98 | |
| DarkOrhid | #9932CC | |
| Galben verde | #9ACD32 | |
| Sienna | #A0522D | |
| Maro | #A52A2A | |
| Gri închis | #A9A9A9 | |
| Albastru deschis | #ADD8E6 | |
| Verde galben | #ADFF2F | |
| Turcoaz Pale | #AFEEEE | |
| LightSteelBlue | #B0C4DE | |
| Pudra albastra | #B0E0E6 | |
| FireBrick | #B22222 | |
| DarkGoldenRod | #B8860B | |
| Orhidee medie | #BA55D3 | |
| RosyBrown | #BC8F8F | |
| Kaki închis | #BDB76B | |
| Argint | #C0C0C0 | |
| MediumVioletRed | #C71585 | |
| IndianRed | #CD5C5C | |
| Peru | #CD853F | |
| Ciocolată | #D2691E | |
| bronzat | #D2B48C | |
| Gri deschis | #D3D3D3 | |
| PaleVioletRed | #D87093 | |
| Ciulin | #D8BFD8 | |
| Orhidee | #DA70D6 | |
| GoldenRod | #DAA520 | |
| purpuriu | #DC143C | |
| Gainsboro | #DCDCDC | |
| Prună | #DDA0DD | |
| BurlyWood | #DEB887 | |
| LightCyan | #E0FFFF | |
| Lavandă | #E6E6FA | |
| DarkSomon | #E9967A | |
| violet | #EE82EE | |
| PaleGoldenRod | #EEE8AA | |
| LightCoral | #F08080 | |
| Kaki | #F0E68C | |
| AliceBlue | #F0F8FF | |
| Mană | #F0FFF0 | |
| Azur | #F0FFFF | |
| SandyBrown | #F4A460 | |
| Grâu | #F5DEB3 | |
| Bej | #F5F5DC | |
| Fum alb | #F5F5F5 | |
| MintCream | #F5FFFA | |
| GhostWhite | #F8F8FF | |
| Somon | #FA8072 | |
| Alb antic | #FAEBD7 | |
| Lenjerie | #FAF0E6 | |
| LightGoldenRodYellow | #FAFAD2 | |
| Old Lace | #FDF5E6 | |
| roșu | #FF0000 | |
| Fucsie | #FF00FF | |
| Magenta | #FF00FF | |
| Roz închis | #FF1493 | |
| Portocaliu rosu | #FF4500 | |
| Roșie | #FF6347 | |
| HotPink | #FF69B4 | |
| Coral | #FF7F50 | |
| Darkorange | #FF8C00 | |
| LightSomon | #FFA07A | |
| Portocale | #FFA500 | |
| Roz deschis | #FFB6C1 | |
| Roz | #FFC0CB | |
| Aur | #FFD700 | |
| PeachPuff | #FFDAB9 | |
| NavajoWhite | #FFMORT | |
| Mocasin | #FFE4B5 | |
| Bisque | #FFE4C4 | |
| MistyRose | #FFE4E1 | |
| Migdale albite | #FFEBCD | |
| PapayaWhip | #FFEFD5 | |
| LavenderBlush | #FFF0F5 | |
| Seashell | #FFF5EE | |
| Matase de porumb | #FFF8DC | |
| LemonChiffon | #FFFACD | |
| FloralAlb | #FFFAF0 | |
| Zăpadă | #FFFAFA | |
| Galben | #FFFF00 | |
| Lumină galbenă | #FFFFE0 | |
| Fildeş | #FFFFFF0 | |
| alb | #FFFFFF |
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 in sistem 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.
| 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 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
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!
Rezultat acest exemplu prezentat în Fig. 2.
Orez. 2. Culori pe pagina web
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, care au fost folosite pentru a seta 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. Deci, numele Gri și Gri denotă o culoare gri de 50% cu codul #808080, iar cuvântul Magenta este un sinonim culori HTML Fuchsia, care corespunde codului hexazecimal #FF00FF. De asemenea, sunt sinonime cuvintele Aqua și Cyan, acestea corespund codului #00FFFF.
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Modulul de culoare CSS detaliază valorile care permit autorilor să definească culorile și opacitatea elementelor html, precum și valorile proprietății culorii.
proprietatea culorii
1. Culori prioritare: proprietatea culorii
Proprietatea setează culoarea fontului folosind diverse sisteme redarea culorii. 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 acceptă 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:
| Nume | HEX | RGB | Culoare |
|---|---|---|---|
| negru | #000000 | 0,0,0 | |
| argint | #C0C0C0 | 192,192,192 | |
| gri | #808080 | 128,128,128 | |
| alb | #FFFFFF | 255,255,255 | |
| maro | #800000 | 128,0,0 | |
| roșu | #FF0000 | 255,0,0 | |
| Violet | #800080 | 128,0,128 | |
| fucsie | #FF00FF | 255,0,255 | |
| verde | #008000 | 0,128,0 | |
| lămâie verde | #00FF00 | 0,255,0 | |
| măsline | #808000 | 128,128,0 | |
| galben | #FFFF00 | 255,255,0 | |
| marina | #000080 | 0,0,128 | |
| albastru | #0000FF | 0,0,255 | |
| teal | #008080 | 0,128,128 | |
| acva | #00FFFF | 0,255,255 |
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.
