Tabel (paleta) 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 sistem hexazecimal socoteala. 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 afișează numele culorilor limba engleza(care pot fi folosite ca valori) acceptate de toate browserele și valorile lor hexazecimale. Toate culorile enumerate sunt „sigure”, ceea ce înseamnă că vor reda 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 | |
DarkSlateGray | #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 colț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 | |
scoica de mare | #FFF5EE | |
Matase de porumb | #FFF8DC | |
LemonChiffon | #FFFACD | |
FloralAlb | #FFFAF0 | |
Zăpadă | #FFFAFA | |
Galben | #FFFF00 | |
Lumină galbenă | #FFFFE0 | |
Fildeş | #FFFFF0 | |
alb | #FFFFFF |
Culorile HTML sunt indicate prin șase caractere după bară oblică - de exemplu, #000000. Aceste șase caractere reprezintă proporțiile diferitelor culori (roșu, verde și albastru) în culoarea finală. Imaginea de pe monitorul computerului este alcătuită dintr-un număr mare de puncte numite pixeli. Fiecare pixel este o sursă mică de lumină, să o numim „lanternă”, care, la rândul său, constă din trei lanterne - roșu, verde și albastru. Prin reducerea sau creșterea intensității strălucirii felinarelor individuale colorate, obținem culoarea dorită.
coduri de culoare html
Culorile în HTML sunt notate prin notația hexazecimală (HEX) pentru combinația de roșu, albastru și verde (RGB).
Cea mai mică valoare a culorii este 0 (hexazecimal 00). Cea mai mare valoare a culorii este 255 (hexazecimal FF).
Valoarea culorii hexazecimale este de trei cifre, începând cu #.
Coduri de culoare (valori)
Culoare | cod HEX | Cod RGB |
---|---|---|
#000000 | rgb(0,0,0) | |
#FF0000 | rgb(255,0,0) | |
#00FF00 | rgb(0,255,0) | |
#0000FF | rgb(0,0,255) | |
#FFFF00 | rgb(255,255,0) | |
#00FFFF | rgb(0.255.255) | |
#FF00FF | rgb(255,0,255) | |
#C0C0C0 | rgb(192.192.192) | |
#FFFFFF | rgb(255.255.255) |
16 milioane de nuanțe
Combinând roșu, albastru și verde cu valori cuprinse între 0 și 255 pentru fiecare culoare, se adaugă peste 16 milioane de nuanțe (256 x 256 x 256).
Cele mai multe monitoare moderne sunt capabile să afișeze cel puțin 16.384 de nuanțe diferite (monitoarele LCD sunt în general capabile să afișeze 262,16 milioane (actualizat octombrie 2013) culori, în timp ce monitoarele CRT pot afișa un număr aproape nelimitat de culori).
Tabelul de culori de mai jos arată modificarea proporției de roșu de la 0 la 255 cu valori zero pentru albastru și verde:
roșu | cod HEX | Cod RGB |
---|---|---|
#000000 | rgb(0,0,0) | |
#080000 | rgb(8,0,0) | |
#100000 | rgb(16,0,0) | |
#180000 | rgb(24,0,0) | |
#200000 | rgb(32,0,0) | |
#280000 | rgb(40,0,0) | |
#300000 | rgb(48,0,0) | |
#380000 | rgb(56,0,0) | |
#400000 | rgb(64,0,0) | |
#480000 | rgb(72,0,0) | |
#500000 | rgb(80,0,0) | |
#580000 | rgb(88,0,0) | |
#600000 | rgb(96,0,0) | |
#680000 | rgb(104,0,0) | |
#700000 | rgb(112,0,0) | |
#780000 | rgb(120,0,0) | |
#800000 | rgb(128,0,0) | |
#880000 | rgb(136,0,0) | |
#900000 | rgb(144,0,0) | |
#980000 | rgb(152,0,0) | |
#A00000 | rgb(160,0,0) | |
#A80000 | rgb(168,0,0) | |
#B00000 | rgb(176,0,0) | |
#B80000 | rgb(184,0,0) | |
#C00000 | rgb(192,0,0) | |
#C80000 | rgb(200,0,0) | |
#D00000 | rgb(208,0,0) | |
#D80000 | rgb(216,0,0) | |
#E00000 | rgb(224,0,0) | |
#E80000 | rgb(232,0,0) | |
#F00000 | rgb(240,0,0) | |
#F80000 | rgb(248,0,0) | |
#FF0000 | rgb(255,0,0) |
umbre de gri
Pentru a obține nuanțe de gri, se folosesc proporții egale de toate culorile. Pentru a facilita alegerea culorii dorite, iti punem la dispozitie coduri pentru nuante de gri.
umbre de gri | cod HEX | Cod RGB |
---|---|---|
#000000 | rgb(0,0,0) | |
#080808 | rgb(8,8,8) | |
#101010 | rgb(16,16,16) | |
#181818 | rgb(24,24,24) | |
#202020 | rgb(32,32,32) | |
#282828 | rgb(40,40,40) | |
#303030 | rgb(48,48,48) | |
#383838 | rgb(56,56,56) | |
#404040 | rgb(64,64,64) | |
#484848 | rgb(72,72,72) | |
#505050 | rgb(80,80,80) | |
#585858 | rgb(88,88,88) | |
#606060 | rgb(96,96,96) | |
#686868 | rgb(104.104.104) | |
#707070 | rgb(112.112.112) | |
#787878 | rgb(120.120.120) | |
#808080 | rgb(128.128.128) | |
#888888 | rgb(136.136.136) | |
#909090 | rgb(144.144.144) | |
#989898 | rgb(152.152.152) | |
#A0A0A0 | rgb(160.160.160) | |
#A8A8A8 | rgb(168.168.168) | |
#B0B0B0 | rgb(176.176.176) | |
#B8B8B8 | rgb(184.184.184) | |
#C0C0C0 | rgb(192.192.192) | |
#C8C8C8 | rgb(200.200.200) | |
#D0D0D0 | rgb(208.208.208) | |
#D8D8D8 | rgb(216.216.216) | |
#E0E0E0 | rgb(224.224.224) | |
#E8E8E8 | rgb(232.232.232) | |
#F0F0F0 | rgb(240.240.240) | |
#F8F8F8 | rgb(248.248.248) | |
#FFFFFF | rgb(255.255.255) |
Cross-browser (pentru toate browserele) nume de culori html
O colecție de 150 de nume de culori html acceptate în toate browserele.
Denumiri standardizate de culori
W3C enumeră 16 nume de culori valide pentru HTML și CSS: aqua (acvamarin), negru (negru), albastru (albastru), fucsia (magenta), gri (gri), verde (verde), lime (lime sau verde deschis), maro (castan), bleumarin (ultramarin), măsline (măsline), violet (violet), roșu (roșu), argintiu (argintiu), teal (gri), alb (alb) și galben (galben).
Când utilizați culori care nu sunt incluse în această listă, va fi mai corect să folosiți codul lor hexazecimal (HEX) sau codul RGB.
Culori sigure
În urmă cu câțiva ani, când computerele puteau suporta maximum 256 de culori diferite, a fost propusă o listă de 216 „Web Safe Colors”, cu 40 de culori rezervate sistemului.
Această paletă de 216 de culori a fost creată pentru a afișa corect culorile în modul paletă de 256 de culori.
Nu contează acum, deoarece majoritatea computerelor din întreaga lume acceptă milioane de nuanțe de culoare. În orice caz, iată o listă cu acele culori:
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 |
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 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.
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.
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%) | Negrul | |
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 |
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
Un avertisment
Toate metodele de a prinde un leu 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
Codurile de culoare în CSS sunt folosite pentru a specifica culorile. De obicei, codurile de culoare sau valorile de culoare sunt folosite pentru a seta o culoare fie pentru prim-planul unui element (de exemplu, text, culoarea link-ului), fie pentru fundalul elementului (fondul, culoarea blocului). Ele pot fi, de asemenea, folosite pentru a schimba culoarea butoanelor, chenarele, marcatorul, hoverul și alte efecte decorative.
Puteți seta propriile valori de culoare în diverse formate. Următorul tabel listează toate formatele posibile:
Aceste formate sunt descrise mai detaliat mai jos.
Culori CSS - coduri hexadecimale
Cod de culoare hexazecimal este o reprezentare de culoare din șase cifre. Primele două cifre (RR) sunt valoarea roșie, următoarele două sunt valoarea verde (GG) și ultimele două sunt valoarea albastră (BB).
Culori CSS - coduri hexadecimale scurte
Cod de culoare hexazecimal scurt este o formă mai scurtă de notație cu șase caractere. Î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 grafic software, ca Adobe Photoshop, Core Draw etc.
Fiecare cod de culoare hexazecimal din CSS va fi precedat de un semn hash „#”. Următoarele sunt exemple de utilizare a notației hexazecimale.
Culori CSS - Valori RGB
Valoarea RGB este un cod 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 cu serviciul nostru.
Culorile browser sigure
Mai jos este un tabel cu 216 culori care sunt cele mai sigure și independente de computer. Aceste culori în CSS variază de la 000000 la codul hexadecimal FFFFFF. Acestea sunt sigure de utilizat, deoarece se asigură că toate computerele vor afișa corect culoarea atunci când lucrează cu paleta de 256 de culori.
Tabel de culori „sigure” în 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 |