HTML Color Codes

How to use a color name in CSS

Any CSS property that takes a color also takes one of these 148 names, in upper or lower case. The three lines below paint the same red.

A name is easy to read, but you can't always guess it: gainsboro, peru and moccasin are real colors. For your brand color, use HEX or rgb().

color: tomato;
color: #ff6347;
color: rgb(255 99 71);

HEX, RGB, HSL and OKLCH

The table shows each color in four CSS notations. HEX is the shortest and the most common. RGB gives the amount of red, green and blue, from 0 to 255. HSL describes hue, saturation and lightness, which helps when you need a lighter or darker version of the same color.

OKLCH also uses hue, but its lightness (the first number) follows what the eye perceives: two colors with the same value look equally light. HSL does not do that, and yellow looks much lighter than blue even though both have the same nominal lightness. White, black and the grays have no chroma, so their hue is shown as 0.

To convert a color that is not on the list, use one of the converters below.

• Convert HEX to RGB
• Convert RGB to HEX
• Pick a color with the Color Picker

Different names, same color

Nine pairs of names share a value: aqua and cyan, fuchsia and magenta, and the gray and grey spellings of gray, darkgray, darkslategray, dimgray, lightgray, lightslategray and slategray. That is why the list has 148 names and 139 different colors. In the table, the other name appears under the row's name.

Older lists mention 140 names. They count only one spelling of each gray and leave out rebeccapurple (#663399), which arrived in CSS Color Level 4.

transparent, currentColor and system colors

Two keywords work as colors but stay out of the table because they have no fixed value. transparent is black with zero alpha. currentColor repeats the element's color value, which is handy for a border or an SVG icon that should follow the text color.

CSS also defines 19 system colors, such as Canvas, CanvasText, LinkText, Highlight and AccentColor. Their value depends on the browser, the operating system and the light or dark theme, so there is no HEX for them. They let a component follow the reader's theme.

Text contrast

The last column shows whether white or black text is easier to read on each color, using the WCAG 2 contrast ratio formula. WCAG asks for at least 4.5 to 1 for normal text and 3 to 1 for large text. White text on yellow gives only 1.07 to 1, while black text reaches 19.56 to 1.

Check the contrast of any pair of colors

Sources

Checked on November 5, 2026:

• W3C, CSS Color Module Level 4: named colors
• MDN: the named-color data type
• W3C, WCAG 2.1: definition of contrast ratio