HTML Basics
HTML Color Styles and HSL
Colors bring pages to life. You can set them using color names, HEX codes, RGB, RGBA, or HSL. This page explains each format, with a focus on the flexible HSL model.
Ways to Write Colors
| Format | Example | Notes |
|---|---|---|
| Name | tomato | 140+ predefined names |
| HEX | #ff6347 | Red, green, blue in hexadecimal |
| RGB | rgb(255, 99, 71) | Red, green, blue from 0 to 255 |
| RGBA | rgba(255, 99, 71, 0.5) | RGB plus alpha (transparency) |
| HSL | hsl(9, 100%, 64%) | Hue, saturation, lightness |
Understanding HSL
HSL stands for Hue, Saturation, and Lightness. Hue is a degree on the color wheel from 0 to 360 (0 is red, 120 is green, 240 is blue). Saturation is how vivid the color is (0% grey to 100% full color). Lightness goes from 0% black to 100% white. HSL is popular because it is intuitive to adjust.
<p style="color: hsl(9, 100%, 64%);">HSL red-orange text</p>
<p style="color: #4caf50;">HEX green text</p>
<div style="background-color: rgba(0, 0, 255, 0.3);">
Semi-transparent blue background
</div>💡
With HSL, you can create a lighter or darker shade of the same color just by changing the lightness value while keeping hue and saturation the same. This makes building color themes much easier.