4 moduri de a defini culorile în CSS

Recomandări cheie

• Utilizarea numelor de culori: CSS oferă 145 de nume de culori pentru o selecție de culori ușoară și prietenoasă pentru începători, dar opțiunile sunt limitate și este posibil să nu răspundă nevoilor precise de design.
• Coduri de culoare hexazecimale: codurile hexadecimale oferă o gamă largă de opțiuni de culoare și personalizare precisă, deși pot fi mai puțin intuitiv de utilizat și reținut.
• Valori de culoare RGB și RGBA: RGB permite un control precis al culorilor cu valori numerice, în timp ce RGBA adaugă transparență. Asigurarea unor combinații de culori accesibile este importantă.

Culorile sunt printre cele mai frecvent utilizate atribute CSS, jucând un rol vital în modelarea identității vizuale, a dispoziției și a experienței utilizatorului unui site web. CSS oferă o gamă largă de opțiuni pentru utilizarea culorii, fiecare adaptată nevoilor și preferințelor specifice de design.

Deși este ușor să treceți cu vederea importanța definirii culorilor, alegerile dvs. pot afecta în mod semnificativ aspectul și aspectul site-ului dvs. web. Explorarea diferențelor dintre diferitele metode și modul în care le aplicați și combinați practic vă va îmbunătăți capacitatea de a crea site-uri web atractive din punct de vedere vizual.

1. Utilizarea numelor de culori

CSS oferă o modalitate utilă de a defini culorile folosind nume și sunt disponibile 145 de opțiuni. Aceste nume de culori variază de la simplu „roșu”, „verde” și „albastru” până la nuanțe mai specifice, cum ar fi „coral” sau „levănțică”.

Utilizarea culorilor numite este simplă: selectați un nume de culoare precum „roșu” și îl utilizați într-o proprietate CSS care acceptă valorile culorii. Astfel de proprietățile includ cele evidente culoare și culoare de fundal, dar de asemenea chenar-culoare, culoare-contur, și text-umbră, printre alții.

Numele culorilor sunt utile atunci când aveți nevoie de o culoare temporară pentru prototipare sau doriți să păstrați codul ușor de citit. Iată sintaxa:

color_property: color_name;

În acest caz, pur și simplu înlocuiți culoare_nume cu culoarea specifică pe care doriți să o utilizați. De exemplu, dacă doriți să setați textul culoare a unui paragraf la roșu, scrie:

p {
color: red;
}

Acest lucru va da paragrafelor tale o culoare roșie a textului:

Pro: sunt ușor de citit și de înțeles în codul dvs. CSS. Sunt prietenoase pentru începători, funcționează bine în toate browserele și sunt la îndemână pentru idei de design rapide.

Contra: Au opțiuni limitate și este posibil să nu ofere nuanțele precise de care aveți nevoie, limitând creativitatea de design. În plus, este posibil ca acestea să nu îndeplinească întotdeauna cerințe stricte de accesibilitate, iar suportul în sistemele mai vechi poate varia.

2. Coduri de culoare hexazecimale

Codurile de culoare hexazecimale, adesea denumite „coduri hexadecimale”, sunt cele mai comune metode de specificare a culorilor în designul web. Aceste coduri constau din combinații de șase caractere de numere și litere (0-9, A-F), reprezentând amestecul de componente roșii, verzi și albastre (RGB) într-o culoare.

Deși sunt ușor de utilizat, înțelegerea modului în care funcționează poate fi o provocare. Poți să iei o scufundare profundă în codurile hexadecimale pentru a înțelege mai bine. Iată un exemplu de bază despre cum ați putea folosi coduri hexadecimale în CSS:

color: #RRGGBB;

În acest format, RR, GG și BB reprezintă componentele roșie, verde și, respectiv, albastră. Fiecare componentă poate varia de la 00 (fără intensitate) la FF (intensitate maximă). De exemplu, dacă doriți să setați culoarea de fundal a antetului unui site web la o anumită nuanță de albastru, puteți utiliza un cod hexadecimal ca acesta:

header {
background-color: #336699;
}

Aceasta va produce o culoare albastru intens:

​​​​​

Puteți folosi, de asemenea, o scurtătură dacă fiecare dintre cele trei componente repetă același caracter de două ori. Puteți scrie exemplul de mai sus ca:

header {
background-color: #369;
}

Pro: Codurile de culoare hexazecimale oferă o gamă largă de opțiuni de culoare, permițându-vă să generați nuanțe detaliate și personalizate. Ele oferă control fără probleme asupra alegerilor de culoare, făcându-le ideale pentru cerințele complexe de design.

Contra: Deși codurile hexadecimale sunt puternice, ele pot fi mai puțin intuitive decât culorile numite. De asemenea, puteți întâmpina provocarea de a vă aminti anumite valori de culoare. Din fericire, instrumente pentru găsirea codurilor hexadecimale de culori întâlniți sunt disponibile, făcând procesul mai ușor de gestionat.

3. Valori de culoare RGB și RGBA

La fel ca codurile hexazecimale, acest format vă permite să specificați culorile după componentele lor roșii, verzi și albastre. De data aceasta, însă, puteți folosi numere întregi mai prietenoase.

Valori de culoare RGB

Valorile de culoare RGB sunt a doua cea mai frecvent utilizată metodă pentru definirea culorilor în CSS. „RGB” reprezintă roșu, verde și albastru, exprimat ca o funcție CSS, după care urmează paranteze. În paranteze, atribuiți valori fiecărui canal de culoare, variind de la 0 la 255. Acest lucru vă permite să controlați intensitatea roșu, verde și albastru în culoarea pe care doriți să o utilizați.

Iată sintaxa:

rgb(red_value, green_value, blue_value);

A inlocui valoare_roșie, valoare_verde, și valoare_albastru cu valorile lor numerice respective. De exemplu, puteți obține culori alb, negru și roșu, precum cele prezentate în această imagine:

Când setați toate cele trei canale de culoare (roșu, verde și albastru) la valoarea lor maximă de 255, rezultă cea mai mare intensitate pentru fiecare canal, creând culoarea albă:

.white-box {
 color: rgb(255, 255, 255);
}

Când setați toate cele trei canale de culoare la valoarea lor minimă de 0, aceasta reprezintă absența culorii în fiecare canal, rezultând negru.

.black-box {
color: rgb(0, 0, 0);
}

Setarea canalului roșu la valoarea sa maximă de 255, menținând celelalte canale la valoarea minimă de 0, produce culoarea roșie:

.red-box {
color: rgb(255, 0, 0); 
}

Valori de culoare RGBA

RGBA funcționează la fel ca RGB, singura diferență fiind includerea unei valori alfa. „A” din RGBA înseamnă alfa, care determină nivelul de transparență sau opacitate pentru culoarea aleasă. O valoare de 0 reprezintă o transparență completă, făcând culoarea complet invizibilă, în timp ce o valoare de 1 reprezintă opacitatea completă, făcând culoarea complet vizibilă.

RGBA este util mai ales atunci când doriți să creați elemente cu diferite niveluri de transparență, cum ar fi fundaluri translucide sau text decolorat. Sintaxa completă este:

color: rgba(red_value, green_value, blue_value, alpha_value);

Aici, valoare_roșie, valoare_verde, și valoare_albastru reprezintă canalele de culoare ca în RGB și valoare_alfa precizează nivelul de transparență.

div {
background-color: rgba(0, 128, 0, 0.5);
}

În acest exemplu, valoarea alfa de 0,5 atribuie 50% transparență culorii verde, permițând conținutului de sub ea să se arate prin:

Pro: RGB și RGBA vă permit să controlați culorile cu precizie, făcând mai ușor să alegeți nuanțe precise și să creați modele atractive din punct de vedere vizual. Sunt compatibile cu diverse browsere web, asigurându-se că culorile alese de dvs. arată consistente.

Contra: Provocarea constă în asigurarea unor combinații de culori accesibile. Este esențial să acordați atenție raporturilor de contrast, în principal atunci când lucrați cu transparență în RGBA. Orientările WCAG vă pot ajuta vă asigurați că designul dvs. este accesibil.

4. Valori de culoare HSL și HSLA

HSL – prescurtare pentru Hue, Saturation și Lightness – este o altă funcție CSS care definește culorile. La fel ca RGB, HSL folosește valori numerice pentru a reprezenta culorile, dar o face diferit. S-ar putea să fii familiarizat cu Valorile HSL din componentele UI din aplicațiile de proiectare şi în altă parte.

Nuanţă: Aceasta reprezintă culoarea însăși folosind grade pe o roată de culori, variind de la 0 la 360. Imaginați-vă că selectați un punct pe un cerc, unde fiecare grad corespunde unei culori diferite. De exemplu, 0 și 360 de grade pentru roșu, 120 de grade pentru verde și 240 de grade pentru albastru.

Saturare: Saturația determină intensitatea sau intensitatea culorii. Definește relația culorii cu gri, 0% fiind complet în tonuri de gri (desaturat) și 100% fiind complet saturat (vibrant și pur).

Lejeritate: Luminozitatea reprezintă cât de strălucitoare sau întunecată apare culoarea. Este legat de poziția culorii pe spectrul dintre negru (0%) și alb (100%). O valoare de 50% reprezintă culoarea normală, în timp ce valorile sub 50% întunecă culoarea, iar valorile peste 50% o deschid.

Pe lângă HSL, există HSLA, unde „A” înseamnă „alfa”. Acesta este similar cu „A” din RGBA și înseamnă transparență.

Iată sintaxa:

color: hsl(hue_value, saturation_percentage, lightness_percentage);

Folosind această sintaxă, înlocuiți hue_value, procentaj_saturație, și luminozitate_procent cu valorile specifice dorite pentru fiecare componentă. De exemplu:

div {
background-color: hsl(120, 100%, 50%);
}

În acest exemplu, culoarea de fundal a lui a div elementul este setat la un verde vibrant folosind valorile HSL. 120 reprezintă nuanța (verde), 100% este pentru saturație completă, iar 50% setează luminozitatea la un nivel echilibrat.

Pro: HSL și HSLA oferă calcule versatile de culoare folosind proprietăți personalizate CSS. Sunt foarte compatibile cu browserele moderne și permit ajustări ușoare ale luminozității culorilor.

Contra: Învățarea HSL implică înțelegerea științei culorilor, cum ar fi nuanțe și saturații, care pot fi mai provocatoare decât culorile RGB familiare.

Îmbrățișând puterea culorilor CSS

Există mai multe metode pe care le puteți verifica și în timp ce explorați diferitele formate pentru definirea culorilor în CSS, rețineți că aveți puterea de a modela aspectul, starea de spirit și experiența utilizatorului site-ului dvs.

Alegerea dvs. de format de culoare — fie că este vorba despre nume simple de culori, coduri hexazecimale, RGB sau HSL — poate afecta modul în care publicul dvs. vă percepe site-ul. Deci, experimentați, învățați și găsiți definițiile de culoare care se potrivesc cel mai bine obiectivelor dvs. de design.