Ways to Specify Color
CSS supports several color formats. Any of them can be used wherever a color value is expected — text color, backgrounds, borders, and shadows.
Color Formats
| Format | Example | Notes |
|---|---|---|
| Named | tomato | 148 keyword names, easy to read |
| Hex | #ff6347 | Six-digit RGB in hexadecimal |
| RGB | rgb(255, 99, 71) | Red, green, blue from 0–255 |
| RGBA | rgba(255, 99, 71, 0.5) | RGB plus alpha (transparency) from 0–1 |
| HSL | hsl(9, 100%, 64%) | Hue, saturation, lightness |
| HSLA | hsla(9, 100%, 64%, 0.5) | HSL plus alpha transparency |
Color Formats in Use
<style>
.named { background: tomato; }
.hex { background: #4682b4; }
.rgb { background: rgb(70, 130, 180); }
.hsl { background: hsl(207, 44%, 49%); }
div {
color: white;
padding: 10px;
margin-bottom: 6px;
font-family: sans-serif;
}
</style>
<div class="named">named: tomato</div>
<div class="hex">hex: #4682b4</div>
<div class="rgb">rgb(70, 130, 180)</div>
<div class="hsl">hsl(207, 44%, 49%)</div>Output
Transparency
The alpha channel in rgba() and hsla() controls opacity, from 0 (fully transparent) to 1 (fully opaque). The standalone opacity property does something similar but affects the entire element, including its children.
Transparent Overlay
<style>
.overlay {
background: rgba(0, 0, 0, 0.6);
color: white;
padding: 20px;
}
</style>
<div class="overlay">Semi-transparent overlay</div>Output
HSL is Easier to Reason About
HSL describes color the way humans think about it — hue (the base color), saturation (intensity), and lightness. It makes creating consistent color variations (like a hover state) much easier than guessing hex values.
Best Practice
Pick one color format per project and stick with it for consistency — many teams prefer HSL for its readability, combined with CSS variables for a shared color palette.