CSS Color Values
Every way to write a colour in CSS, side by side.
The same green in every format
| Format | Value | Notes |
|---|---|---|
| Named | seagreen | ~140 keywords. Easy to read. |
| 3-digit hex | #0a6 | Short form — each digit is doubled. |
| 6-digit hex | #04AA6D | Standard hex. |
| 8-digit hex | #04AA6D80 | Last two digits are alpha (00–FF). |
| rgb (legacy) | rgb(4, 170, 109) | Comma syntax — still works. |
| rgb (modern) | rgb(4 170 109) | Space syntax + optional /alpha. |
| rgba | rgba(4 170 109 / 0.5) | Alpha as the last value. |
| hsl | hsl(155 95% 34%) | Hue (0–360), Saturation, Lightness. |
| hsla | hsl(155 95% 34% / 0.5) | HSL with alpha. |
| oklch | oklch(60% 0.15 155) | Perceptually uniform. |
| color() | color(display-p3 0.02 0.67 0.43) | Wide-gamut explicit space. |
Special keywords
| Keyword | Means |
|---|---|
transparent | Fully transparent — equivalent to rgb(0 0 0 / 0). |
currentColor | The element's computed color value. |
inherit / initial / unset / revert | Cascade keywords. |
Tip: Pick one format for your project and stick with it. Mixing hex, rgb, and hsl in the same stylesheet is noisy; commit to one.
Example
Example
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Verdana, sans-serif; }
.box { background: #04AA6D; color: #fff; padding: 20px; border-radius: 6px; }
</style>
</head>
<body>
<h1>CSS Color Values</h1>
<div class="box">Edit the CSS on the left, then click Run »</div>
</body>
</html>
Try it Yourself »
Exercise
Add the alpha (50%) to this modern RGB colour.
background: rgb(4 170 109 /
);
Halfway between 0 and 1.
Discussion
Loading…