Home » CSS

Colors in CSS

Here, we are going to learn about the colors in CSS (Cascading Style Sheet), how to set text color, background color etc using CSS.
Submitted by Anjali Singh, on October 09, 2019

With CSS you can set the color of an element, background or text. The background color is changed by using the background-color attribute. The color of the element is changed by using the color attribute.

Colors in CSS can be specified by the following method,

1. Hexadecimal colors
2. RGB/RGBA colors
3. HSL/HSLA colors
4. Predefined color names

1) Hexadecimal colors

Hex code is used to denote RGB (Red Green Blue) components of a color in base-16 hexadecimal notation. If both values in each of the three RGB pairings (R, G, and B) are the same, then the color code can be shortened into three characters (the first digit of each pairing).

Example:

body { 
 background-color: #de1205; /* red */ 
}

2) RGB/RGBA colors

RGB also is known as RGBa stands for Red, Green, and Blue, and requires three separate values between 0 and 255, put between brackets, that correspond with the decimal color values for respectively red, green and blue.

RGBa allows you to add an alpha parameter between 0.0 and 1.0 to define opacity.

Example:

div { 
	background-color: rgb(0, 0, 0); /* black */ 
	color : rgba(255, 0, 0, 0.5); /* red with 0.5 opacity */ 
}

3) HSL/HSLA Colors

It is a way to declare a color is to use HSL or HSLa and is similar to RGB and RGBa. HSL stands for hue, saturation, and lightness.

Hue is a degree on the color wheel (from 0 to 360). Saturation is a percentage between 0% and 100%. Lightness is also a percentage between 0% and 100%.

HSLa allows you to add an additional alpha parameter between 0.0 and 1.0 to define opacity.

Example:

#r1 
{  
	background-color: hsla(120, 90%, 70%, .3); /* green with 30% opacity */ 
}

4) Predefined Colors

140 color names are predefined in the HTML and CSS color specification.

The Example of some of the colors with hex codes are as follows,

CSS Tutorial & Examples »

---