Culori HTML
Culorile HTML pot fi setate cu nume de culori predefinite, sau cu valori RGB, HEX, HSL, RGBA sau HSLA.
Nume de Culori
O culoare poate fi setată folosind un nume de culoare. HTML suportă 140 de nume standard de culori.
Exemplu
Mai multe culori afișate după nume.
Prompt
O pagină care afișează mai multe nume de culori CSS ca blocuri colorate: Tomato, Orange, DodgerBlue, MediumSeaGreen, Gray, SlateBlue, Violet și LightGray, fiecare bloc umplut cu propria culoare.
Output: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nume de Culori</title>
</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
Poți seta culoarea de fundal a elementelor HTML cu proprietatea background-color.
Exemplu
Un titlu și un paragraf cu fundaluri colorate.
Prompt
O pagină care setează culoarea de fundal folosind nume de culori: un h1 cu fundal DodgerBlue afișând "Salut Lume" și un paragraf cu fundal Tomato de text lorem ipsum.
Output: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Culoare Fundal</title>
</head>
<body>
<h1 style="background-color:DodgerBlue;">Salut Lume</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
Poți seta culoarea textului cu proprietatea color.
Exemplu
Un titlu și paragrafe în culori diferite de text.
Prompt
O pagină care setează culoarea textului folosind nume de culori: un h1 Tomato "Salut Lume" și două paragrafe de lorem ipsum colorate DodgerBlue și MediumSeaGreen.
Output: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Culoare Text</title>
</head>
<body>
<h1 style="color:Tomato;">Salut Lume</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
Poți seta culoarea bordurilor cu proprietatea border.
Exemplu
Titluri cu borduri în culori diferite.
Prompt
O pagină care setează culoarea bordurii folosind nume de culori: trei titluri h1, fiecare afișând "Salut Lume" cu o bordură solidă de 2px în Tomato, DodgerBlue și Violet.
Output: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Culoare Bordură</title>
</head>
<body>
<h1 style="border:2px solid Tomato;">Salut Lume</h1>
<h1 style="border:2px solid DodgerBlue;">Salut Lume</h1>
<h1 style="border:2px solid Violet;">Salut Lume</h1>
</body>
</html>
Valori de Culoare
Culorile pot fi setate și cu valori RGB, HEX, HSL, RGBA și HSLA. RGB, HEX și HSL descriu toate aceeași culoare în moduri diferite. RGBA și HSLA adaugă un canal Alpha, care setează transparența (de exemplu, 50% transparent).
Exemplu
Aceeași culoare setată cu RGB, HEX, HSL, și formele transparente RGBA și HSLA.
Prompt
O pagină care afișează același set de culori ca fundal folosind formate de valori diferite: RGB rgb(255, 99, 71), HEX #ff6347, HSL hsl(9, 100%, 64%), plus versiunile RGBA și HSLA cu 50% transparență.
Output: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Valori de Culoare</title>
</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.