Color Values in HTML & CSS
Colors are set via CSS (inline style or a stylesheet). HTML supports several color formats:
| Format | Example | Notes |
|---|---|---|
| Named color | red, tomato, steelblue | 140+ built-in names |
| Hex | #D62828 | Most common, 6 hex digits |
| RGB | rgb(214, 40, 40) | Red, Green, Blue (0–255) |
| RGBA | rgba(214, 40, 40, 0.5) | With opacity (0–1) |
| HSL | hsl(0, 73%, 50%) | Hue, Saturation, Lightness |
<!-- Text color -->
<h1 style="color: #D62828;">Red heading</h1>
<!-- Background color -->
<p style="background-color: #f5f3ee; padding: 12px;">Light background</p>
<!-- Border color -->
<div style="border: 2px solid rgb(91, 63, 239); padding: 16px;">
Purple border
</div>
<!-- Semi-transparent -->
<p style="background-color: rgba(0,0,0,0.1); padding: 8px;">
10% black overlay
</p>Use a site like coolors.co or browser DevTools color picker to find hex codes. HSL is easiest for building color shades — change lightness while keeping the same hue.