Culori HTML RGB și RGBA
O valoare de culoare RGB amestecă surse de lumină roșie, verde și albastră. O valoare de culoare RGBA extinde RGB cu un canal Alpha, care setează opacitatea (cât de transparentă este culoarea).
Valori de Culoare RGB
O culoare RGB se scrie ca rgb(roșu, verde, albastru). Fiecare valoare setează intensitatea acelei lumini de la 0 la 255, oferind 256 x 256 x 256 = 16.777.216 de culori posibile.
De exemplu, rgb(255, 0, 0) este roșu, deoarece roșul este la maximum (255), iar celelalte sunt 0. rgb(0, 255, 0) este verde din același motiv. Setează toate cele trei la 0 pentru negru și toate la 255 pentru alb.
Exemplu
Șase culori setate cu valori RGB.
Output: pagină HTML completă
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Culori Rgb</title>
</head>
<body>
<h1 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h1>
<h1 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h1>
<h1 style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</h1>
<h1 style="background-color:rgb(238, 130, 238);">rgb(238, 130, 238)</h1>
<h1 style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</h1>
<h1 style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</h1>
</body>
</html>
Nuanțe de Gri
Nuanțele de gri se obțin folosind aceeași valoare pentru toți cei trei parametri.
Exemplu
Șase nuanțe de gri create cu valori RGB egale.
Output: pagină HTML completă
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nuanțe de Gri</title>
</head>
<body>
<h1 style="background-color:rgb(60, 60, 60);">rgb(60, 60, 60)</h1>
<h1 style="background-color:rgb(100, 100, 100);">rgb(100, 100, 100)</h1>
<h1 style="background-color:rgb(140, 140, 140);">rgb(140, 140, 140)</h1>
<h1 style="background-color:rgb(180, 180, 180);">rgb(180, 180, 180)</h1>
<h1 style="background-color:rgb(200, 200, 200);">rgb(200, 200, 200)</h1>
<h1 style="background-color:rgb(240, 240, 240);">rgb(240, 240, 240)</h1>
</body>
</html>
Valori de Culoare RGBA
RGBA extinde RGB cu un canal Alpha care setează opacitatea. Se scrie ca rgba(roșu, verde, albastru, alpha), unde alpha este un număr de la 0.0 (complet transparent) la 1.0 (complet opac).
Exemplu
O culoare afișată la șase niveluri de opacitate cu RGBA.
Output: pagină HTML completă
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Culori Rgba</title>
</head>
<body>
<h1 style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.6);">rgba(255, 99, 71, 0.6)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</h1>
<h1 style="background-color:rgba(255, 99, 71, 1);">rgba(255, 99, 71, 1)</h1>
</body>
</html>