Culoare rgb roșu deschis. Tutorial HTML. Culori RGB. Paleta de culori sigure

Privește cu atenție desenul. Fundalul ferestrei derulante este translucid. Aceasta este o tehnică de proiectare destul de comună. Să ne gândim cum poate fi implementat acest lucru.

Sarcină

Faceți culoarea translucidă.

Soluţie

Primul gând în această situație este să folosiți o imagine png24 cu o transluciditate prestabilită pentru fundal. Dar această imagine este complet inutilă. Vă puteți descurca foarte bine fără el (și, prin urmare, fără o solicitare suplimentară către server). Să încercăm totuși să găsim soluția optimă.

Al doilea gând este de a folosi . Dar în acest caz nu este foarte convenabil. La urma urmei, atunci nu numai fundalul, ci și inscripțiile vor deveni translucide. Da, de fapt, toată fereastra deodată.

Desigur, puteți încerca să adăugați un container suplimentar și să-i aplicați opacitate numai acestuia, dar acest element HTML va fi destinat doar decorului și va fi evident redundant. Este posibil să te descurci fără ea?

Sigur ca poti! Dacă utilizați RGBA.

Format de descriere a culorilor RGBA

CSS3 vă permite să specificați culoarea folosind funcțiile RGB și RGBA. În acest caz, trebuie să indicăm proporția fiecărei componente de culoare pentru care este alocat un octet (de la 0 la 255, în cazul în care cineva nu știe).

Sintaxa pentru acest caz este foarte simplă:

Fundal: rgb(0, 255, 0); /* verde pur */

Pentru RGBA, se adaugă un al patrulea parametru - transparența alfa (de la 0 la 1).

Fundal: rgba(255, 0, 0, 0,5); /* roșu pur cu 50% transparență */

Iată, soluția la problema noastră. Doar setați culoarea de fundal folosind rgba și totul va arăta așa cum ne dorim. Fără imagini și elemente inutile!

De unde pot obține aceste numere?

Puteți privi componentele culorii folosind instrumentul de pipetă din Photoshop.

Despre compatibilitatea între browsere

Deoarece funcția RGB este mult mai veche decât RGBA și este prezentă încă din zilele standardului CSS2, pentru a vă proteja împotriva celor mai vechi browsere, puteți utiliza următoarea construcție duplicată:

SomeBlock ( fundal: rgb(255, 0, 0); fundal: rgba(255, 0, 0, 0.5); )

Cu această abordare, străbunicii browserelor moderne nu vor avea transluciditate, dar culoarea în sine va rămâne corectă.

Va trebui să aveți grijă de IE separat. Măgarii nu înțeleg RGBA până la versiunea 8 inclusiv.

Ca întotdeauna: pământ pentru țărani, fabrici pentru muncitori și măgari o cârjă! La fel de .

Desigur, în condiții de luptă punem această regulă într-un CSS separat, pe care îl conectăm.

SomeBlock ( background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ff0000,endColorstr=#80ff0000); zoom: 1; )

Trucul este să specificați culorile de început și de sfârșit ca aceleași (ff0000 - roșu) și să profitați de faptul că puteți seta canalul alfa pentru gradient în acest filtru (în exemplu, valoarea este 80).

Pentru referință: filtrul folosește sistemul hexazecimal și codul pentru o culoare complet opac este FF (în zecimală aceasta este 255). În consecință, hexazecimalul 80 este zecimalul 128, adică 50% transparență.

Testat în:

• IE 6-9
• Firefox 3+
• Opera 10+
• Safari 4
• Crom

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 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

Browserele acceptă unele culori după numele lor. În tabel 1 arată numele, codul hexazecimal, RGB, valorile HSL și descrierea.

Folosind RGB

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

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

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.

HSLA

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!

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. Î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 specifica valorile culorii în diferite formate. Următorul tabel listează toate formatele posibile:

Formatele enumerate sunt descrise mai detaliat mai jos.

Culori CSS - coduri hexadecimale

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).

Culori CSS - coduri hexadecimale scurte

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 preluată 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țiilor 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 folosind serviciul nostru.

Culori sigure pentru browser

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 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.

Culoarea în CSS poate fi setată în diferite moduri:

• dupa nume,
• prin valoare hexazecimală,
• în formatele RGB și RGBA,
• în formatele HSL și HSLA.

Setați culoarea după nume

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 specifica proprietățile culorii, codul RGB, codul hexazecimal (HEX) și codul HSL.

Acesta este un exemplu de utilizare a numelor de culori, numele culorilor sunt preluate din tabelul extins.

Iată cum funcționează acest cod:

Setarea culorii folosind RGB

RGB este un model de culoare aditiv. În limba engleză plus- adaos. RGB este o abreviere a cuvintelor englezești: Red, Green, Blue - red, green, blue). Din aceasta rezultă clar că în modelul RGB culorile sunt sintetizate prin adăugarea a trei culori (roșu, verde, albastru) în cantități diferite.

Amestecând culorile roșu, verde și albastru puteți obține câteva milioane de nuanțe. Toate combinațiile posibile sunt stocate în memoria computerului.

Treci la subiect.

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:

Explicatii de exemplu.

La începutul paginii creăm clasa div.rgb, este necesară pentru blocurile create de etichetă

au fost afișate la dimensiunea necesară: 240px cu 40px. Atribuim proprietății line-height o valoare de 40px, adică egală cu înălțimea blocului, acest lucru vă va permite să afișați text în bloc

la centrul vertical. Centram textul pe orizontala folosind regula ( text-align: center ;).

Apoi, în cod setăm culoarea de fundal a blocului

folosind atributul style, folosind proprietatea de fundal și alocarea de valori pentru rgb(255, 0, 0) , rgb(0, 255, 0) și rgb(0, 0, 255) . Adică, facem alternativ un canal cât mai saturat posibil, iar canalele rămase nu sunt folosite pentru sinteză, deoarece valoarea lor este zero.

Încercați să editați acest exemplu și să specificați propriile valori, de exemplu rgb(100, 100, 100) .

Setarea culorii folosind RGBA

CSS3 are un nou instrument pentru lucrul cu culoarea - formatul 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 primele trei canale RGB) și valorilor intermediare ​​cum ar fi 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) .

După valoare hexazecimală (cod HEX)

Î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ă sistemul zecimal are zece cifre: de la 0 la 9, iar numărul 10 este următoarea cifră, atunci sistemul numeric hexazecimal are 16 cifre, iar următoarea cifră este 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. Astfel, pentru a scrie numărul zecimal 255 în notație hexazecimală, utilizați notația 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. Semnificația acestei intrări este aceeași cu setarea culorii în format RGB (rgb(r, g, b)) - fiecare cifră hexazecimală din codul HEX indică saturația culorii în canalul său al modelului RGB.

#FF0000

#00FF00

#0000FF

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.

Setarea culorii folosind HSL

CSS3 are un nou format pentru specificarea culorilor.

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ă tragem 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.

Figura 2. Roata de culori HSL.

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 rostogolește î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%.

Setarea culorii folosind HSLA

Formatul HSLA este legat de HSL, la fel cum RGB este de RGBA. În formatul HSLA, ca și în RGBA, este 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.

• Internet
• Programe
• Instrucțiuni
• Browsere
• Windows 10
• Android
• iOS
• Conexiune

Ultimele note

Cum să eliminați aplicațiile de sistem (standard) din Android

Computerul nu vede discul SSD de ce Computerul nu vede discul SSD ce trebuie să facă

Căști Bluetooth fără fir

O lanternă aproape eternă care strălucește fără a folosi baterii O lanternă eternă fără baterii

Verificați setările serverului proxy 127

Popular

Instalarea firmware-ului oficial pe Samsung Galaxy A3

Cum să deschideți MMS pe telefon: sfaturi pentru configurarea MMS în Nokia Lumia 720, cum să deschideți

Alarmă simplă de întrerupere a curentului GSM

Știri

2024-03-01 02:12:33

Convertiți PDF în JPG

2024-03-01 02:12:33

De unde pot descărca imagini frumoase gratuite pentru blogul meu?

2024-03-01 02:12:33

Rămâneți întotdeauna anonim online

2024-02-29 02:08:31

Eliminarea completă a Internet Explorer

2024-02-29 02:08:31

Cum să reduceți fontul în contact