Skip to main content

Color Names

In CSS, color names are predefined names for colors that can be used to style elements. Color names provide an easy way to specify colors in CSS without having to remember the hexadecimal (hex) or RGB values of the colors. There are 147 color names that are supported by all major browsers, and they can be used to set the color of text, backgrounds, borders, and other CSS properties.

Syntax​

The syntax for using color names in CSS is as follows:

index.css
selector {
  color: color-name;
}
  • selector: The element to which the color is applied.
  • color: The CSS property used to set the color of the text.
  • color-name: The predefined name of the color.
  • The color name is used to specify the color of the text, background, border, or other CSS properties.

Example​

In the following example, the color name red is used to set the color of the text to red:

index.css
h1 {
  color: red;
}

In the HTML code below, the CSS rule will set the color of the <h1> element to red:

index.html
<h1>This is a heading</h1>
Additional Information
  • Color names provide an easy way to specify colors in CSS.
  • There are 147 color names that are supported by all major browsers.
  • Color names can be used to set the color of text, backgrounds, borders, and other CSS properties.
  • Color names are case-insensitive, meaning you can use uppercase, lowercase, or a combination of both when specifying color names.
  • Color names are an alternative to using hexadecimal (hex) or RGB values to specify colors in CSS.
  • Color names are useful for quickly setting the color of elements without having to remember specific color codes.
  • Color names are easy to remember and can be used to create visually appealing designs in CSS.
  • Color names are supported by all major browsers and provide a consistent way to specify colors across different platforms.

List of Common Color Names​

Here are some common CSS color names:

  • Basic Colors: red, blue, green, yellow, black, white, gray
  • Shades of Red: darkred, firebrick, indianred, tomato, lightcoral
  • Shades of Blue: dodgerblue, deepskyblue, skyblue, lightblue, steelblue
  • Shades of Green: forestgreen, darkgreen, lightgreen, lime, darkolivegreen
  • Other Colors: gold, silver, peachpuff, plum, chocolate, orchid, coral

You can use these color names in your CSS stylesheets to set the color of elements and create visually appealing designs. Color names provide a convenient way to specify colors in CSS and make it easier to work with colors in web development projects.

Example: Using Color Names​

In the following example, the color name blue is used to set the color of the text to blue:

index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Color Names Example</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Welcome to Color Names</h1>
  <p>This is an example of using color names in CSS.</p>
</body>
</html>

Now, you can see the output of the above code in the Browser Window like this:

http://127.0.0.1:5500/index.html

Welcome to Color Names

This is an example of using color names in CSS.

In this example, the color names blue and darkred are used to set the color of the <h1> and <p> elements, respectively. The <h1> element will have blue text, while the <p> element will have dark red text.

Color names are a convenient way to specify colors in CSS and can be used to create visually appealing designs in web development projects.

Extra Information

1. How many way to use color in CSS?

  • There are several ways to specify colors in CSS:
    • Using color names: Predefined names for colors (e.g., red, blue, green).
    • Using hexadecimal (hex) values: A six-digit code that represents the RGB values of a color (e.g., #ff0000 for red).
    • Using RGB values: An RGB color value is specified with the rgb() function, which takes three parameters (e.g., rgb(255, 0, 0) for red).
    • Using RGBA values: An RGBA color value is specified with the rgba() function, which takes four parameters (e.g., rgba(255, 0, 0, 0.5) for red with 50% opacity).
    • Using HSL values: An HSL color value is specified with the hsl() function, which takes three parameters (e.g., hsl(0, 100%, 50%) for red).
    • Using HSLA values: An HSLA color value is specified with the hsla() function, which takes four parameters (e.g., hsla(0, 100%, 50%, 0.5) for red with 50% opacity).

2. What are the advantages of using color names in CSS?

  • Color names provide an easy and intuitive way to specify colors in CSS.
  • Color names are easy to remember and use, making it convenient to work with colors in web development projects.
  • Color names are supported by all major browsers, ensuring consistent color rendering across different platforms.
  • Color names can be used to set the color of text, backgrounds, borders, and other CSS properties.
  • Color names are an alternative to using hexadecimal (hex) or RGB values to specify colors in CSS.
  • Color names are useful for quickly setting the color of elements without having to remember specific color codes.
  • Color names can be combined with other CSS properties to create visually appealing designs in web development projects.

3. Are color names case-sensitive in CSS?

  • No, color names are case-insensitive in CSS, meaning you can use uppercase, lowercase, or a combination of both when specifying color names.
  • For example, red, RED, and Red are all valid ways to specify the color red using the color name in CSS.
  • Color names are not case-sensitive, so you can use any combination of uppercase and lowercase letters when specifying color names in CSS.

4. Can color names be used with other CSS properties?

  • Yes, color names can be used with other CSS properties to style elements in web pages.
  • Color names can be combined with properties like background-color, border-color, text-decoration, and more to create visually appealing designs.
  • Color names can be used to set the color of text, backgrounds, borders, and other CSS properties in web development projects.
  • By using color names with other CSS properties, you can customize the appearance of elements and create engaging user interfaces.

5. How many color names are supported in CSS?

  • There are 147 color names that are supported by all major browsers in CSS.
  • These color names provide a wide range of colors that can be used to style elements in web pages.
  • Color names are a convenient way to specify colors in CSS and make it easier to work with colors in web development projects.
  • Color names are supported by all major browsers, ensuring consistent color rendering across different platforms.

6. Can color names be used in combination with other color values in CSS?

  • Yes, color names can be used in combination with other color values like hexadecimal (hex), RGB, RGBA, HSL, and HSLA values in CSS.
  • Color names can be combined with other color values to create complex color schemes and gradients in web development projects.
  • By using color names in combination with other color values, you can achieve a wide range of colors and effects in your CSS stylesheets.
  • Color names provide a simple and intuitive way to work with colors in CSS and can be easily combined with other color values to create visually appealing designs.

7. Are color names supported by all browsers?

  • Yes, color names are supported by all major browsers, including Chrome, Firefox, Safari, Edge, and Opera.
  • Color names provide a consistent way to specify colors in CSS across different platforms and ensure that colors are rendered correctly in web pages.
  • Color names are widely supported and can be used to set the color of text, backgrounds, borders, and other CSS properties in web development projects.
  • By using color names, you can create visually appealing designs that are consistent across different browsers and devices.

8. How can color names be used to create visually appealing designs in CSS?

  • Color names can be used to set the color of text, backgrounds, borders, and other CSS properties in web pages.
  • By combining color names with other CSS properties like background-color, border-color, text-decoration, and more, you can create visually appealing designs.
  • Color names provide a simple and intuitive way to work with colors in CSS and make it easy to create engaging user interfaces.
  • Color names can be used to create color schemes, gradients, and effects that enhance the visual appeal of web pages.
  • By using color names creatively in your CSS stylesheets, you can design attractive and user-friendly interfaces for your web development projects.

By using color names in CSS, you can easily set the color of elements in your web pages and create visually appealing designs. Color names provide a simple and intuitive way to work with colors in CSS and are supported by all major browsers.

Conclusion​

Color names are predefined names for colors that can be used in CSS to style elements. By using color names, you can specify the color of text, backgrounds, borders, and other CSS properties without having to remember specific color codes. Color names provide a convenient way to work with colors in CSS and make it easier to create visually appealing designs in web development projects.