Această pagină conține un tabel cu cuvinte cheie care pot fi folosite pentru a desemna culori în astfel de limbaje de dezvoltare web precum: HTML, CSS, JavaScript, Flash etc.
În vechea specificație WC3, doar 16 cuvinte cheie erau folosite pentru a seta culorile în HTML și CSS. Mai târziu, în 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, codurile hexazecimale ș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 dintre cuvintele cheie se referă la aceeași culoare. Deci, numele Gri și Gri reprezintă 50% gri cu codul #808080, în timp ce cuvântul Magenta este un sinonim HTML pentru culoarea Fuchsia, care corespunde codului hexadecimal #FF00FF. Cuvintele Aqua și Cyan sunt, de asemenea, sinonime, ele corespund codului #00FFFF .
|
|
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 a formei #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 hex, valorile în format RGB, HSL și descrierea.
Nume | Culoare | Codul | RGB | HSL | Descriere |
---|---|---|---|---|---|
alb | #ffff 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 caracteristici 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 ș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ă 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
Modulul de culoare CSS detaliază valorile care permit autorilor să specifice culorile și opacitatea elementelor html, precum și valorile proprietății de culoare.
proprietatea culorii
1. Culori prioritare: proprietatea culorii
Proprietatea setează culoarea fontului folosind diferite sisteme de randare. Proprietatea descrie culoarea conținutului text al elementului. De asemenea, 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 valori:
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 unei valori RGB în hexazecimal 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, nu prin adăugarea de zerouri. De exemplu, #fb0 se extinde la #ffbb00 . Acest lucru asigură faptul că #ffffff alb poate fi specificat în prescurtarea #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 caracter). 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.
Există mai multe moduri de a reprezenta culoarea în design web.
HEX este un sistem hexazecimal pentru reprezentarea culorilor în baza 16. Pentru acest sistem, cifre 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) , 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 parte „*” a culorii 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 reda corect o culoare, se potrivește 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 (negru) | #000000 | (000,000,000) | |
Albastru (albastru) | #0000FF | (000,000,255) | |
fucsia (magenta) | #FF00FF | (255,000,255) | |
gri (gri) | #808080 | (128,128,128) | |
verde (verde) | #008000 | (000,128,000) | |
Tei (verde aprins) | #00FF00 | (000,255,000) | |
maro (maroon) | #800000 | (128,000,000) | |
Bleumarin (albastru închis) | #000080 | (000,000,128) | |
măsline (măsline) | #808000 | (128,128,000) | |
violet (violet) | #800080 | (128,000,128) | |
roșu (roșu) | #FF0000 | (255,000,000) | |
Argint (argint) | #C0C0C0 | (192,192,192) | |
Teal (gri verde) | #008080 | (000,128,128) | |
alb (alb) | #FFFFFF | (255,255,255) | |
galben (galben) | #FFFF00 | (255,255,000) |
masa Violet culori si nuante
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) | |
Mauveine (violet anilină) | #EF0097 | (239,000,151) | |
Roz somon (roz portocaliu) | #FF91A4 | (255,145,164) | |
Cenise (o nuanță de magenta) | #DE3163 | (153,149,140) | |
vinete vinete (vinete) | #990066 | (153,000,132) | |
Blush de lavandă (lavandă roz) |  #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 (o nuanță de magenta) | #D8BFD8 | (185,211,238) | |
Violet-vinete (o nuanță de magenta) | #991199 | (153,017,153) | |
Rosa vivo (roz bogat) | #FF007F | (255,000,127) | |
Trandafir de lavandă (o nuanță de violet) | #FBA0E3 | (108,123,139) | |
Mountbatten roz (Mounbatten roz) | #997ABD | (153,122,141) |
masa gri culori si nuante
Nume | Culoare | hex | (RGB) |
Gri cenusiu) | #808080 | (128,128,128) | |
Gri cenusiu) | #bebebe | (190,190,190) | |
(nuanță gri) | #858585 | (133,133,133) | |
Gri33 (Gray-33) | #545454 | (084,084,084) | |
(ardezie gri) | #708090 | (112,128,144) | |
(Cuarţ) | #99958s | (153,149,140) | |
(Gri deschis) | #bbbbbb | (187,187,187) | |
(Argint) | #c0c0c0 | (192,192,192) | |
(alb gri) | #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 de 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 este format din trei valori cu două caractere în notație 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) - un model de culoare în care coordonatele sunt:
- Nuanță - ton de culoare, poate varia de la 0° la 360°.
- Saturație - saturație, variază între 0-100 sau 0-1. Cu cât această setare este mai mare, cu atât culoarea este mai „pură”, motiv pentru care această setare este uneori denumită puritatea 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 afișa la fel în toate browserele.
Nume culoare | HEX | Culoare |
---|---|---|
Negru | #000000 | |
Marinei | #000080 | |
albastru inchis | #00008B | |
Albastru mediu | #0000CD | |
Albastru | #0000FF | |
verde inchis | #006400 | |
Verde | #008000 | |
Teal | #008080 | |
DarkCyan | #008B8B | |
DeepSkyBlue | #00BFFF | |
Turcoaz închis | #00CED1 | |
MediumSpringGreen | #00FA9A | |
lămâie verde | #00FF00 | |
SpringGreen | #00FF7F | |
Aqua | #00FFFF | |
cyan | #00FFFF | |
albastru miezul nopții | #191970 | |
Dodger Blue | #1E90FF | |
LightSeaGreen | #20B2AA | |
padure verde | #228B22 | |
verde mare | #2E8B57 | |
Dark SlateGray | #2F4F4F | |
Verde lime | #32CD32 | |
MediumSeaGreen | #3CB371 | |
Turcoaz | #40E0D0 | |
Albastru regal | #4169E1 | |
albastru oțel | #4682B4 | |
DarkSlateBlue | #483D8B | |
Turcoaz mediu | #48D1CC | |
Indigo | #4B0082 | |
DarkOliveGreen | #556B2F | |
Cadet Blue | #5F9EA0 | |
Floarea de colt Albastru | #6495ED | |
MediumAquaMarine | #66CDAA | |
Dim Gray | #696969 | |
Ardezie albastră | #6A5ACD | |
OliveDrab | #6B8E23 | |
SlateGray | #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 | |
Mov mediu | #9370D8 | |
violet închis | #9400D3 | |
verde palid | #98FB98 | |
Orhideea întunecată | #9932CC | |
galben verde | #9ACD32 | |
Sienna | #A0522D | |
Maro | #A52A2A | |
gri închis | #A9A9A9 | |
albastru deschis | #ADD8E6 | |
Verde galben | #ADFF2F | |
paleturcoaz | #AFEEEE | |
LightSteelBlue | #B0C4DE | |
Pudra albastra | #B0E0E6 | |
FireBrick | #B22222 | |
DarkGoldenRod | #B8860B | |
Orhidee medie | #BA55D3 | |
RosyBrown | #BC8F8F | |
DarkKhaki | #BDB76B | |
Argint | #C0C0C0 | |
MediumVioletRed | #C71585 | |
IndianRed | #CD5C5C | |
Peru | #CD853F | |
Ciocolată | #D2691E | |
bronzat | #D2B48C | |
gri deschis | #D3D3D3 | |
PaleViolet Red | #D87093 | |
Ciulin | #D8BFD8 | |
Orhidee | #DA70D6 | |
nuia de aur | #DAA520 | |
purpuriu | #DC143C | |
Gainsboro | #DCDCDC | |
Prună | #DDA0DD | |
Burlywood | #DEB887 | |
LightCyan | #E0FFFF | |
Lavandă | #E6E6FA | |
DarkSomon | #E9967A | |
violet | #EE82EE | |
PaleGoldenRod | #EEE8AA | |
LightCoral | #F08080 | |
Kaki | #F0E68C | |
Alice Blue | #F0F8FF | |
mană | #F0FFF0 | |
Azur | #F0FFFF | |
Sandy Brown | #F4A460 | |
Grâu | #F5DEB3 | |
Bej | #F5F5DC | |
fum alb | #F5F5F5 | |
MintCream | #F5FFFA | |
alb fantomă | #F8F8FF | |
Somon | #FA8072 | |
alb antic | #FAEBD7 | |
lenjerie | #FAF0E6 | |
LightGoldenRodYellow | #FAFAD2 | |
Dantela Veche | #FDF5E6 | |
roșu | #FF0000 | |
Fucsie | #FF00FF | |
Magenta | #FF00FF | |
roz închis | #FF1493 | |
Portocaliu rosu | #FF4500 | |
roșie | #FF6347 | |
roz fierbinte | #FF69B4 | |
Coral | #FF7F50 | |
portocaliu închis | #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 | |
Papaya Whip | #FFEFD5 | |
LavenderBlush | #FFF0F5 | |
scoici | #FFF5EE | |
Matase de porumb | #FFF8DC | |
LemonChiffon | #FFFACD | |
FloralAlb | #FFFAF0 | |
Zăpadă | #FFFAFA | |
Galben | #FFFF00 | |
Lumină galbenă | #FFFFE0 | |
Fildeş | #FFFFF0 | |
alb | #FFFFFF |