Culori CSS
În CSS, poți seta o culoare folosind un nume de culoare predefinit, sau cu o valoare RGB, HEX, HSL, RGBA sau HSLA.
Nume de Culori CSS
O culoare poate fi setată folosind unul dintre numele de culori predefinite.
CSS și HTML acceptă 140 de nume de culori standard.
Exemplu
Fiecare cutie folosește o culoare numită diferită ca fundal.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1>
</body>
</html>
Culoarea de Fundal CSS
Poți seta culoarea de fundal a elementelor HTML.
Exemplu
Titlul și paragraful folosesc culori numite pentru fundalurile lor.
<h1> un fundal DodgerBlue și unui <p> un fundal Tomato, folosind stiluri inline cu culori numite.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</body>
</html>
Culoarea Textului CSS
Poți seta culoarea textului.
Exemplu
Titlul și paragrafele folosesc fiecare o culoare de text numită.
<h1> Tomato, un <p> DodgerBlue și un alt <p> MediumSeaGreen, folosind stiluri inline cu culori numite.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p style="color:MediumSeaGreen;">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</body>
</html>
Culoarea Bordurii CSS
Poți seta culoarea bordurilor.
Exemplu
Fiecare titlu are o bordură solidă cu o culoare numită diferită.
<h1> o bordură solidă de 2px în Tomato, DodgerBlue și Violet, folosind stiluri inline.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
</body>
</html>
Valori de Culoare CSS
Culorile pot fi setate și folosind valori RGB, HEX, HSL, RGBA și HSLA.
De exemplu, acestea toate dau aceeași culoare ca numele Tomato: rgb(255, 99, 71), #ff6347, și hsl(9, 100%, 64%). Versiunile RGBA și HSLA adaugă transparență.
Exemplu
Aceeași culoare este scrisă în mai multe formate de valori, ultimele două cu 50% transparență.
<h1> cu culori de fundal scrise ca: rgb(255, 99, 71), #ff6347, hsl(9, 100%, 64%) (toate același "Tomato"), apoi rgba(255, 99, 71, 0.5) și hsla(9, 100%, 64%, 0.5) (aceeași culoare la 50% transparență). Folosește stiluri inline.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1 style="background-color:rgb(255, 99, 71);">rgb(255, 99, 71)</h1>
<h1 style="background-color:#ff6347;">#ff6347</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">hsl(9, 100%, 64%)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">rgba(255, 99, 71, 0.5)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">hsla(9, 100%, 64%, 0.5)</h1>
</body>
</html>
Află mai multe despre Valorile de Culoare
Vei afla mai multe despre RGB, HEX și HSL în capitolele următoare.