HTML Basics
HTML Color Styles and HSL
Color brings a page to life. HTML and CSS let you specify colors in several ways — by name, HEX code, RGB, or HSL — and this page explains each one.
How are Colors Defined?
Colors are applied with CSS, usually through the color property for text and background-color for backgrounds. You can name the color, or specify it precisely with a numeric format.
The most flexible format is HSL, which stands for Hue, Saturation, and Lightness. It matches how humans think about color: pick a hue on the color wheel, then adjust how vivid and how light it is.
The Color Formats
| Format | Example | Notes |
|---|---|---|
| Named | tomato | About 140 predefined names. |
| HEX | #ff6347 | Red, green, blue in hexadecimal. |
| RGB | rgb(255, 99, 71) | Red, green, blue from 0-255. |
| RGBA | rgba(255, 99, 71, 0.5) | RGB plus alpha (opacity). |
| HSL | hsl(9, 100%, 64%) | Hue 0-360, saturation %, lightness %. |
| HSLA | hsla(9, 100%, 64%, 0.5) | HSL plus opacity. |
Example: The Same Color, Four Ways
<!DOCTYPE html>
<html>
<body>
<p style="color:white; background:tomato; padding:8px;">Named: tomato</p>
<p style="color:white; background:#ff6347; padding:8px;">HEX: #ff6347</p>
<p style="color:white; background:rgb(255,99,71); padding:8px;">RGB</p>
<p style="color:white; background:hsl(9,100%,64%); padding:8px;">HSL</p>
</body>
</html>More Examples
<!DOCTYPE html>
<html>
<body>
<div style="background:hsl(210, 100%, 20%); color:white; padding:8px;">Dark blue</div>
<div style="background:hsl(210, 100%, 40%); color:white; padding:8px;">Medium blue</div>
<div style="background:hsl(210, 100%, 60%); color:white; padding:8px;">Light blue</div>
<div style="background:hsl(210, 100%, 80%); padding:8px;">Pale blue</div>
</body>
</html><div style="background:url(https://picsum.photos/300/120); padding:20px;">
<p style="background:rgba(0,0,0,0.6); color:white; padding:8px;">
Semi-transparent black overlay on a photo.
</p>
</div>HSL is great for design systems: keep the same hue and saturation, then vary only the lightness to generate a consistent set of tints and shades.
Always keep enough contrast between text and background colors. Low-contrast text is hard to read and fails accessibility guidelines.
Key Takeaways
- Colors can be named, or written as HEX, RGB, or HSL.
- RGBA and HSLA add an alpha channel for transparency.
- HSL (hue, saturation, lightness) is the most intuitive to adjust.
- Maintain strong text-to-background contrast for readability.