RGB Value
An RGB color value sets the amount of red, green, and blue light.
In CSS you write it as rgb(red, green, blue). Each value goes from 0 to 255 and sets how strong that color is.
For example, rgb(255, 0, 0) is red, because red is at its highest (255) and the others are 0. Set all three to 0 for black (rgb(0, 0, 0)) and all to 255 for white (rgb(255, 255, 255)).
RGB colors
Six colors written as rgb() values.
Prompt
An HTML page showing several colors written as rgb() values.
Make six headings with background colors: rgb(255, 0, 0), rgb(0, 0, 255), rgb(60, 179, 113), rgb(238, 130, 238), rgb(255, 165, 0), and rgb(106, 90, 205). Label each with its value.
Output: complete HTML page
index.html
<!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>
Shades of gray
Shades of gray are made by giving red, green, and blue the same value.
Prompt
An HTML page showing shades of gray made with equal RGB values.
Make six headings with background colors where red, green, and blue are equal: rgb(60, 60, 60), rgb(90, 90, 90), rgb(120, 120, 120), rgb(180, 180, 180), rgb(210, 210, 210), and rgb(240, 240, 240). Label each.
Output: complete HTML page
index.html
<!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>
RGBA Value
RGBA adds an alpha channel to RGB, which sets the opacity of the color.
You write it as rgba(red, green, blue, alpha). The alpha is a number from 0.0 (fully transparent) to 1.0 (fully solid).
RGBA transparency
The same color at increasing alpha values, from fully transparent to fully solid.
Prompt
An HTML page showing the same RGB color at different alpha (opacity) levels using rgba().
Make six headings with background color rgba(255, 99, 71, A) where A goes 0, 0.2, 0.4, 0.6, 0.8, and 1. Label each with its value so the increasing opacity is clear.
Output: complete HTML page
index.html
<!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>