CSS · Chapter 6 of 44
CSS Colors
CSS colors can be specified using names (red), hex codes (#ff0000), RGB (rgb(255,0,0)), or HSL (hsl(0,100%,50%)).
Each format lets you control color precisely, with RGB and HSL also supporting transparency via rgba() and hsla().
Syntax
color: #ff0000;
color: rgb(255, 0, 0);
color: hsl(0, 100%, 50%);Color formats
Named colors are easy to read. Hex and RGB give full control over red, green, and blue channels. HSL uses hue, saturation, and lightness, which is intuitive for adjusting shades.
Transparency
rgba() and hsla() add an alpha channel (0 to 1) to control opacity.
Example 1 (css)
p {
color: #ff0000;
}
div {
background-color: rgba(0, 0, 255, 0.5);
}Output
Red paragraph text; semi-transparent blue div backgroundHex sets solid color; rgba adds 50% transparency to blue.
Key points
- Colors can be named, hex, RGB, or HSL.
- Hex codes use six hexadecimal digits (#RRGGBB).
- rgba() and hsla() add transparency via alpha.
- HSL is intuitive for lightening or darkening a color.
💡 Note: Shorthand hex like #f00 is equivalent to #ff0000.