En RGB-farveværdi repræsenterer RØDT, GRØNT og BLÅT lys kilder.
I CSS kan en farve angives som en RGB-værdi ved hjælp af denne formel:
rgb(rød, grøn, blå)
Hver parameter (rød, grøn og blå) definerer intensiteten af farven mellem 0 og 255.
For eksempel vises rgb(255, 0, 0) som rødt, fordi rød er indstillet til sin højeste værdi (255), og de andre er sat til 0.
For at vise sort skal du indstille alle farveparametre til 0, sådan her: rgb(0, 0, 0).
For at vise hvid skal du indstille alle farveparametre til 255, f.eks dette: rgb(255, 255, 255).
Eksperimenter ved at blande RGB-værdierne nedenfor:
RED
GREEN
BLUE
Prøv det selv →
<!DOCTYPE html>
<html>
<body>
<h1>Specify colors using RGB values</h1>
<h2 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h2>
<h2 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h2>
<h2 style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</h2>
<h2 style="background-color:rgb(238, 130, 238);">rgb(238, 130, 238)</h2>
<h2 style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</h2>
<h2 style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</h2>
</body>
</html>
Nuancer af grå er ofte defineret ved hjælp af lige værdier for alle de 3 lyskilder:
Prøv det selv →
<!DOCTYPE html>
<html>
<body>
<h1>Shades of gray</h1>
<p>By using equal values for red, green, and blue, you will get different shades of gray:</p>
<h2 style="background-color:rgb(60, 60, 60);">rgb(60, 60, 60)</h2>
<h2 style="background-color:rgb(90, 90, 90);">rgb(90, 90, 90)</h2>
<h2 style="background-color:rgb(120, 120, 120);">rgb(120, 120, 120)</h2>
<h2 style="background-color:rgb(180, 180, 180);">rgb(180, 180, 180)</h2>
<h2 style="background-color:rgb(210, 210, 210);">rgb(210, 210, 210)</h2>
<h2 style="background-color:rgb(240, 240, 240);">rgb(240, 240, 240)</h2>
</body>
</html>
RGBA-farveværdier er en udvidelse af RGB-farveværdier med en alfakanal - som angiver opaciteten for en farve.
En RGBA-farveværdi er specificeret med:
rgba(rød, grøn, blå, alfa)
Alfa-parameteren er et tal mellem 0,0 (fuldt gennemsigtig) og 1,0 (slet ikke gennemsigtig):
Eksperimenter ved at blande RGBA-værdierne nedenfor:
RED
GREEN
BLUE
ALPHA
Prøv det selv →
<!DOCTYPE html>
<html>
<body>
<h1>Make transparent colors with RGBA</h1>
<h2 style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</h2>
<h2 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h2>
<h2 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</h2>
<h2 style="background-color:rgba(255, 99, 71, 0.6);">rgba(255, 99, 71, 0.6)</h2>
<h2 style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</h2>
<h2 style="background-color:rgba(255, 99, 71, 1);">rgba(255, 99, 71, 1)</h2>
</body>
</html>