Helpful resources ▼
  Download   Pricing   Buy

HTML Color Names in HTML and CSS

Colors play a crucial role in web design, evoking emotions, conveying messages, and creating a visually appealing experience. In the realm of HTML and CSS, color names provide a convenient way to specify colors without the need for hexadecimal or RGB values. There are many ways that colors get their names. They are often named after plants, animals, or other things they look like. For example, the color orange got its name when it was used to describe the orange fruit. Colors are also named after the pigments that were historically used to create them, and the name of color can be influenced by an interesting story, as well as feelings or emotions associated with that color.

HTML color names are predefined CSS color keywords such as red, teal, orange, and rebeccapurple. They are readable and easy to remember, but they are less precise than HEX, RGB, HSL, and other numeric color formats.

How Many Colors Exist?

The number of colors in the world goes far beyond the traditional colors of the rainbow. If you check the RGB system, you can see that there are 256^3 = 16,777,216 colors, and they can all have their own names! With millions of colors, people had to be creative to name them all. While most colors are just shades of a more common color, it’s always interesting to know where these names come from and what they might symbolize.

HTML Color Names

The CSS Color Module Level 4 defines the standardized named colors used in CSS. This set is often described as 147 HTML/CSS named colors, although the exact count can vary by source depending on how aliases such as gray/grey and additions such as rebeccapurple are counted. The original basic color names include aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. Modern CSS also includes many extended named colors, including orange and rebeccapurple.

The figure illustrates 17 basic colors with HEX codes:

Basic HTML color names list with HEX color codes

You can also define colors on a website using HTML color codes such as HEX, RGB, RGBA, HSL, and HSLA. For details, see HTML Color Codes.

History of HTML Color Names

Where do HTML color names come from? Colors were originally a product of the X Window System(X), a graphical user interface (GUI) released by the Massachusetts Institute of Technology. In 1986 the GUI color list included 69 basic shades for version X10R3. Then came the X11R2 in 1988 with the addition of three colors, including identical shades of gray and grey. It is said that Hewlett-Packard programmers couldn’t remember the proper spelling and decided to use two spellings to prevent mistakes.

In 1989, a significant update created by Paul Raveling (X11R4) came out, featuring a host of light neutrals such as “papaya whip” and “lemon chiffon”, as well as other highly named shades such as “blanched almond” and “peach puff”. In the 80s, colors could vary greatly from monitor to monitor, depending on the manufacturer of the machine. After failing to receive sanctions from the American National Standards Institute (ANSI), which issued standards for Web color properties, Raveling decided to take matters into his own hands. Raveling drew these names from the now-defunct paint company Sinclair Paints and calibrated the colors for his own HP monitor.

X11 then got a set of bolder color names thanks to another programmer, John C. Thomas. He changed the name of the shades to alleviate user confusion. Allegedly, a box of 72 Crayola crayons helped him with this. That birthed “aquamarine”, “orchid”, and “salmon”, to name a few.

By 2001, the World Wide Web Consortium (W3C) published the first working draft of the CSS 3 Color Module, which included colors. The color names database has been the subject of discussion and criticism. The color naming scheme was criticized. For example, “dark grey” was lighter than “grey”; not all colors had dark or light versions, and the color distribution was uneven, leaning toward red and green and away from blue.

Other points of contention were language and cultural issues. For many who were not native English speakers, some of the color names seemed repulsive; others saw potential racial connotations in “indian red” and considered many of the color names to be regionally oriented. It should be noted that these problems are still relevant today.

The following figure shows the RGB cube model with colors that Paul Raveling and John Thomas included. Raveling added a group of off-white shades using names from Sinclair Paints. Thomas added bold shades by taking names from Crayola:

Distribution of Raveling and Thomas HTML color names in the RGB cube

In 2014, a new shade appeared in the HTML color name list. The “Rebecca purple” was introduced in honor of Rebecca Meyer, daughter of Eric Meyer, a respected programmer and CSS writer. Color (#663399) was the girl’s favorite one. Rebecca died of brain cancer at the age of six.

RebeccaPurple HTML color name with HEX and RGB codes

The Evolution of Color Names

So why do we need HTML color names? After all, we can use color codes! The answer can be many, but probably the main thing here is that people do not think of color as a set of numbers and letters; using a color name for a person is more natural. The history of color names is a fascinating topic that says a lot about the evolution of language, culture, and technology. From the ancient Egyptians to modern web designers, people have used color names to describe and define the world around them for thousands of years.

Color names have changed over time, and what we consider a certain color today may not have been the case in the past. For example, the color we now know as “orange” was called “yellow-red” in antiquity. And purple was once a color reserved for royalty, as it was made from expensive dyes. The origin of the names of colors goes back to ancient times when people often named colors after objects of nature or cultural phenomena. For example, the color “red” was named after the Sanskrit word “raktam”, which means blood. The color “green” comes from the Old English word “grēne”, which originally meant “young” or “immature,” reflecting the color of young plants and leaves.

Some of the most popular color names today are HTML color names, which are used to define colors in web design. These names include colors like “cornflowerblue”, “lavender”, “lemonchiffon”, “papayawhip”, “palegoldenrod”, and “whitesmoke”. Designers use color names to evoke certain emotions and moods in their works, which can be a powerful tool for communicating their vision.

Important Points about HTML Color Names

  1. To use HTML color names, you must spell color names correctly. HTML color names are case-insensitive, so you can use lowercase or uppercase letters. For example, darkred, DarkRed, and DARKRED are valid.
  2. HTML color names have a limited range of colors. They may not cover every possible shade or variation. If you need a specific color not represented by an HTML color name, you may need to use HEX, RGB, or other color codes. You can use Color Converters which are free online tools that allow you to convert colors between different color codes like HTML color names, RGB, HEX, HSL, HSV, HWB, LAB, CMYK, LCH, XYZ, etc.
  3. HTML color names are usually highly compatible across modern browsers. But some very old or rarely used browsers may only support some HTML color names or may have slight differences in how they are interpreted.
  4. It’s worth noting that there are extended lists of color names available in various CSS frameworks, libraries, and design resources, and they are not part of the HTML standard itself but are often used. While the extended color names are not universally recognized or supported across all browsers and platforms, they can be used in certain contexts where compatibility is not a concern.
  5. To use HTML colors for your web pages, make sure the color names you choose follow accessibility guidelines. Use color combinations that provide sufficient contrast to ensure readability for visually impaired users. Tools such as Color Contrast Checkers can help you verify that your chosen colors meet recommended accessibility standards.
  6. HTML color names are subjective and may have different interpretations or associations in different languages, cultures, or contexts. In addition, the colors themselves and color palettes are associated with certain emotions and moods, which can be different in different cultures. For example, the color white in Western society is associated with weddings, purity, and cleanliness. However, in many Asian cultures, this color symbolizes death, mourning, and humility. Consider intended meaning and context when choosing colors for localized sites.
  7. HTML color names can be used in various HTML attributes that allow you to specify a color. We will look at this in more detail in the article’s next section.

Working with HTML Color Names

HTML and CSS color names are an everyday thing for those who work in web development. In HTML and XHTML, colors can be used for text, background, frame borders, tables, and individual table cells. You can set the color using the following ways:

Here is an example of using HTML color names to colorize text, backgrounds, and borders. We use different ways to specify colors:

To use named colors in an HTML document:

  1. Choose a valid color name such as DarkRed, DimGray, OldLace, or White.
  2. Apply it to CSS properties such as color, background-color, or border-color.
  3. Use inline styles for one element or internal CSS rules when the same style should apply to multiple elements.
 1<html>
 2	<head>
 3		<title>HTML color names</title>
 4		<style>
 5			h2 {
 6			color:DarkRed;
 7			}
 8			p {
 9			color:DimGray;
10			}
11		</style>
12	</head>
13	<body style="background-color:OldLace;">
14		<h2>Color Names List</h2>
15		<p>The HTML5 standard set of 147 color names, known as X11 color names, provides a color names list to represent different hues.</p>
16		<h2>Basic Color Names</h2>
17		<p style="background-color:White; border-style:solid; border-color:DarkRed"> There are 17 basic color names in HTML5. They are widely supported across different browsers and platforms.</p>
18	</body>
19</html>

The rendered HTML code looks as follows:

Rendered HTML document using named colors for text, background, and border styles

For more information on changing text, background, or border color, see Working with HTML Color and the How-to Articles chapter.

Limitations of HTML Color Names

Funny Facts about HTML Color Names

  1. The colors Grey and Gray, Cyan and Aqua, Fuchsia and Magenta have the same HEX and RGB values:

Duplicate HTML color names with the same HEX and RGB codes

It seems that programmers at Hewlett-Packard couldn’t remember the correct spelling of the word “gray” through “a” (Gray), so a duplicate option (Grey) was added to avoid errors in the code. This duplication influenced a few more HTML color names:

  1. We all know that Red corresponds to the color code #ff0000. HTML color name Blue corresponds to #0000ff. And we expect Green to match #00ff00. But no! Color name Green corresponds to #008000. And for #00ff00 you need to use Lime.

Red, blue, green, and lime HTML color names with HEX and RGB codes

  1. Let’s look at shades of grey. We don’t expect dark grey to be lighter than grey!

DarkGrey, Grey, and LightGrey color names with HEX and RGB codes

Suggestions to Rename HTML Colors

Programmers, designers, and users continue to discuss color names, and that’s okay. We provide examples of some of the discussions that have not yet been reflected in the official specifications. Changes are proposed for three colors, where the old names are proposed to be replaced by new ones:

IndianRed is named after a famous red pigment from India and has nothing to do with Native Americans. The name “IndianRed” comes from the red laterite found in India, which is composed of naturally occurring iron oxides. It was first identified by the Scottish scientist Francis Buchanan-Hamilton. The first recorded use of indian red as a color term in English was in 1672.

It is worth noting that “IndianRed” – the name of the Crayola crayon color – the company renamed to chestnut, probably due to discussions around this name.

Crayola crayon before and after the IndianRed color name discussion

Moccasin color is primarily a color from the Yellow color family. It is a mixture of orange and brown color. Maybe the Moccasin has no special meaning. It’s just the name of a type of shoe. Perhaps a potential objection to such a color name comes from the fact that it’s a type of shoe that is historically Native American.

NavajoWhite is a pale pastel shade of yellow-orange often used for interiors in house painting. The color name references the background of the Navajo Nation’s flag. Although it is a light color, it is not white or off-white, as the name suggests. It is similar to other colors, such as peach puff, wheat, and moccasin.

IndianRed, Moccasin, and NavajoWhite color names with HEX and RGB codes

Online Color Names

Free online Color Names application searches for a color name by its color code value. You can enter color codes in formats such as HTML color name, RGB, HEX, HSL, HSV, HWB, LAB, LCH, CMYK, XYZ, OKLAB, or OKLCH. The application returns a list of color names with the closest similarity. It runs on computers, tablets, and mobile devices and can be helpful for designers who need to identify, compare, or share colors.

Free online Color Names application for finding color names by code

Note: In the application, under “similarity”, we mean cosine similarity that is based on the cosine of the angle between the two vectors in a multidimensional color space (e.g., RGB, HSV). The cosine similarity is defined as the dot product of the vectors divided by the product of their lengths. The value 1 indicates identical colors, and 0 indicates orthogonality (no similarity).

HTML Color Names Summary

FAQ

Are HTML color names case-sensitive?

No. HTML and CSS color names are case-insensitive, so darkred, DarkRed, and DARKRED represent the same color.

Should I use color names or HEX values?

Use color names when readability is helpful and exact palette control is not critical. Use HEX, RGB, HSL, RGBA, or HSLA when you need precise colors, transparency, or design-system consistency.

Can HTML color names have transparency?

No. Named colors are opaque color keywords. Use RGBA or HSLA when you need to control transparency.

Related Articles

HTML Color Codes Add Image to HTML