You can specify colors in HTML/CSS using color names, HEX codes, RGB(A), and HSL(A). Colors can be applied to text, backgrounds, borders, and more.
HTML Colors
1) Color Names
<p style="color: red;">Red text</p>
<p style="background-color: lightblue;">Light blue background</p>
2) HEX Codes
<p style="color: #16a34a;">HEX green (#16a34a)</p>
<div style="background:#f59e0b; padding:8px; color:#ffffff;">HEX orange bg</div>
3) RGB and RGBA
<p style="color: rgb(59,130,246);">RGB blue</p>
<div style="background: rgba(239, 68, 68, 0.8); padding:8px; color:#fff;">RGBA red with 0.8 alpha</div>
4) HSL and HSLA
<p style="color: hsl(280, 100%, 60%);">HSL purple</p>
<div style="background: hsla(160, 84%, 39%, 0.7); padding:8px; color:#003300;">HSLA teal with alpha</div>
Output in Browser
Red text (name)
Light blue background (name)
HEX green (#16a34a)
HEX orange bg
RGB blue
RGBA red (0.8)
HSL purple
HSLA teal (0.7)
Common Color Swatches
| Preview | Name | HEX | RGB | HSL |
|---|---|---|---|---|
| Red | #ef4444 | 239, 68, 68 | 0°, 84%, 60% | |
| Green | #16a34a | 22, 163, 74 | 142°, 72%, 36% | |
| Blue | #3b82f6 | 59, 130, 246 | 217°, 91%, 60% | |
| Orange | #f59e0b | 245, 158, 11 | 40°, 94%, 50% | |
| Purple | #9333ea | 147, 51, 234 | 269°, 81%, 56% | |
| Teal | #10b981 | 16, 185, 129 | 162°, 72%, 39% |
Tip: Ensure good contrast between text and background for readability. Dark text on a light background (or vice versa) is easier to read.