Culoare galben css. Setarea culorii textului în CSS. Modalități de a reprezenta culorile

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.

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.

Îmi exprim recunoștința indirectă către Google pentru idee și ofer ștafeta colegilor mei: este necesar să împărtășesc cu cititorii resurse străine despre dezvoltarea web din feedul meu RSS, care scriu într-un mod substanțial și interesant despre această problemă. Pentru a reduce vorbirea inactivă, trebuie să urmați o serie de prevederi simple:

1. Pe blogul dvs., publicați o traducere (puteți în mod liber, cu comentarii și completări) a unui articol din resursa prezentată.
2. Traducerile, ca și sursele lor, nu trebuie repetate pentru a asigura acoperirea și diversitatea informațiilor.
3. Este important să menționăm bloggerul de la care a fost primită vestea bună și, dacă este posibil, să dai ștafeta mai departe.
4. Timpul releului nu este setat; Cu siguranță va fi cineva care va opri această bacanală.

Sursa inițială a acestei postări a fost una dintre postările lui Drew McLellan pe blogul calendarului colectiv 24ways. Merge!

Ce este culoarea RGBA?

Nu voi dezvălui un secret dacă spun că nuanța de culoare necesară este creată în CSS amestecând roșu, verde și albastru în proporțiile necesare. Există, totuși, o nuanță - indiferent de culoarea pe care o alegem, aceasta va fi întotdeauna solidă și opaca.

CSS3 oferă câteva moduri noi de a specifica culoarea, dintre care una este utilizarea modelului de culoare RGBA. „A” din acronim înseamnă „Alpha”; valoarea sa este responsabilă pentru transparența culorii. Folosind acest model, putem stabili nu numai combinația necesară de roșu, verde și albastru, ci și să stabilim cât de mult „strălucește” culoarea. Ceva similar poate fi observat atunci când lucrați cu straturi în Photoshop.

Atunci pentru ce este proprietatea opacității?

Ideea este că definiția transparenței pentru o culoare este diferită de setarea transparenței pentru un element, setată folosind proprietatea CSS opacitate. Să ne uităm la un exemplu.

Avem un antet h1 cu culori specifice pentru text și fundal, situat pe o pagină cu o imagine de fundal.

H1 (culoare: rgb(0, 0, 0); culoare de fundal: rgb(255, 255, 255); )

Prin setarea proprietății de opacitate, puteți aplica transparență întregului element:

H1 (culoare: rgb(0, 0, 0); culoare de fundal: rgb(255, 255, 255); opacitate: 0,5; )

Modelul RGBA ne oferă o oportunitate mai flexibilă - de a controla doar transparența culorii, și nu întregul element. De exemplu, puteți seta transparența doar pentru culoarea de fundal:

H1 (culoare: rgb(0, 0, 0); culoare de fundal: rgba(255, 255, 255, 0,5); )

Sau lăsați fundalul neschimbat și atribuiți transparență doar textului:

H1 (culoare: rgba(0, 0, 0, 0,5); culoare de fundal: rgb(255, 255, 255); )

Este probabil mai puțin obișnuit să folosiți sintaxa rgb() pentru a specifica o culoare decât notația hexazecimală (cum ar fi #fff), dar în acest caz este o necesitate absolută, deoarece este imposibil să scrieți o valoare RGBA în notație hexazecimală. Prin urmare, setăm rgba() exact așa:

Culoare: rgba(255, 255, 255, 0,5);

La fel ca în rgb(), primele trei valori sunt responsabile pentru combinația de roșu, verde și albastru. Ele pot lua atât valori întregi în intervalul 0-255, cât și procente în intervalul 0 la 100%. A patra valoare determină gradul de transparență, variind de la 0 (complet transparent) la 1 (complet opac).

Puteți utiliza această metodă în siguranță oriunde setați în mod normal culorile în CSS: culori de fundal și text, chenare, contururi etc.

Suport pentru browser

Majoritatea browserelor moderne (Firefox, Safari, Opera, Google Chrome) acceptă culorile RGBA, dar nu și Internet Explorer.

Nu mai rămâne nimic de făcut decât să specificați culori RGBA pentru browserele care le acceptă și să veniți cu propriile „cârje” pentru restul.

Analiza CSS funcționează în browsere în așa fel încât, dacă se întâlnește vreo valoare necunoscută la analizarea regulilor, aceasta va fi ignorată. Să folosim aceste cunoștințe pentru a reda o culoare opacă normală pentru browserele „neînțelegătoare”. Pentru a face acest lucru, este suficient să indicați culoarea în format ca prim anunț. RGB, iar al doilea setează nuanța de culoare în format RGBA— pentru browserele care acceptă acest model de culoare.

H1 (culoare: rgb(127, 127, 127); culoare: rgba(0, 0, 0, 0,5); )

În cazurile în care doriți să aplicați transparență proprietății de culoare de fundal, puteți recurge la utilizarea unei imagini PNG cu un canal alfa pentru a obține exact același efect. Desigur, aceasta este o metodă mai scumpă, spre deosebire de CSS „pur”, deoarece va trebui să vă creați propriul PNG pentru fiecare nivel de transparență, dar fără pește, fără pește.

Folosim același principiu ca în exemplul anterior: mai întâi setăm fundalul pentru toate browserele, iar apoi rescriem linia ținând cont de RGBA.

H1 ( fundal: URL transparent(black50.png); fundal: rgba(0, 0, 0, 0.5) niciunul; )

Trebuie remarcat faptul că acest design funcționează deoarece folosim o formă scurtă de fundal care ne permite să setăm atât culoarea de fundal, cât și imaginea de fundal în același timp. Browserele care întâlnesc o valoare rgba() necunoscută vor ignora în întregime a doua linie și vor procesa prima declarație.

Altceva

Principalul avantaj al RGBA este capacitatea de a crea diverse soluții de proiectare fără a utiliza desene. Beneficiul aici nu este doar paginile mai ușoare (și, prin urmare, mai rapide), ci și economia de timp: site-urile care folosesc tehnologia menționată sunt mai ușor de creat și întreținut. Sub influența Javascript sau ca răspuns la acțiunile utilizatorului, valorile în CSS se pot schimba cu ușurință. În cazul nostru, desenele pot îngreuna astfel de transformări.

Div (culoare: rgba(255, 255, 255, 0,8); culoare de fundal: rgba(142, 213, 87, 0,3); ) div:hover (culoare: rgba(255, 255, 255, 1); fundal- culoare: rgba(142, 213, 87, 0,6); )

Folosirea judicioasă a transparenței pentru culorile chenarului va ajuta unele elemente de pe pagină să pară mai organice:

Div (culoare: rgb(0, 0, 0); culoare de fundal: rgb(255, 255, 255); chenar: 10px rgba solid (255, 255, 255, 0,3); )

In cele din urma

Așa cum este adesea cazul, inovațiile de ultimă oră CSS sunt susținute de browsere de vârf. Să sperăm că băieții de la Redmond își dau seama de ceva în viață și se alătură majorității.

Monitoarele de computer, precum și ecranele telefoanelor mobile, smartphone-urilor și tabletelor, sunt formate din mii de pătrate mici numite pixeli (dacă te uiți atent la monitor, le poți vedea). Când ecranul este oprit, este negru pentru că nu emite lumină; când este pornit, fiecare pixel capătă o culoare diferită, ceea ce creează imaginea pe care o vedem când ne uităm la ecran.

Când setăm o culoare pentru cadrul unui element, fundal sau text, setăm culoarea special pentru pixelii din care sunt compuși. Există două abordări generale pentru specificarea culorilor în CSS: după nume sau după valoare. Cel mai simplu este să specificați un nume: roșu este roșu, albastru este albastru și așa mai departe, dar CSS nu oferă multe nume de culori din care să alegeți. Pe de altă parte, specificarea unei valori de culoare implică o selecție mult mai mare de nuanțe. Există mai multe moduri de a specifica o valoare a culorii, cele două cele mai comune fiind valorile RGB și hexazecimale. Au făcut parte din CSS încă de la prima versiune și fiecare browser web le acceptă. CSS3 a introdus mai multe opțiuni pentru definirea culorii: RGBA, HSL și HSLA, acestea sunt mai puțin cross-browser, dar cele mai recente versiuni de browsere le acceptă deja.

Nume de flori

Cel mai simplu și mai evident mod de a specifica o culoare în CSS este de a selecta un nume de culoare predefinit dintr-un set de cuvinte cheie. Sunt disponibile un total de 147 de cuvinte cheie cu nume de culori: 17 nume sunt culori standard care au fost introduse în versiunile timpurii ale HTML (alb, negru, roșu, galben, albastru, verde, portocaliu, violet, gri, argintiu, aqua, fucsia, lime). , maro, bleumarin, măsline și teal), și 130 de altele care au fost adăugate la CSS2. Puteți vedea întreaga listă de nume de culori disponibile în secțiunea HTML a tabelului nostru de culori.

RGB și RGBA

Sistemul RGB folosește trei numere care descriu cantitățile relative de roșu, verde și albastru care sunt amestecate împreună pentru a produce orice nuanță. Numerele pot varia de la 0 la 255. Luați în considerare codul RGB pentru culoarea violet închis: rgb(204, 51, 255), de exemplu, poate fi aplicat unei proprietăți CSS responsabilă pentru culoarea fontului:

Culoare: rgb(205, 51, 255);

Sistemul RGBA adaugă un alt număr care descrie transparența culorii, valoarea putând varia de la 0 (complet transparent) la 1 (complet opac). O valoare de 0,5 face culoarea semitransparentă, luați în considerare o versiune semitransparentă de violet închis, definită folosind sistemul RGBA:

Culoare: rgba(204, 51, 255, 0,5);

Puteți vedea că valorile culorilor roșu, verde și albastru sunt similare cu sistemul RGB. Al patrulea număr - 0,5 este gradul de transparență. „A” din RGBA înseamnă canal alfa, care este un termen de design grafic care înseamnă transparență.

Culorile RGBA sunt utile pentru a crea elemente translucide care fac vizibile elementele de sub ele.

HSL și HSLA

Sistemul HSL (nuanță, saturație, luminozitate) descrie culorile bazate pe nuanță, saturație și luminozitate. Iată aceeași culoare violet închis specificată în format HSL:

Culoare: hsl(285, 100%, 60%);

Primul număr este nuanța, exprimată în grade de la 0 la 360, care determină poziția culorii pe roata de culori. Al doilea număr, saturația, definit ca un procent de la 0% la 100%, indică cât de saturată (luminoasă) va fi culoarea. Al treilea număr este luminozitatea, este definit ca un procent la fel ca saturația, luminozitatea indică cât de deschisă sau închisă va fi culoarea.

Sistemul HSLA, ca și RGBA, adaugă un al patrulea număr de la 0 la 1 care determină cât de transparentă ar trebui să fie culoarea. O valoare de 0,5 face culoarea semitransparentă, luați în considerare versiunea semitransparentă de violet închis, definită folosind sistemul HSLA:

Culoare: hsla(285, 100%, 60%, 0,5);

Valori de culoare hexazecimale

Codul de culoare hexazecimal este format din șase caractere care urmează simbolului #:

Fiecare set de două caractere reprezintă un număr de la 0 la 255. Deci primele două caractere reprezintă culoarea roșie, următoarele două reprezintă verde, iar ultimele două reprezintă albastru. În acest fel, codul hexazecimal este foarte asemănător cu RGB, cu diferența că aici fiecare culoare este specificată în sistem numeric hexazecimal în loc de zecimal.

Dacă fiecare pereche de cifre constă din aceleași simboluri, atunci valoarea culorii poate fi scurtată. Cu toate acestea, dacă codul hexazecimal arată astfel, de exemplu, #bbff10, atunci o astfel de intrare nu poate fi scurtată.

Culoare: #f00; culoare: #ff0000;

Notă: Browserele care nu acceptă aceste valori de culoare (rgba, hsl și hsla) nu asociază nicio culoare cu fundalul sau fontul, ignorând în totalitate declarația. În acest caz, fundalul elementului folosește valoarea implicită (devine complet transparent), iar textul folosește fie valoarea implicită (culoarea neagră), fie o culoare moștenită de la elementul părinte.

Pentru versiunile mai vechi de browsere, ar trebui să adăugați o regulă suplimentară care definește culoarea în format RGB, valoare hexazecimală sau după nume. Această regulă trebuie să apară înaintea unei reguli care specifică o culoare în format RGBA, HSL sau HSLA. Acest lucru va oferi o plasă de siguranță pentru culoare, deoarece în CSS, dacă există două reguli care stabilesc o valoare pentru aceeași proprietate, regula stabilită mai jos în cod are întotdeauna prioritate. Aceasta înseamnă că dacă browserul acceptă formatele RGBA, HSL sau HSLA, atunci va folosi a doua regulă, iar dacă nu o face, o va folosi pe prima.

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.

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