Color names and HTML color codes

How to find a color name or an HTML color code

1. To find the code of a named color, type the name in the search box, for example tomato or navy. The CSS table and the families below show every match, and an exact name opens its details on the right.
2. To find the name of a code, paste the hex code, with or without the #, or an rgb() or hsl() value. You get the exact name if the code has one, otherwise the three closest names and how close each one is.
3. To browse, pick a color family such as Blues or Browns, and switch the order between shade and A to Z.
4. To copy, click any keyword, hex, RGB or HSL value. It goes to your clipboard in the format CSS expects, for example rgb(255, 99, 71).

Got the color in a photo or a screenshot rather than as a code? Use the color picker from image to read the pixel, then come back with the hex code. In British English the same search is for colour names and colour codes, but CSS itself only understands the US spelling: the property is color, never colour.

Where the CSS color names come from

CSS Color Module Level 4, the current W3C standard, defines 148 named colors. Any browser accepts them anywhere a color goes, in any mix of upper and lower case: Tomato, tomato and TOMATO are the same color. They name 139 different colors, because seven grays can be spelled gray or grey, aqua is the same as cyan and fuchsia is the same as magenta.

The list grew in layers. Sixteen basic colors, from black and silver to teal and aqua, were already in HTML 4. Most of the others came from the color names of the X11 window system on Unix, which CSS took over from SVG. They were picked by programmers decades ago, which explains some oddities: darkgray (#A9A9A9) is lighter than gray (#808080), and green (#008000) is much darker than lime (#00FF00). The newest name, rebeccapurple (#663399), was added in 2014 in memory of Rebecca Meyer, the daughter of the CSS author Eric Meyer.

Two other keywords work where a color is expected but are not in the list: transparent, which is fully see-through, and currentcolor, which repeats the text color of the element.

How HTML color codes work: hex, RGB and HSL

A screen mixes every color from red, green and blue light. HTML color codes write down how much of each, in three ways that describe exactly the same colors.

Each channel has 256 steps, so there are 256 × 256 × 256 = 16,777,216 hex codes. Only a tiny share of them have a name, which is why the finder above reports the nearest name and how far away it is rather than pretending every code has one. #000000 is black, all channels off, and #FFFFFF is white, all channels at full. Equal values give a gray: #333333, often shortened to #333, is the dark gray many sites use for body text.

Same name, different code

Outside the CSS list there is no official owner of color names. Paint makers, design tools and naming lists each choose their own values, so a familiar name can point to very different colors. Here is how the CSS keywords compare with the color-names list for the same word:

The difference is ΔE (delta E) measured with CIEDE2000, the formula for how different two colors look to the human eye. Under 1, most people cannot tell the two apart. Over 5, they are visibly different colors. When a name has to mean one exact color, for a brand, a product or a developer handoff, always pass the hex code along with it.

How to use color names and codes in HTML and CSS

Color goes in CSS, in a stylesheet or a style attribute. The old HTML color and bgcolor attributes are obsolete. All of these lines set the same orange-red:

p { color: tomato; }
p { color: #ff6347; }
p { color: rgb(255 99 71); }
p { color: hsl(9 100% 64%); }

For text use color, for the area behind it background-color, and for lines border-color. Named colors are quick for prototypes and examples. For a real website, use hex values stored once as variables, so a brand color is written in one place and changed in one place:

:root { --brand: #1f5f6b; --brand-text: #ffffff; }
.button { background-color: var(--brand); color: var(--brand-text); }

The names in the second list, like Eigengrau or Smalt, do not work as CSS keywords. Copy their hex code instead, and keep the name in a comment or a design token so people know what the color is meant to be.

Which text color to use on each color

Every color in the lists shows two samples: white text and black text on that color, with the contrast ratio from the Web Content Accessibility Guidelines (WCAG 2.2). Normal text needs at least 4.5:1 to pass level AA and 7:1 for AAA. Large text, from 24 pixels, or 18.66 pixels in bold, needs 3:1, marked Large. The sample that passes is shown in bold.

Every color passes AA with at least one of the two, but mid-tones only just: gray (#808080) gets 3.94:1 with white and 5.31:1 with black. At AAA, many mid-tones pass with neither, so pick a lighter or darker shade for long text. For any other pair, such as your brand color on a light gray, use the color contrast checker, which also suggests the nearest shade that passes.

Sources