1. Home
  3. Docs
  5. CSS
  7. CSS Color Values
  9. CSS Named Colors

CSS Named Colors

CSS Named colors are pre-defined color values that can be directly used in CSS code without specifying the color in its hexadecimal (HEX) or RGB representation. This article will explore some examples of CSS named colors and their syntax.

/* Set the text color of all paragraphs to red */
p {
  color: red;
}

/* Set the background color of an element with class "box" to blue */
.box {
  background-color: blue;
}

/* Set the border color of an element with ID "header" to green */
#header {
  border-color: green;
}

CSS named colors are predefined colors that can be used in CSS properties to specify the color of an element. These named colors provide a convenient way for web designers and developers to quickly and easily specify colors without knowing the hexadecimal or RGB values of specific colors.

There are 147 CSS named colors, each with a unique name corresponding to a specific color. Some examples of CSS named colors include "red", "green", "blue", "yellow", "orange", "purple", and "gray". These colors are available in all modern web browsers and can be used in various properties, such as color, background-color, border-color, and text-shadow.

Here are a few examples of CSS named colors and their corresponding hex values:

  • Red: #FF0000
  • Green: #008000
  • Blue: #0000FF
  • Yellow: #FFFF00
  • Orange: #FFA500
  • Purple: #800080
  • Gray: #808080

And many more. There are a total of 147 named color values in CSS.

Syntax

In CSS, named color values are simple and straightforward to use. To apply a named color to a particular CSS property, you can use the following syntax:

selector {
  property: color_name;
}

Property and Values

  • selector: This represents the HTML element or elements to which the CSS style will be applied. It could be an HTML tag (e.g., h1, p, a), a class (e.g., .my-class), an ID (e.g., #my-id), or any other valid CSS selector.
  • property: This refers to the CSS property that you want to apply the named color. For example, color, background-color, border-color etc.
  • color_name: This is the actual name of the color you want to use. Tou simply type the name in lowercase letters without any spaces or special characters.

Example

To use a CSS named color, you need to specify the color name as the value for the CSS property that accepts color values. For example, if you want to set the text color of a paragraph element to red, you can use the following CSS rule:

p {
  color: red;
}

Similarly, if you wanted to create a gradient background using a mix of blue and green colors, you could use the following CSS rule:

background: linear-gradient(to bottom, blue, green);

Or, if you prefer a shade of blue for the background of a section, you can use the following:

.section {
  background-color: blue;
}

It's important to note that the color names are case-insensitive, meaning you can use them in uppercase, lowercase, or a combination of both. For instance, "green," "GREEN," and "GrEeN" are all valid representations of the same named color.

CSS Named Colors Limitations

CSS named colors have a few limitations that are important to consider when using them in web development:

  • CSS named colors are fixed values and cannot be modified or customized. This means you cannot adjust a named color's hue, saturation, or brightness to achieve a specific shade or tone.
  • CSS named colors offer a predefined set of 147 color names. While this selection covers a wide range of standard colors, it may not include more specific or unique shades required for certain design needs. If you have a specific color in mind that is not covered by the named colors, you will need to use alternative methods such as hexadecimal or RGB values.
  • While most modern browsers support CSS named colors, it's important to note that some older or less commonly used browsers may not recognize or render these named colors correctly.
  • The names of CSS named colors are based on the English language and may not be intuitive or easily understandable for users of different languages. When developing multilingual websites or applications, it's important to consider the localization aspect and ensure that color choices are clear and unambiguous for all users.
  • Named colors can vary slightly between web browsers and devices, resulting in color inconsistencies. This means that a color that looks one way on one browser may appear slightly different on another browser or device. This can be problematic for projects that require precise color matching or consistency.

Conclusion

CSS named colors are useful in web development, allowing developers to reference a wide range of common colors by name. Their syntax is simple and intuitive, making them easy to implement in CSS stylesheets. While named colors provide convenience and ease of use, it's important to consider their limitations and opt for more precise color representations when necessary.