CSS References
CSS Colors Reference
CSS lets you specify colour in several formats — from friendly keyword names to hex codes, RGB and HSL, and modern perceptual spaces. This reference explains each format and then lists the most popular named colours with their hex equivalents so you can pick and copy quickly.
Colour formats
| Format | Example | Description |
|---|---|---|
| Named | teal | One of ~148 predefined keyword colours. |
| Hex | #0f766e | Red, green, blue in hexadecimal. |
| Hex + alpha | #0f766e80 | 8-digit hex including opacity. |
| Short hex | #0bc | 3-digit shorthand (expands to #00bbcc). |
| rgb() | rgb(15 118 110) | Red, green, blue as 0–255 or percentages. |
| rgba() | rgba(15,118,110,0.5) | RGB plus an alpha channel (0–1). |
| hsl() | hsl(174 66% 40%) | Hue, saturation, lightness — intuitive to tweak. |
| hsla() | hsla(174,66%,40%,0.5) | HSL plus alpha. |
| hwb() | hwb(174 6% 54%) | Hue, whiteness, blackness. |
| oklch() | oklch(56% 0.1 174) | Perceptually uniform modern colour. |
| currentColor | currentColor | Keyword equal to the element's color value. |
| transparent | transparent | Fully transparent black (rgba(0,0,0,0)). |
💡
HSL is the easiest format for building palettes: keep hue and saturation fixed and vary lightness to make tints and shades of the same colour.
Popular named colours
| Name | Hex | Family |
|---|---|---|
| black | #000000 | Neutral |
| white | #ffffff | Neutral |
| gray | #808080 | Neutral |
| silver | #c0c0c0 | Neutral |
| red | #ff0000 | Red |
| crimson | #dc143c | Red |
| maroon | #800000 | Red |
| tomato | #ff6347 | Red/Orange |
| orange | #ffa500 | Orange |
| gold | #ffd700 | Yellow |
| yellow | #ffff00 | Yellow |
| khaki | #f0e68c | Yellow |
| green | #008000 | Green |
| lime | #00ff00 | Green |
| olive | #808000 | Green |
| seagreen | #2e8b57 | Green |
| teal | #008080 | Cyan |
| cyan / aqua | #00ffff | Cyan |
| turquoise | #40e0d0 | Cyan |
| blue | #0000ff | Blue |
| navy | #000080 | Blue |
| royalblue | #4169e1 | Blue |
| steelblue | #4682b4 | Blue |
| dodgerblue | #1e90ff | Blue |
| indigo | #4b0082 | Purple |
| purple | #800080 | Purple |
| violet | #ee82ee | Purple |
| magenta / fuchsia | #ff00ff | Pink |
| pink | #ffc0cb | Pink |
| hotpink | #ff69b4 | Pink |
| brown | #a52a2a | Brown |
| chocolate | #d2691e | Brown |
| coral | #ff7f50 | Orange |
| salmon | #fa8072 | Red/Pink |
ℹ️
See the Color Values page for a deeper look at alpha/opacity and a runnable swatch example you can edit.