Skip to main content

Learn CSS Colors: A Complete Guide

Colors are an important part of CSS, as they allow you to change the color of text, backgrounds, borders, and other elements on your web page.

CSS supports a variety of color formats, including:

Hexadecimal​

Hexadecimal colors use a pound sign (#) followed by six digits (three pairs of two-digit numbers) to represent red, green, and blue (RGB) values.

As an example:

div {
     color: #007bff; /* sets the text color to blue */
     background-color: #ffffff; /* sets the background color to white */
     border: 1px solid #cccccc; /* sets the border color to light gray */
}

RGB​

RGB colors use the red, green, and blue color channels to create a wide range of colors. RGB colors can be specified using the rgb() function, which takes three values between 0 and 255.

As an example:

div {
     color: rgb(0, 123, 255); /* sets the text color to blue */
     background-color: rgb(255, 255, 255); /* sets the background color to white */
     border: 1px solid rgb(204, 204, 204); /* sets the border color to light gray */
}

RGBA​

RGBA colors are similar to RGB colors, but they also include an alpha channel that specifies the opacity of the color. The alpha channel is represented by a value between 0 and 1.

As an example:

div {
     color: rgba(0, 123, 255, 0.5); /* sets the text color to half-transparent blue */
     background-color: rgba(255, 255, 255, 0.5); /* sets the background color to half-transparent white */
     border: 1px solid rgba(204, 204, 204, 0.5); /* sets the border color to half-transparent light gray */
}

HSL​

HSL stands for hue, saturation, and lightness, and is another way to specify colors in CSS. The hue value represents the color itself, saturation represents the intensity of the color, and lightness represents the brightness of the color. HSL colors can be specified using the hsl() function, which takes three values.

As an example:

div {
     color: hsl(210, 100%, 50%); /* sets the text color to blue */
     background-color: hsl(0, 0%, 100%); /* sets the background color to white */
     border: 1px solid hsl(0, 0%, 80%); /* sets the border color to light gray */
}

HSLA​

HSLA colors are similar to HSL colors, but they also include an alpha channel that specifies the opacity of the color. The alpha channel is represented by a value between 0 and 1.

As an example:

div {
     color: hsla(210, 100%, 50%, 0.5); /* sets the text color to half-transparent blue */
     background-color: hsla(0, 0%, 100%, 0.5); /* sets the background color to half-transparent white */
     border: 1px solid hsla(0, 0%, 80%, 0.5); /* sets the border color to half-transparent light gray */
}

Named Colors​

CSS also supports a set of 147 named colors, such as red, green, blue, etc. These named colors can be used to quickly and easily apply colors to your web page.

As an example:

div {
     color: blue; /* sets the text color to blue */
     background-color: white; /* sets the background color to white */
     border: 1px solid lightgray; /* sets the border color to light gray */
}

In this example:

  • The color property is used to change the text color to blue.
  • The background-color property is used to set the background color to white with 50% opacity, and the border property is used to set the border color to light gray.