Helpful resources ▼
  Download   Pricing   Buy

HTML Color Names in HTML and CSS

HTML color names are case-insensitive CSS keywords such as red, teal, orange, and rebeccapurple. Use them directly in CSS properties such as color, background-color, and border-color. Choose HEX, RGB, or HSL when you need an exact palette value or transparency.

Colors play a crucial role in web design, evoking emotions, conveying messages, and creating a visually appealing experience. In 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 a color name can be influenced by an interesting story, as well as feelings or emotions associated with that color.

Named colors make styles easy to read and are convenient for prototypes, examples, and familiar colors. Numeric color formats provide more control when a design must match a brand palette or use an alpha value.

How Many Colors Exist?

The number of colors in the world goes far beyond the traditional colors of the rainbow. In the RGB system, 256 possible values for each of the three channels produce 256^3 = 16,777,216 combinations. While most colors are shades of a more familiar color, people continue to create names that describe their appearance, origin, meaning, or emotional associations.

How CSS Named Colors Work

The CSS Color Module Level 4 defines named colors as keywords that can be used anywhere a CSS <color> value is accepted. The keywords are ASCII case-insensitive, so darkred, DarkRed, and DARKRED resolve to the same sRGB color. Lowercase is commonly used for consistency in stylesheets.

Some keywords are aliases with identical values. For example, aqua and cyan both resolve to #00FFFF, while fuchsia and magenta both resolve to #FF00FF. The special CSS values transparent and currentColor are defined separately and are not part of the opaque named-color list.

HTML Color Names

Sixteen CSS named colors originated in the VGA palette and were later adopted into HTML: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. CSS also defines a larger set of named colors, including orange and rebeccapurple.

The following reference table lists the 16 original colors and adds orange, which is commonly included in basic web color charts. Aliases are shown in the same row because they have identical HEX and RGB values.

Color keywordAliasHEXRGB
aquacyan#00FFFFrgb(0, 255, 255)
black–#000000rgb(0, 0, 0)
blue–#0000FFrgb(0, 0, 255)
fuchsiamagenta#FF00FFrgb(255, 0, 255)
graygrey#808080rgb(128, 128, 128)
green–#008000rgb(0, 128, 0)
lime–#00FF00rgb(0, 255, 0)
maroon–#800000rgb(128, 0, 0)
navy–#000080rgb(0, 0, 128)
olive–#808000rgb(128, 128, 0)
purple–#800080rgb(128, 0, 128)
red–#FF0000rgb(255, 0, 0)
silver–#C0C0C0rgb(192, 192, 192)
teal–#008080rgb(0, 128, 128)
white–#FFFFFFrgb(255, 255, 255)
yellow–#FFFF00rgb(255, 255, 0)
orange–#FFA500rgb(255, 165, 0)

For the complete standardized list, see the W3C named colors table. To compare named colors with HEX, RGB, RGBA, HSL, and HSLA syntax, see HTML Color Codes.

History of HTML Color Names

Where do HTML color names come from? Many color names originated in the X Window System (X), a graphical user interface released by the Massachusetts Institute of Technology. In 1986, the GUI color list included 69 basic shades for version X10R3. Then came X11R2 in 1988 with the addition of three colors, including identical shades of gray and grey. It is said that Hewlett-Packard programmers could not remember the preferred spelling and included both variants to prevent mistakes.

In 1989, a significant update created by Paul Raveling for X11R4 introduced a range of light neutrals such as papayawhip and lemonchiffon, as well as names such as blanchedalmond and peachpuff. In the 1980s, colors could vary greatly from monitor to monitor, depending on the manufacturer. After failing to receive approval from the American National Standards Institute (ANSI), Raveling calibrated the colors for his own HP monitor and drew names from the now-defunct paint company Sinclair Paints.

X11 then received a set of bolder color names through another programmer, John C. Thomas. He changed some shade names to reduce user confusion. According to accounts of this history, a box of 72 Crayola crayons inspired names including aquamarine, orchid, and salmon.

By 2001, the World Wide Web Consortium (W3C) had published a working draft of the CSS3 Color Module. The inherited color-name database has remained a subject of discussion and criticism. For example, darkgray is lighter than gray, not all colors have corresponding dark or light versions, and the names are distributed unevenly across the sRGB color space.

Other points of discussion involve language and cultural context. Some names are difficult to understand for people who are not native English speakers, while others can have sensitive or region-specific associations. These questions remain relevant in proposals to rename CSS colors.

The following figure shows an RGB cube with colors associated with the additions by Paul Raveling and John C. Thomas. Raveling added a group of off-white shades using names from Sinclair Paints, while Thomas added brighter shades using familiar descriptive names:

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

In 2014, a new shade appeared in the CSS named-color list. The rebeccapurple keyword was introduced in memory of Rebecca Meyer, daughter of CSS author Eric Meyer. Rebecca died from brain cancer at the age of six, and purple was her favorite color. The standardized value is #663399, or rgb(102, 51, 153).

RebeccaPurple HTML color name with HEX and RGB codes

The Evolution of Color Names

Why do we need HTML color names when we can use color codes? The main reason is that people do not naturally think of a color as a set of numbers and letters. Using a familiar name can be more intuitive. The history of color names also reflects the evolution of language, culture, and technology. From ancient societies to modern web designers, people have used names to describe and define colors for thousands of years.

Color names have changed over time, and what we call a color today may not match older terminology. For example, the color now known as orange was once described as yellow-red. Purple was historically associated with royalty because the pigments used to produce it were expensive. Color names often come from natural objects, pigments, language, and cultural traditions. Some color words share ancient Indo-European roots; the English word red is related to the Sanskrit raktam, meaning blood. The English word green comes from the Old English grēne, which was associated with growing plants and youth.

Many familiar names are now standardized CSS keywords used in web design. These include cornflowerblue, lavender, lemonchiffon, papayawhip, palegoldenrod, and whitesmoke. Such names can evoke particular associations or moods, but less familiar keywords may be difficult to predict and are less suitable when a design requires precise, repeatable palette values.

Important Points about HTML Color Names

  1. To use an HTML color name, spell the keyword correctly. CSS color names are case-insensitive, so lowercase and uppercase variants such as darkred, DarkRed, and DARKRED are valid. Lowercase is commonly used to keep stylesheets consistent.
  2. HTML color names cover a limited set and may not include every shade or variation. If you need a specific color that has no keyword, use HEX, RGB, or another numeric format. The free online Color Converter converts values between formats such as color names, RGB, HEX, HSL, HSV, HWB, Lab, CMYK, LCH, XYZ, OkLab, and OkLCh.
  3. Standard CSS color keywords resolve to defined sRGB values and are supported by modern browsers. Their appearance can still vary across devices because of display calibration, brightness, and color-management settings, not because the browser assigns a different value to the keyword.
  4. CSS frameworks, libraries, and design systems may provide additional descriptive names as variables or design tokens. These project-specific names are not automatically valid CSS <color> keywords and work only when their definitions are included.
  5. Make sure the colors you choose follow accessibility guidelines. Use combinations with sufficient contrast to ensure readability for people with low vision or color vision differences. See Color Contrast Accessibility for a C# validation workflow, or test a color pair with the online Contrast Checker.
  6. Color names and palettes can have different interpretations or associations across languages, cultures, and contexts. For example, white is associated with weddings, purity, and cleanliness in many Western contexts, while in parts of Asia it can be associated with death and mourning. Consider the intended audience when choosing colors for localized sites.
  7. Apply named colors through CSS properties such as color, background-color, border-color, and outline-color. Obsolete presentational HTML attributes should not be used for modern styling.

Working with CSS Color Names

HTML and CSS color names are an everyday tool for web developers. Colors can be used for text, backgrounds, borders, tables, and individual table cells. The following example uses two common ways to apply them:

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>CSS Named Colors</h2>
15		<p>Named colors are case-insensitive CSS keywords.</p>
16		<h2>Basic Color Keywords</h2>
17		<p style="background-color: White; border-style: solid; border-color: DarkRed;">The original HTML color palette contains 16 named colors.</p>
18	</body>
19</html>

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

Notable CSS Color Name Facts

  1. The keyword pairs grey/gray, cyan/aqua, and magenta/fuchsia have identical HEX and RGB values:

Duplicate HTML color names with the same HEX and RGB codes

CSS supports both the American gray and British grey spellings for several keywords. One often-repeated account says that both variants were included to prevent spelling mistakes. This duplication influenced several more color names, and each pair resolves to the same value:

  1. The red keyword resolves to #FF0000, and blue resolves to #0000FF. However, green resolves to #008000; the brighter #00FF00 value uses the keyword lime.

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

  1. Some names do not describe relative brightness consistently. For example, darkgrey (#A9A9A9) is lighter than grey (#808080).

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

Proposals to Rename CSS Colors

Some CSS color names have prompted discussion because they can be culturally specific, difficult to interpret, or misleading. A CSSWG discussion about three color names proposed the following alternatives:

These proposals have not replaced the existing standardized keywords. Renaming widely implemented values can break existing stylesheets, so use the names currently defined by the CSS specification and treat proposed alternatives as discussion rather than supported syntax.

indianred is named after a red pigment from India rather than Native Americans. The pigment was produced from red laterite containing naturally occurring iron oxides and was described by Scottish scientist Francis Buchanan-Hamilton. The first recorded use of “Indian red” as an English color term dates to the seventeenth century.

Crayola also used the name “Indian Red” for a crayon color and later renamed it “Chestnut.” The crayon name and the standardized CSS keyword are separate naming systems; the CSS keyword remains indianred.

Crayola crayon before and after the IndianRed color name discussion

The CSS moccasin keyword represents a pale yellow-orange color. The name is also used for a type of footwear historically associated with Indigenous peoples of North America, which is why its use as a generic color name has been discussed.

navajowhite is a pale yellow-orange color rather than a neutral white. Its name has also prompted discussion because it references the Navajo Nation and does not describe the color value precisely. Visually, it is similar to colors such as peachpuff, wheat, and moccasin.

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

Online Color Names

The free online Color Names application searches for a color name by its color value. You can enter formats such as a color name, RGB, HEX, HSL, HSV, HWB, Lab, LCH, CMYK, XYZ, OkLab, or OkLCh. The application returns a list of the closest color names and works in a browser on computers, tablets, and mobile devices.

Free online Color Names application for finding color names by code

Note: In the application, similarity refers to cosine similarity based on the angle between vectors in a multidimensional color space such as RGB or HSV. It is calculated as the dot product of the vectors divided by the product of their lengths. A value of 1 indicates identical vector directions, while 0 indicates orthogonality.

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?

Opaque named colors do not have an alpha component. Use modern syntax such as rgb(255 0 0 / 50%) or hsl(0 100% 50% / 50%), the legacy rgba() or hsla() aliases, or an alpha-enabled HEX value. The special transparent keyword represents fully transparent black but is defined separately from the named-color list.

What are the original basic HTML color names?

The 16 original colors are aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. orange is an extended CSS color keyword that is often included as a seventeenth color in basic web color charts.

Related Articles

HTML Color Codes Add Image to HTML