Ett RGB-färgvärde representerar RÖTT, GRÖNT och BLÅTT ljus källor.
I CSS kan en färg anges som ett RGB-värde med hjälp av denna formel:
rgb(röd, grön, blå)
Varje parameter (röd, grön och blå) definierar färgens intensitet mellan 0 och 255.
Till exempel, rgb(255, 0, 0) visas som rött, eftersom rött är inställt på sitt högsta värde (255) och de andra är det satt till 0.
För att visa svart, ställ in alla färgparametrar till 0, så här: rgb(0, 0, 0).
För att visa vit, ställ in alla färgparametrar till 255, som detta: rgb(255, 255, 255).
Experimentera genom att blanda RGB-värdena nedan:
RED
GREEN
BLUE
Prova själv →
<!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>
Nyanser av grått definieras ofta med lika värden för alla de tre ljuskällorna:
Prova själv →
<!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-färgvärden är en förlängning av RGB-färgvärden med en alfakanal - som anger opaciteten för en färg.
Ett RGBA-färgvärde är specificeras med:
rgba(röd, grön, blå, alfa)
Alfaparametern är ett tal mellan 0,0 (helt transparent) och 1,0 (inte alls transparent):
Experimentera genom att blanda RGBA-värdena nedan:
RED
GREEN
BLUE
ALPHA
Prova själv →
<!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>