Colors & Backgrounds
Colors
CSS accepts colours in several formats. They all describe the same thing in different ways.
| Format | Example | Notes |
|---|---|---|
| Name | tomato | 140+ named colours |
| Hex | #1c6fa8 | Most common. Red, green, blue in hexadecimal |
| Short hex | #fff | Same as #ffffff |
| RGB | rgb(28 111 168) | Red, green, blue from 0 to 255 |
| RGB + alpha | rgb(0 0 0 / 50%) | 50% transparent |
| HSL | hsl(205 71% 38%) | Hue, saturation, lightness. Easy to tweak |
h1 { color: #1c6fa8; }
.overlay { background-color: rgb(0 0 0 / 60%); }
.button:hover { background: hsl(205 71% 30%); }