What the color reference covers
Color Names lists all 148 named color keywords in CSS Color Module Level 4. Some are alternate spellings of the same color, such as gray and grey or aqua and cyan, so the keywords cover 139 distinct colors. Web Safe Colors lists the 216 colors built from six levels per channel.
Both tables give each color as HEX, RGB and HSL, the three notations HTML, CSS and SVG accept. To convert any other value, or to check it against text, use the color converter; to pick a color visually, use the color picker.
The same color in each notation
A named keyword, its six-digit hex code and its rgb() and hsl() values are interchangeable in CSS. The last column is the WCAG contrast ratio of the color against white.
| Keyword | HEX | RGB | HSL | Contrast on white |
|---|---|---|---|---|
| red | #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) | 3.99:1 |
| teal | #008080 | rgb(0, 128, 128) | hsl(180, 100%, 25%) | 4.77:1 |
| steelblue | #4682B4 | rgb(70, 130, 180) | hsl(207, 44%, 49%) | 4.10:1 |
| rebeccapurple | #663399 | rgb(102, 51, 153) | hsl(270, 50%, 40%) | 8.40:1 |
| gold | #FFD700 | rgb(255, 215, 0) | hsl(51, 100%, 50%) | 1.40:1 |
| gray | #808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) | 3.94:1 |
Choosing a notation
Every notation below describes the same 8-bit sRGB colors; they differ in how easy they are to read and edit.
| Notation | Example | Range | Colors |
|---|---|---|---|
| Six-digit HEX | #4682B4 | 00–FF per channel | 16,777,216 |
| Three-digit HEX | #36C | 0–F per channel, each digit doubled | 4,096 |
| rgb() | rgb(70, 130, 180) | 0–255 per channel | 16,777,216 |
| hsl() | hsl(207, 44%, 49%) | hue 0–360°, saturation and lightness 0–100% | Same sRGB colors |
| Named keyword | steelblue | 148 keywords | 139 |
| Web-safe | #3366CC | 00, 33, 66, 99, CC or FF per channel | 216 |
Sources: W3C: CSS Color Module Level 4: The RGB hexadecimal notations
Contrast for text
WCAG 2.2 success criterion 1.4.3 asks for a contrast ratio of at least 4.5:1 between normal text and its background, and 3:1 for large text (about 18 pt, or 14 pt bold). The enhanced level (1.4.6) asks for 7:1 and 4.5:1.
Many named colors fail on white: gold is 1.40:1 and gray is 3.94:1, below the 4.5:1 needed for body text. The color converter reports the ratio and the WCAG verdict for any pair.
Sources: W3C: WCAG 2.2: Contrast (Minimum), Success Criterion 1.4.3