The CSS rgb() function specifies a color by combining red, green, and blue light. Each channel ranges from 0 to 255, producing 16,777,216 possible colors. section 7.1.1
Use channel values to control the visual result:
- rgb(0, 0, 0) produces black; rgb(255, 255, 255) produces white. section 7.1.1
- Equal red, green, and blue values produce grayscale colors. section 7.1.1
- Percentages can replace numeric channels: 100% means full intensity and 0% means none. section 7.1.1
- Add / followed by an alpha value from 0 to 1 or 0% to 100% to control transparency. section 7.1.1
Purple text
The values 128, 0, and 128 combine equal red and blue intensities with no green: h1 { color: rgb(128 0 128); }. Add / 0.5 for a half-transparent version. section 7.1.1
Generate a random color
JavaScript can generate valid integer channels by flooring Math.random() * 256: function getRandomColor() { const r = Math.floor(Math.random() * 256); const g = Math.floor(Math.random() * 256); const b = Math.floor(Math.random() * 256); return `rgb(${r}, ${g}, ${b})`; } section 2.8
Figure 7.1 You can visualize the RGB color model as a cube.
Visualize RGB as a three-dimensional cube whose axes represent red, green, and blue intensity. section 7.1.1
