După cum știți, culoarea poate afecta starea unei persoane: atât mentală, cât și fizică. În fiecare zi, în timp ce navighează pe site-uri web pe internet, ochii evaluează milioane de culori și nuanțe. Un web designer care este familiarizat cu psihologia culorii poate manipula starea de spirit a vizitatorului pentru a atinge anumite obiective.
Acest lucru se datorează faptului că unele nuanțe calmează, iar altele, dimpotrivă, excită. Următorul vom vorbi despre modul în care culoarea este sintetizată și afișată folosind tehnologia computerizată.
RGB este model de culoare, reprezentând o metodă de obținere a tuturor culorilor și nuanțelor acestora prin amestecarea în diverse proporții a celor trei componente principale, care sunt:
De aici provine numele abreviat RGB. Aceste culori au fost alese ca fiind principale dintr-un motiv: motivul este fiziologia retinei ochiului uman și modul în care le percepe:
După cum am menționat mai devreme, culorile RGB sunt formate prin amestecarea culorilor primare. Pentru a descrie intensitatea fiecăruia dintre ele, a fost adoptată o schemă în care culoarea este reprezentată de intervalul 0-255 (8 biți), care este sistem hexazecimal calculul corespunde cu 00-FF.
Adică, culorile primare vor arăta astfel:
Dacă intensitatea culorii ia valori mai mici de 255, atunci se obțin diferite nuanțe de roșu, verde și albastru. Următorul este un tabel cu gradațiile lor, precum și valorile hexazecimale ale fiecăreia dintre nuanțe:
Desigur, pe lângă gradările de culori primare, există și cele mixte, iar numărul lor este destul de mare. Prin urmare, a fost creat un tabel de culori RGB, care prezintă toate nuanțele existente, precum și numele și reprezentările numerice ale acestora ( în formă zecimală și hexazecimală).
O puteți vizualiza aici. Acest tabel face viața mult mai ușoară pentru web designeri, deoarece în câteva secunde puteți găsi nuanța necesară și aflați reprezentarea numerică a acesteia.
Cu toate acestea, la un moment dat a apărut o problemă cu afișarea culorilor în diferite browsere și, pentru a o rezolva, a fost compilat așa-numitul „sigur” Paleta RGB culori care au fost derivate prin calcule matematice.
Când browserul nu poate afișa corect o culoare, va încerca să obțină ceva aproape de ceea ce are nevoie prin amestecarea culorilor adiacente și, cel mai probabil, rezultatul va fi complet inacceptabil:
Utilizarea codurilor Culori RGB din această paletă, un dezvoltator web nu trebuie să-și facă griji cu privire la afișarea culorilor pe paginile site-ului său atunci când este vizualizat folosind browsere diferite, pe diverse platformeși monitoare. Deși pe în acest moment tabelul culorilor sigure își pierde relevanța ( progresul tehnologic încă nu stă pe loc), când îl folosești, poți, după cum se spune, să dormi liniștit.
Cuvântul „aur” a fost folosit pentru prima dată la începutul secolului al XIV-lea pentru a descrie culoarea element chimic numit Aurum – aur. În modelul RGB, culoarea aurie este reprezentată de următoarele valori numerice:
Culoarea bej durează destul loc semnificativîn istorie, chiar dacă nu este cel mai expresiv. Multe monumente culturale, în special sculpturi antice, au fost realizate din piatră de sălatură și piatră de sălatură, care au o tentă bej. În modelul RGB, culoarea bej are următoarele reprezentări numerice.
>>Gestiunea culorilor
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 pe care le dau. alb hârtie. Dacă le adăugăm culoare neagră, obținem CMYK- o metoda de transmitere a culorii cand culoarea ceruta este obtinuta prin scaderea culorilor lipsa din alb.
În al doilea caz, se ia baza negru culoarea ecranului monitorului, fiecare celulă care 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 varia de la 0
la 255
, sau de la 0%
la 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 O la 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. |
În acest caz, culoarea este specificată de trei numere hexazecimale, fiecare dintre acestea fiind formată din două cifre. Primul număr determină intensitatea roşu culori, mediu- verde, ultimul- albastru culorile. Toate numerele pot lua valori în intervalul de la 00 la 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 |
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 | ||||
Blueviolet | Maro | Burlywood | Cadetblue | ||||
Chartreuse | Ciocolată | Coral | Albastru de colț | ||||
Mătasea de porumb | Crimson | Cyan | Albastru închis | ||||
Darkcyan | Toarg de aur negru | Gri închis | Verde închis | ||||
Darkkhaki | magenta închisă | verde întunecat | Darkorange | ||||
Darkorchid | roșu închis | Darksalmon | Darkseagreen | ||||
Albastru ardezie închis | Gri închis ardezie | Turcoaz închis | Darkviolet | ||||
Deeppink | Deepskyblue | Dimgray | Dodgerblue | ||||
Caramida de foc | Floralwhite | Verde de pădure | Fuschia | ||||
Gainsboro | Alb-fantomă | Aur | Vergea de Aur | ||||
Gri | verdegalben | 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 | galben deschis | ||||
Lămâie verde | Limegreen | 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 | Roșu portocaliu | Orhidee | ||||
Palegoldenrod | Verde palid | Paletteurquoise | Palevioletred | ||||
Papayawhip | Peachpuff | Peru | Roz | ||||
Prună | Albastru pudra | Rosybrown | Albastru regal | ||||
maro de șa | Seagreen | scoica de mare | Sienna | ||||
Argint | Skyblue | Slateblue | Slategray | ||||
Zăpadă | Springgreen | Steelblue | bronzat | ||||
Teal | Ciulin | Roșie | Turcoaz | ||||
Violet | Grâu | Fum alb | Galbenverde |
Din păcate, pe platforme diferite, cu diferite setări de sistem, transmisie corectă culoarea este o problemă. Chestia este că browserul încearcă întotdeauna să se ajusteze paleta de culori document sub setările sistemuluiși 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 seif 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.
vedere | cod | vedere | cod | vedere | cod | vedere | cod | vedere | cod | vedere | cod |
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 |
Colorează Limbajul CSS poate fi setat în moduri diferite:
Browserele acceptă specificarea unor culori pentru elemente după nume. Acest tabel conține câteva cuvinte cheie (nume de culori în limba engleză) utilizate pentru a seta proprietățile culorii, codul RGB, cod hexazecimal(HEX) și codul HSL.
Nume | Culoare | RGB | HEX | HSL | Descriere |
---|---|---|---|---|---|
alb | rgb(255, 255, 255) | #ffffff sau #fff | hsl(0, 0%, 100%) | Alb | |
argint | rgb(192, 192, 192) | #c0c0c0 | hsl(0, 0%, 75%) | Gri | |
gri | rgb(128, 128, 128) | #808080 | hsl(0, 0%, 50%) | Gri închis | |
negru | rgb(0, 0, 0) | #000000 sau #000 | hsl(0, 0%, 0%) | Negru | |
maro | rgb(128, 0, 0) | #800000 | hsl(0, 100%, 25%) | Roșu închis | |
roşu | rgb(255, 0, 0) | #ff0000 sau #f00 | hsl(0, 100%, 50%) | Roşu | |
portocale | rgb(255, 165, 0) | #ffa500 | hsl(38,8, 100%, 50%) | Portocale | |
galben | rgb(255, 255, 0) | #ffff00 sau #ff0 | hsl(60, 100%, 50%) | Galben | |
măsline | rgb(128, 128, 0) | #808000 | hsl(60, 100%, 25%) | măsline | |
lămâie verde | rgb(0, 255, 0) | #00ff00 sau #0f0 | hsl(120, 100%, 50%) | Verde deschis | |
verde | rgb(0, 128, 0) | #008000 | hsl(120, 100%, 25%) | Verde | |
acva | rgb(0, 255, 255) | #00ffff sau #0ff | hsl(180, 100%, 50%) | Albastru | |
albastru | rgb(0, 0, 255) | #0000ff sau #00f | hsl(240, 100%, 50%) | Albastru | |
marina | rgb(0,0,128) | #000080 | hsl(240, 100%, 25%) | Albastru închis | |
teal | rgb(0, 128, 128) | #008080 | hsl(180, 100%, 25%) | Albastru-verde | |
fucsie | rgb(255, 0, 255) | #ff00ff sau #f0f | hsl(300, 100%, 50%) | Roz | |
violet | rgb(128, 0, 128) | #800080 | hsl(300, 100%, 25%) | Violet |
Acesta este un exemplu de utilizare a numelor de culori, numele culorilor sunt preluate din tabelul extins.
Iată cum funcționează acest cod:
RGB este un model de culoare aditiv. Pe engleză plus- adaos. RGB este o abreviere a cuvintelor englezești: Red, Green, Blue - red, green, blue). Din aceasta este clar că în modelul RGB culorile sunt sintetizate prin adăugare trei culori(rosu, verde, albastru) in diverse cantitati.
Amestecând roșu, verde și culorile albastre poți obține câteva milioane de nuanțe. Toate combinațiile posibile sunt stocate în memoria computerului.
Treci la obiect.
Pentru a seta proprietăți în acest format, utilizați notația rgb(r, g, b), unde r, g, b sunt cele trei canale pentru fiecare culoare (roșu, verde, albastru). Valorile pentru fiecare canal sunt setate în intervalul de la 0 la 255.
Exemplu de cod.
Pentru a clarifica totul, iată un exemplu de cod:
Iată cum ar trebui să funcționeze acest exemplu:
Fig.1. Culori în RGB.Explicatii de exemplu.
La începutul paginii creăm clasa div.rgb, este necesară pentru blocurile create de etichetă
Apoi, în codul pe care l-am stabilit culoarea de fundal bloc
Încercați să editați acest exemplu și să specificați propriile valori, de exemplu rgb(100, 100, 100) .
A apărut în CSS3 instrument nou pentru lucrul cu culoare - format RGBA. Poate fi numită o evoluție a modelului RGB, dar cu adăugarea unui nou canal - canalul A sau alfa. Acest canal stabilește transparența culorii. Valorile sale sunt setate în intervalul de la 0 la 1. O valoare de 0 corespunde transparenței totale, 1 - opacității complete (culoarea va fi aceeași cu cea specificată în primii trei Canale RGB), și valori intermediare precum 0,4 sau 0,6 - transluciditate în grade diferite.
Exemplu de cod.
Iată cum va funcționa:
Acest cod este similar vizual cu următorul, care utilizează modelul RGB pentru a specifica o valoare a culorii:
Iată rezultatul lui:
O valoare a canalului alfa egală cu zero face orice culoare invizibilă - absolut transparentă o valoare egală cu unu traduce culoarea în codul RGB fără modificări; Proprietatea rgba(255,0,0,1.0) arată culoarea roșie rgb(255, 0, 0) .
În viața de zi cu zi, folosim sistemul de numărare zecimală. Originile sale sunt foarte simple - avem zece degete pe mâini și să numărăm pe degete a fost convenabil în viață. Dacă în sistem zecimal zece cifre: de la 0 la 9, iar numărul 10 este următoarea cifră, apoi sistemul numeric hexazecimal are 16 cifre, iar următoarea cifră va fi numărul 16.
Pentru a indica codurile de culoare, cifrele zecimale obișnuite de la 0 la 9 sunt folosite ca cifre hexazecimale, iar literele latine de la A la F sunt folosite pentru a indica numerele de la 10 la 15, adică (0, 1, 2, 3, 4, 5 , 6, 7, 8, 9, A, B, C, D, E, F). Pentru claritate, să punem asta într-un tabel:
Pentru a scrie numere hexazecimale mai mari decât F (15 în sistemul zecimal), ca și în sistemul zecimal, se folosesc și combinația de două cifre, dar deja hexazecimală, ceea ce este evident. Da, pentru consemnare număr zecimal 255 în notație hexazecimală este FF.
Sistemul hexazecimal este mai ușor de înțeles de computer și procesează mai rapid valorile stabilite de valoarea hexazecimală.
Pentru a specifica o culoare în hexazecimal, precedați valoarea numerică cu semnul „#”, exemplu: #FFC0CB. Valoarea #FFC0CB în sine constă din trei cifre hexazecimale FF, C0 și CB. Sensul acestei intrări este același cu setarea culorii format RGB(rgb(r, g, b)) - fiecare cifră hexazecimală din codul HEX indică saturația culorii în canalul său al modelului RGB.
Acest cod va afișa următoarele elemente:
Și iată o imagine cu rezultatul din secțiunea „Setarea culorilor folosind RGB” din această pagină de mai sus.
Fig.1. Culori în RGB.Vedem că culorile sunt identice.
Este permisă o notație scurtă a codului de culoare HEX: un număr din 6 cifre poate fi scris ca un număr din 3 cifre. Acest lucru este valabil numai atunci când două cifre din valoarea culorii unui canal sunt repetate.
Adică, următoarea abreviere este acceptabilă:
De exemplu, culoarea #ff22aa poate fi scrisă ca #f2a, sau culoarea #44aa22 poate fi scrisă ca #4a2.
A apărut în CSS3 nou format pentru a indica culoarea.
Formatul HSL este o abreviere pentru cuvintele englezești: Hue (nuanță), Saturate (saturație) și Lightness (luminozitate).
Nuanța în HSL este valoarea unei culori pe o roată specială de culori (Figura 2) și este specificată în grade. Dacă trasăm analogii cu modelul RGB, atunci 0° corespunde roșului, 120° corespunde verdelui și 240° corespunde albastrului.
Valoarea nuanței se va schimba de la 0 la 359.
A doua valoare - saturația (Saturate) este setată ca procent. La 100% saturație, culoarea este cât se poate de „suculentă” pe măsură ce indicatorul de saturație se deplasează spre 0%, culoarea devine mai ternă și se estompează în gri.
A treia valoare, Luminozitatea, este, de asemenea, setată ca procent. Cu cât procentul este mai mare, cu atât culoarea va fi mai strălucitoare. Valorile extreme de 0% și 100% vor indica culorile negre (fără lumină) și, respectiv, alb (supraexpus), și nu contează ce culoare din roata de culori a fost selectată în primul canal. Valoarea optimă a luminozității culorii este de 50%.
Formatul HSLA este legat de HSL, la fel cum RGB este de RGBA. ÎN format HSLA, ca și în RGBA, a fost adăugat un canal alfa, care este responsabil pentru transparența culorii.
Culoarea specificată în format HSL este mai ușor de citit. Putem spune că este intuitiv. De exemplu, codul hsl(120,60%,50%) poate reprezenta culoarea finală dacă există o imagine a roții de culori HSL în memorie. Nu același lucru se poate spune despre formatele RGB și HEX codul de culoare specificat în aceste formate devine clar doar după ce este vizualizat pe monitor.
Noile formate în CSS3 (HSL, HSLA și RGBA) funcționează în browsere începând de la versiunile: IE 9.0, Opera 10.0 Firefox 3.0. Cum pot face ca stilurile să funcționeze pe browsere mai vechi?
Somebloсk (culoare de fundal: rgb(255,50,50); culoare de fundal: rgba(255,50,50,0.85))
Când utilizați acest cod în browsere mai vechi, culoarea de fundal pentru clasa .somebloсk, deși nu va folosi un canal alfa, va fi afișată în format RGB.
Codurile de culoare în CSS sunt folosite pentru a specifica culorile. În mod obișnuit, codurile de culoare sau valorile de culoare sunt utilizate pentru a seta culoarea fie pentru culoarea primului plan a unui element (de exemplu, culoarea textului, culoarea linkului), fie pentru culoarea de fundal a unui element (culoarea fundalului, culoarea blocului). Ele pot fi, de asemenea, folosite pentru a schimba culoarea unui buton, chenar, marcator, hover și alte efecte decorative.
Puteți seta valorile culorii în diverse formate. Următorul tabel listează toate formatele posibile:
Formatele enumerate sunt descrise mai detaliat mai jos.
Cod de culoare hexazecimal este o reprezentare de șase cifre a culorii. Primele două cifre (RR) reprezintă valoarea roșie, următoarele două reprezintă valoarea verde (GG), iar ultimele două reprezintă valoarea albastră (BB).
Cod de culoare hexadecimal scurt este o formă mai scurtă de notație cu șase caractere. În acest format, fiecare cifră este repetată pentru a produce o valoare de culoare echivalentă 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 semnul hash „#”. Mai jos sunt exemple de utilizare a notațiilor hexazecimale.
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.
Nota: 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.
Puteți crea milioane de coduri de culoare folosind serviciul nostru.
Mai jos este un tabel cu 216 culori care sunt cele mai sigure și mai independente de computer. Aceste culori în CSS variază de la 000000 la codul hexazecimal FFFFFF. Sunt sigure de utilizat deoarece asigură că toate computerele afișează 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 |
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 de numere, înainte număr hexazecimal pune simbolul hash #, 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.
Internet Explorer | Chrome | 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 închis | |
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 închis | |
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 |
Internet Explorer | Chrome | 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 posibil să setați culoarea ca procent, cu 100% corespunzând numărului 255. Mai întâi, indicați cuvânt cheie rgb , iar apoi componentele de culoare sunt indicate în paranteze, separate prin virgule, de exemplu rgb(255, 128, 128) sau rgb(100%, 50%, 50%).
Internet Explorer | Chrome | 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.
Internet Explorer | Chrome | 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 fac culoarea mai deschisă, valorile extreme de 0% și 100% corespund alb-negru.
Internet Explorer | Chrome | 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 culorii în formate RGBA, HSL și HSLA au fost adăugate la CSS3, așa că atunci când utilizați aceste formate, verificați codul pentru validitatea versiunii.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
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