HTML Color Names

HTML and CSS support a set of predefined color names that can be used directly in your styles.

All modern browsers recognize the 140 standard color names defined in the CSS Color Module specifications.

Using Color Names

You can use these names anywhere a color value is expected, such as in the style attribute or CSS rules. Color names are case-insensitive (red, Red, RED all refer to the same color).

Example:

<h1 style="color: MediumSeaGreen;">Medium Sea Green Heading</h1>

<p style="background-color: LightGray; padding: 15px;">
  This paragraph has a LightGray background.
</p>

<button style="background-color: DodgerBlue; color: White; border: none; padding: 10px 20px;">
  A DodgerBlue Button
</button>

In a CSS file:

body {
  background-color: AntiqueWhite;
}

h2 {
  color: Firebrick;
}

.highlight {
  background-color: Gold;
}

Examples of Standard Color Names

Here are a few examples from the 140 available names:

Color Name	Approx. HEX Value
`Black`	#000000
`White`	#FFFFFF
`Red`	#FF0000
`Lime`	#00FF00
`Blue`	#0000FF
`Yellow`	#FFFF00
`Cyan` / `Aqua`	#00FFFF
`Magenta` / `Fuchsia`	#FF00FF
`Silver`	#C0C0C0
`Gray`	#808080
`Maroon`	#800000
`Olive`	#808000
`Green`	#008000
`Purple`	#800080
`Teal`	#008080
`Navy`	#000080
`Orange`	#FFA500
`Gold`	#FFD700
`Pink`	#FFC0CB
`Tomato`	#FF6347
`CornflowerBlue`	#6495ED
`RebeccaPurple`	#663399

You can find the full list of 140 color names and their corresponding HEX/RGB values on resources like the MDN Web Docs Color keywords page.

Pros and Cons of Using Color Names

Pros:

Readability: Names like Red or LightBlue are easy to understand.
Convenience: Quick to type for common colors.
Memorability: Easier to remember than HEX or RGB values for standard colors.

Cons:

Limited Palette: Only 140 names are available, which is insufficient for precise design requirements or branding.
Specificity: Cannot represent subtle shades or custom colors.
Transparency: Color names do not support transparency (alpha channel). You need RGBA or HSLA for that.

Conclusion: Color names are useful for basic colors and rapid prototyping, but for professional web development requiring precise color control, transparency, or extensive palettes, you should primarily use HEX, RGB(A), or HSL(A) values, often managed with CSS Custom Properties.