CSS References
CSS Color Values
The same colour can be written many ways in CSS. Understanding each format — hex, rgb, rgba, hsl, hsla and keywords — lets you choose the one that is easiest to read and edit for the job at hand. This deep dive compares the formats, explains opacity versus alpha, and ends with a runnable swatch example.
The same colour, five ways
Teal (#008080) can be expressed identically across formats. Pick whichever is clearest for what you are doing: hex for copy-paste from design tools, HSL for building palettes, RGB for mixing with alpha.
| Format | Value for teal | Best for |
|---|---|---|
| Keyword | teal | Quick prototypes, common colours. |
| Hex | #008080 | Copying from design tools. |
| Hex + alpha | #00808080 | Hex with transparency (50%). |
| rgb() | rgb(0 128 128) | Programmatic mixing. |
| rgba() | rgba(0, 128, 128, 0.5) | Adding transparency to RGB. |
| hsl() | hsl(180 100% 25%) | Creating tints and shades. |
| hsla() | hsla(180, 100%, 25%, 0.5) | HSL with transparency. |
Understanding the channels
| Model | Channels | Ranges |
|---|---|---|
| RGB | Red, Green, Blue | 0–255 (or 0%–100%) |
| RGB alpha | + Alpha | 0 (clear) – 1 (opaque) |
| HSL | Hue, Saturation, Lightness | 0–360deg, 0%–100%, 0%–100% |
| HSL alpha | + Alpha | 0–1 or 0%–100% |
| Hex | RR GG BB | 00–ff per channel |
| Hex alpha | RR GG BB AA | 00–ff, AA is opacity |
Opacity vs alpha — an important difference
The opacity property fades the entire element, including its text and children. An alpha channel in rgba()/hsla() makes only that one colour translucent, leaving the rest of the element fully opaque. Use alpha when you want a see-through background but crisp text on top.
/* Whole element (and its text) becomes 50% transparent */
.card { opacity: 0.5; }
/* Only the background is translucent; text stays solid */
.overlay { background: rgba(0, 0, 0, 0.5); color: #fff; }opacity below 1 creates a new stacking context and affects descendants. If you only want a translucent background, use an rgba/hsla colour instead.
Runnable swatch example
<!DOCTYPE html>
<html>
<head>
<style>
.swatches { display: flex; gap: 8px; flex-wrap: wrap; font: 12px sans-serif; }
.sw { width: 90px; height: 90px; border-radius: 8px; color: #fff;
display: flex; align-items: flex-end; padding: 6px; }
.k { background: teal; }
.h { background: #008080; }
.r { background: rgb(0 128 128); }
.a { background: rgba(0, 128, 128, 0.5); color:#000; }
.s { background: hsl(180 100% 25%); }
.l { background: hsl(180 100% 40%); }
</style>
</head>
<body>
<div class="swatches">
<div class="sw k">teal</div>
<div class="sw h">#008080</div>
<div class="sw r">rgb()</div>
<div class="sw a">rgba 0.5</div>
<div class="sw s">hsl 25%</div>
<div class="sw l">hsl 40%</div>
</div>
</body>
</html>To make a lighter or darker version of a colour in HSL, keep the hue and saturation and only change the lightness percentage.