Codurile de culoare CSS sunt folosite pentru a specifica o culoare. De obicei, codurile de culoare sau valorile de culoare sunt folosite pentru a seta o culoare fie pentru prim-planul unui element (de exemplu, culoarea textului, culoarea linkului), fie pentru fundalul unui element (culoarea fundalului, culoarea blocului). Ele pot fi, de asemenea, folosite pentru a schimba culoarea unui buton, chenar, marker, hover și alte efecte decorative.
Puteți seta propriile valori de culoare în diferite formate. Următorul tabel listează toate formatele posibile:
Formatele enumerate sunt descrise mai detaliat mai jos.
Culori CSS - coduri hexazecimale
Cod de culoare hexazecimal este o reprezentare din șase cifre a unei culori. Primele două cifre (RR) reprezintă valoarea roșie, următoarele două reprezintă valoarea verde (GG) și ultimele două reprezintă valoarea albastră (BB).
Culori CSS - coduri hexadecimale scurte
Cod de culoare hexadecimal scurt este forma mai scurtă a notației din șase cifre. În acest format, fiecare cifră este repetată pentru a produce valoarea echivalentă a culorii din șase cifre. De exemplu: # 0F0 devine # 00FF00.
Valoarea hexazecimală poate fi luată din orice software de grafică, cum ar fi Adobe Photoshop, Core Draw etc.
Fiecare cod de culoare hexazecimal din CSS va fi precedat de semnul hash „#”. Mai jos sunt exemple de utilizare a notației hexazecimale.
Culori CSS - Valori RGB
Valoarea RGB este codul de culoare, care este setat folosind proprietatea rgb (). Această proprietate are trei valori, câte una pentru roșu, verde și albastru. Valoarea poate fi un număr întreg, de la 0 la 255 sau un procent.
Notă: nu toate browserele acceptă proprietatea de culoare rgb (), deci nu este recomandat să o folosești.
Mai jos este un exemplu care arată mai multe culori folosind valori RGB.
Generator de coduri de culoare
Puteți crea milioane de coduri de culoare folosind serviciul nostru.
Culori sigure pentru browser
Mai jos este un tabel cu 216 culori care sunt cele mai sigure și mai independente de computer. Aceste culori CSS variază de la 000000 la FFFFFF hexazecimal. Sunt sigure de utilizat deoarece asigură că toate computerele afișează corect culoarea atunci când lucrează cu o paletă de 256 de culori.
Tabel de culori „sigur” CSS | |||||
#000000 | #000033 | #000066 | #000099 | # 0000CC | # 0000FF |
#003300 | #003333 | #003366 | #003399 | # 0033CC | # 0033FF |
#006600 | #006633 | #006666 | #006699 | # 0066CC | # 0066FF |
#009900 | #009933 | #009966 | #009999 | # 0099CC | # 0099FF |
# 00CC00 | # 00CC33 | # 00CC66 | # 00CC99 | # 00CCCC | # 00CCFF |
# 00FF00 | # 00FF33 | # 00FF66 | # 00FF99 | # 00FFCC | # 00FFFF |
#330000 | #330033 | #330066 | #330099 | # 3300CC | # 3300FF |
#333300 | #333333 | #333366 | #333399 | # 3333CC | # 3333FF |
#336600 | #336633 | #336666 | #336699 | # 3366CC | # 3366FF |
#339900 | #339933 | #339966 | #339999 | # 3399CC | # 3399FF |
# 33CC00 | # 33CC33 | # 33CC66 | # 33CC99 | # 33CCCC | # 33CCFF |
# 33FF00 | # 33FF33 | # 33FF66 | # 33FF99 | # 33FFCC | # 33FFFF |
#660000 | #660033 | #660066 | #660099 | # 6600CC | # 6600FF |
#663300 | #663333 | #663366 | #663399 | # 6633CC | # 6633FF |
#666600 | #666633 | #666666 | #666699 | # 6666CC | # 6666FF |
#669900 | #669933 | #669966 | #669999 | # 6699CC | # 6699FF |
# 66CC00 | # 66CC33 | # 66CC66 | # 66CC99 | # 66CCCC | # 66CCFF |
# 66FF00 | # 66FF33 | # 66FF66 | # 66FF99 | # 66FFCC | # 66FFFF |
#990000 | #990033 | #990066 | #990099 | # 9900CC | # 9900FF |
#993300 | #993333 | #993366 | #993399 | # 9933CC | # 9933FF |
#996600 | #996633 | #996666 | #996699 | # 9966CC | # 9966FF |
#999900 | #999933 | #999966 | #999999 | # 9999CC | # 9999FF |
# 99CC00 | # 99CC33 | # 99CC66 | # 99CC99 | # 99CCCC | # 99CCFF |
# 99FF00 | # 99FF33 | # 99FF66 | # 99FF99 | # 99FFCC | # 99FFFF |
# CC0000 | # CC0033 | # CC0066 | # CC0099 | # CC00CC | # CC00FF |
# CC3300 | # CC3333 | # CC3366 | # CC3399 | # CC33CC | # CC33FF |
# CC6600 | # CC6633 | # CC6666 | # CC6699 | # CC66CC | # CC66FF |
# CC9900 | # CC9933 | # CC9966 | # CC9999 | # CC99CC | # CC99FF |
# CCCC00 | # CCCC33 | # CCCC66 | # CCCC99 | #CCCCCC | #CCCCFF |
# CCFF00 | # CCFF33 | # CCFF66 | # CCFF99 | #CCFFCC | #CCFFFF |
# FF0000 | # FF0033 | # FF0066 | # FF0099 | # FF00CC | # FF00FF |
# FF3300 | # FF3333 | # FF3366 | # FF3399 | # FF33CC | # FF33FF |
# FF6600 | # FF6633 | # FF6666 | # FF6699 | # FF66CC | # FF66FF |
# FF9900 | # FF9933 | # FF9966 | # FF9999 | # FF99CC | # FF99FF |
# FFCC00 | # FFCC33 | # FFCC66 | # FFCC99 | #FFCCCC | #FFCCFF |
# FFFF00 | # FFFF33 | # FFFF66 | # FFFF99 | #FFFFCC | #FFFFFF |
Numerele hexazecimale sunt folosite pentru a seta 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 hexazecimal se formează prin combinarea a două numere într-unul singur. De exemplu, 255 zecimale este egal cu FF hexazecimal. Pentru a evita confuzia în definiția sistemului numeric, simbolul hash # este plasat în fața numărului hexazecimal, de exemplu # 666999. Fiecare dintre cele trei culori - roșu, verde și albastru - poate varia 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 - verde, iar ultimele două - albastru. Este permisă utilizarea unei forme prescurtate precum #rgb, unde fiecare caracter ar trebui să fie dublat. Deci, intrarea # fe0 ar trebui tratată 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. Masa 1 arată numele, codul hexazecimal, RGB, valorile HSL și descrierea.
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 determina culoarea folosind valorile zecimale ale componentelor roșii, verzi și albastre. Fiecare dintre cele trei componente de culoare ia o valoare de la 0 la 255. De asemenea, este permisă setarea culorii ca procent, în timp ce 100% va corespunde numărului 255. În primul rând, este indicat cuvântul cheie rgb, iar apoi în paranteze, sunt indicate componentele de culoare, 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 controlează transparența elementului. O valoare de 0 corespunde transparenței totale, 1 opacității și o valoare intermediară, cum ar fi 0,5, semi-transparenței.
RGBA a fost adăugat în CSS3, așa că validarea codului CSS ar trebui făcută folosind această versiune. 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 este validată, dar o culoare adăugată la proprietatea de fundal nu mai este. Î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 unei culori pe roata culorilor (Fig. 1) și este dată î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ă nicio culoare și o nuanță de gri, 100% este valoarea maximă de saturație.
Luminozitatea stabilește cât de strălucitoare este culoarea și este indicată ca procent de la 0% la 100%. Valorile scăzute fac culoarea mai închisă, iar valorile ridicate se deschid, 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 corespunde transparenței totale, 1 opacității și o valoare intermediară, cum ar fi 0,5, semi-transparenței.
Valorile culorilor în formatele RGBA, HSL și HSLA au fost adăugate în CSS3, așa că asigurați-vă că verificați 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 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
În HTML, culoarea poate fi setată în trei moduri:
Setarea unei culori în HTML după numele acesteia
Unele culori pot fi specificate după numele lor, folosind numele culorii în engleză ca valoare. Cele mai comune cuvinte cheie sunt negru, alb, roșu, verde, albastru etc.
Culoarea textului - roșu
Cele mai populare culori ale standardului World Wide Web Consortium (W3C):
Culoare | Nume | Culoare | Nume | Culoare | Nume | Culoare | Nume |
---|---|---|---|---|---|---|---|
Negru | gri | Argint | alb | ||||
Galben | Lămâie verde | Aqua | Fucsie | ||||
roșu | Verde | Albastru | Violet | ||||
Maro | măsline | Marinei | Teal |
Un exemplu de utilizare a diferitelor nume de culori:
Exemplu: setarea unei culori după numele ei
Îndreptare pe un fundal roșu
Îndreptare pe un fundal portocaliu
Titlu pe fundal de var
Text alb pe fundal albastru
Îndreptare pe un fundal roșu
Îndreptare pe un fundal portocaliu
Titlu pe fundal de var
Text alb pe fundal albastru
Specificarea culorii folosind RGB
Când se afișează culori diferite pe monitor, se bazează pe paleta RGB. Orice culoare se obține prin amestecarea a trei culori principale: R - roșu (roșu), G - verde (verde), B - albastru... Luminozitatea fiecărei culori este specificată de un octet și, prin urmare, poate lua valori de la 0 la 255. De exemplu, RGB (255,0,0) este afișat ca roșu deoarece roșu este setat la cea mai mare valoare (255) și restul sunt setate la 0 Puteți seta și culoarea ca procent. Fiecare dintre parametri indică nivelul de luminozitate al culorii corespunzătoare. De exemplu: rgb (127, 255, 127) și rgb (50%, 100%, 50%) vor seta aceeași saturație medie verde:
Exemplu: specificarea unei culori folosind RGB
rgb (127, 255, 127)
rgb (50%, 100%, 50%)
rgb (127, 255, 127)
rgb (50%, 100%, 50%)
Setare de culoare hexazecimală
Valorile R G B poate fi specificat și folosind valori hexazecimale (HEX) de culoare sub forma: #RRGGBB unde RR (roșu), GG (verde) și BB (albastru) sunt valori hexazecimale de la 00 la FF (la fel ca zecimalul 0-255). ) ... Sistemul hexazecimal, spre deosebire de sistemul zecimal, se bazează, după cum sugerează și numele, pe numărul 16. Sistemul hexazecimal folosește următoarele caractere: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, С, D, E, F. Aici numerele de la 10 la 15 sunt înlocuite cu litere latine. Numerele mai mari de 15 în hexazecimal reprezintă combinația a două caractere într-o singură valoare. De exemplu, cel mai mare număr 255 în zecimală este cel mai mare FF în hex. Spre deosebire de sistemul zecimal, un simbol hash este plasat în fața numărului hexazecimal # de exemplu, # FF0000 este afișat ca roșu, deoarece roșul este setat la cea mai mare valoare (FF) și restul culorilor sunt setate la valoarea minimă (00). Caractere după simbolul hash # puteți introduce atât litere mari, cât și litere mici. Sistemul hexazecimal vă permite să utilizați o formă prescurtată precum #rgb, unde fiecare caracter este echivalent cu dublu. Deci, intrarea # f7O ar trebui considerată ca # ff7700.
Exemplu: Culoare HEX
roșu: # FF0000
verde: # 00FF00
albastru: # 0000FF
roșu: # FF0000
verde: # 00FF00
albastru: # 0000FF
roșu + verde = galben: # FFFF00
roșu + albastru = violet: # FF00FF
verde + albastru = cyan: # 00FFFF
Lista culorilor comune (nume, HEX și RGB):
nume englezesc | nume rusesc | Probă | HEX | RGB | ||
---|---|---|---|---|---|---|
Nemuritoare | Nemuritoare | # E52B50 | 229 | 43 | 80 | |
Chihlimbar | Chihlimbar | # FFBF00 | 255 | 191 | 0 | |
Aqua | Albastru verde | # 00FFFF | 0 | 255 | 255 | |
Azur | Azur | # 007FFF | 0 | 127 | 255 | |
Negru | Negru | #000000 | 0 | 0 | 0 | |
Albastru | Albastru | # 0000FF | 0 | 0 | 255 | |
Bondi albastru | Bondi Beach Water | # 0095B6 | 0 | 149 | 182 | |
Alamă | Alamă | # B5A642 | 181 | 166 | 66 | |
Maro | Maro | # 964B00 | 150 | 75 | 0 | |
Albastru ca cerul | Azur | # 007BA7 | 0 | 123 | 167 | |
Verde închis de primăvară | Verde închis de primăvară | #177245 | 23 | 114 | 69 | |
Smarald | Smarald | # 50C878 | 80 | 200 | 120 | |
Vânătă | Vânătă | #990066 | 153 | 0 | 102 | |
Fucsie | Fucsie | # FF00FF | 255 | 0 | 255 | |
Aur | Aur | # FFD700 | 250 | 215 | 0 | |
gri | Gri | #808080 | 128 | 128 | 128 | |
Verde | Verde | # 00FF00 | 0 | 255 | 0 | |
Indigo | Indigo | # 4B0082 | 75 | 0 | 130 | |
Jad | Jad | # 00A86B | 0 | 168 | 107 | |
Lămâie verde | Lămâie verde | # CCFF00 | 204 | 255 | 0 | |
Malachit | Malachit | # 0BDA51 | 11 | 218 | 81 | |
Marinei | albastru marin | #000080 | 0 | 0 | 128 | |
Ocru | Ocru | # CC7722 | 204 | 119 | 34 | |
măsline | măsline | #808000 | 128 | 128 | 0 | |
portocale | portocale | # FFA500 | 255 | 165 | 0 | |
Piersică | Piersică | # FFE5B4 | 255 | 229 | 180 | |
Dovleac | Dovleac | # FF7518 | 255 | 117 | 24 | |
Violet | violet | #800080 | 128 | 0 | 128 | |
roșu | roșu | # FF0000 | 255 | 0 | 0 | |
Şofran | Şofran | # F4C430 | 244 | 196 | 48 | |
Mare verde | Marea verde | # 2E8B57 | 46 | 139 | 87 | |
Verde de mlaștină | Mlaştină | # ACB78E | 172 | 183 | 142 | |
Teal | Albastru verde | #008080 | 0 | 128 | 128 | |
Ultramarin | Ultramarin | # 120A8F | 18 | 10 | 143 | |
violet | violet | # 8B00FF | 139 | 0 | 255 | |
Galben | Galben | # FFFF00 | 255 | 255 | 0 |
Codurile de culoare (fond) după saturație și nuanță.