In this section, we will learn how to use colors in CSS.

Colors in CSS

In CSS, there are multiple properties we can use to apply color of HTML elements. This includes changing the font color of a text, changing the background color of a content, changing the color of an element’s border and other areas that colors can be applied. So here we will see some of these properties in details.

Also, you should know that there are multiple ways to represent the value of a color in CSS! For example, colors have names and we can use those names to set the value of such properties. We will see other types of values for colors in this section as well.

CSS color Property:

The first CSS property we can use to assign a color to an HTML content is called `color`. This property focuses on the color of a text content. So using this property we can change the color of a text.

For example, let’s say you have a <p> element and want to change the color of its text to `red`. Well, using the `color` property, we can target the <p> element and assign the value `red` to this property of that element and hence change the text color to red.

Example: using color property in CSS

See the Pen using color property in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.

In this example, we’ve used name color to change the color of two elements <h3> and the <p> using the `color` property.

Types of Color Values in HTML

In short, when it comes to setting a value for a color related property (like background-color, color, border-color etc.) these are the types of values we can assign to them.

• RGB Values
• HEX Values
• HSL Values
• Color-Name Values

CSS HEX Color Values

The HEX stands for hexadecimal and it’s a numbering system used mainly in lower-level programming (especially hardware level). Using HEX system, we can count from 0 through F. (Please check the https://en.wikipedia.org/wiki/Hexadecimal if you’re not familiar with a Hexadecimal system of numbering).

Now in CSS, we can use HEX values to represent a color and basically assign that value to a color related property!

For example, the value #FF0000 represents the color `red` and we can assign this value to a property like `color` if we want to change the text color of a content into red.

Example: using CSS HEX Values

See the Pen using CSS HEX Values by Enjoy Tutorials (@enjoytutorials) on CodePen.

CSS background-color Property:

The background-color property is used to change the background color of an HTML element on a page.

For example, we can use the name `blue` and assign it as the value of this property, which will in turn change the background of the target element into blue.

Example: using background-color property in CSS

See the Pen using background-color property in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.

CSS RGB Color Values

The RGB color values is another type of value we can assign to color related properties like `color` and `background-color`.

This value is a mixture of 3 values for three different colors: Red, Green, and Blue

Here’s the syntax of this color value:

selector{

property: rgb(R,G,B);

}

For each color, we set a value ranged from 0 to 255, where 0 is equal to black color for that target color and the value 255 is equal to maximum saturation of the target color!

For example:

rgb(255,255,255)

This value means the final color is a mixture of full red, full green, and full blue colors. (Which is equal to the color white).

Another example:

rgb(0,0,0)

This value will result in black color!

Example: using CSS RGB value

See the Pen using CSS RGB value by Enjoy Tutorials (@enjoytutorials) on CodePen.

In the example above, the value of the color property for the <p> element is set to 255 for the red and 0 for the other two colors. So because there’s no other color to be mixed with this red one, the final result will be a red text content.

Now, for the <h3> element, the value of the color property is set to 0 red, 255 green, and 0 blue. Again, here because there’s no color to be mixed with the green one, then the final result will be a green text content.

For the background color of the <h3> element, we have the value (20, 100, 230). So Basically, there’s a bit of saturation coverage on each color and so the final result will be a mix of these three values.

CSS HSL Color Values

The HSL stands for Hue, Saturation, and Lightness. The value we provide using this method is a combination of three values.

Here’s the syntax of using HSL color:

selector {

property: hsl(Hue, Saturation, Light);

}

Hue: This is the type of color we want to use! The hue value is ranged from 0 to 360, where 0 is equal to red, 120 is equal to green and the value 240 is equal to blue.

Saturation: this value is in charge of saturation of the color (the value set for the Hue). The range of values is from 0% to 100% where 0% means a shade of gray and the value 100% means the color itself (the value of Hue).

Lightness: this value is in charge of controlling the light of the target color. The range of values for this one is also from 0% to 100% where 0% means complete darkness (black) and the value 100% means white.

Example: using HSL color value

See the Pen using HSL color value by Enjoy Tutorials (@enjoytutorials) on CodePen.

CSS Color-Name Values

The other method of setting a color value for a color related property is by using the name of colors and setting them as the value for such type of properties.

For example, if we want to use an orange background color, then we can use the name `orange` and set it as the value of the background-property directly.

Example: using color-name value

See the Pen using color-name value by Enjoy Tutorials (@enjoytutorials) on CodePen.

Example: background colors in CSS using RGB value

See the Pen background colors in CSS using RGB value by Enjoy Tutorials (@enjoytutorials) on CodePen.

Example: CSS text color with HSL values

See the Pen CSS text color with HSL values by Enjoy Tutorials (@enjoytutorials) on CodePen.