CSS Colors
CSS lets you specify colors in several formats. They all reach the same place — pixels on a screen — but they make life easier in different situations.
Color formats
| Format | Example | Use it when… |
|---|---|---|
| Named | tomato, rebeccapurple | You need a quick, memorable color. |
| Hex | #04AA6D | You want a compact form (3, 4, 6, or 8 hex digits). |
| RGB | rgb(4 170 109) | You're tweaking individual channels. |
| RGBA | rgb(4 170 109 / 0.5) | You need transparency. |
| HSL | hsl(155 95% 34%) | You want to reason about hue / saturation / lightness. |
| HSLA | hsl(155 95% 34% / 0.5) | HSL with transparency. |
| currentColor | border-color: currentColor | You want to inherit the element's text color. |
A quick palette
Tip: Pick HSL when you need to generate consistent hover or disabled states — bumping the lightness by ±10% is far more predictable than nudging hex digits.
Example
Example
<!DOCTYPE html>
<html>
<head>
<style>
h1 { color: #04AA6D; }
p { color: rgb(40, 42, 53); background: #f1f1f1; padding: 8px; }
</style>
</head>
<body>
<h1>Hello, color!</h1>
<p>This paragraph has a grey background and dark text.</p>
</body>
</html>
Try it Yourself »
Exercise
Use the hex code for the brand green (#04AA6D) as the heading colour.
h1 { color:
; }
Hex colors start with a hash and have six characters.
Discussion
Loading…