Valoarea RGB
O valoare de culoare RGB stabilește cantitatea de lumină roșie, verde și albastră.
În CSS se scrie ca rgb(red, green, blue). Fiecare valoare merge de la 0 la 255 și stabilește cât de puternică este acea culoare.
De exemplu, rgb(255, 0, 0) este roșu, deoarece roșul este la maximum (255), iar celelalte sunt 0. Setați toate trei la 0 pentru negru (rgb(0, 0, 0)) și toate la 255 pentru alb (rgb(255, 255, 255)).
Culori RGB
Șase culori scrise ca valori rgb().
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, 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 dând valori egale pentru roșu, verde și albastru.
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(60, 60, 60);">rgb(60, 60, 60)</h1>
<h1 style="background-color:rgb(90, 90, 90);">rgb(90, 90, 90)</h1>
<h1 style="background-color:rgb(120, 120, 120);">rgb(120, 120, 120)</h1>
<h1 style="background-color:rgb(180, 180, 180);">rgb(180, 180, 180)</h1>
<h1 style="background-color:rgb(210, 210, 210);">rgb(210, 210, 210)</h1>
<h1 style="background-color:rgb(240, 240, 240);">rgb(240, 240, 240)</h1>
</body>
</html>
Valoarea RGBA
RGBA adaugă un canal alfa la RGB, care stabilește opacitatea culorii.
Se scrie ca rgba(red, green, blue, alpha). Alfa este un număr de la 0.0 (complet transparent) la 1.0 (complet opac).
Transparență RGBA
Aceeași culoare la valori alfa crescânde, de la complet transparent la complet opac.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</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>