CSS Colors

CSS Colors are used to style the color of HTML elements. There are several ways to specify color in CSS.

Color Names

There are 140 standard color names that are recognized in CSS. Here are a few examples:

body {    background-color: red;}
h1 {    color: green;}

In the above example, the background color of the body is set to red and the color of the heading is set to green using color names.

Hexadecimal Colors

Colors can also be described in CSS using hexadecimal (hex) values. Hex values are a combination of six digits and letters, and always start with a # symbol.

body {    background-color: #FF0000;}
h1 {    color: #00FF00;}

In the above example, the background color of the body is set to red and the color of the heading is set to green using hex values.

RGB Colors

Colors can be specified using their red, green, and blue (RGB) components. Each component can have a value between 0 and 255.

body {    background-color: rgb(255, 0, 0);}
h1 {    color: rgb(0, 255, 0);}

In the above example, the background color of the body is set to red and the color of the heading is set to green using RGB values.

RGBA Colors

RGBA is an extension of RGB, with an additional alpha channel. The alpha channel specifies the opacity of the color, and can be a value between 0 (completely transparent) and 1 (completely opaque).

body {    background-color: rgba(255, 0, 0, 0.5);}
h1 {    color: rgba(0, 255, 0, 0.5);}

In the above example, the background color of the body is set to semi-transparent red and the color of the heading is set to semi-transparent green using RGBA values.

HSL Colors

HSL stands for hue, saturation, and lightness. Hue is a degree on the color wheel from 0 to 360, saturation is a percentage value, and lightness is also a percentage.

body {    background-color: hsl(0, 100%, 50%);}
h1 {    color: hsl(120, 100%, 50%);}

In the above example, the background color of the body is set to red and the color of the heading is set to green using HSL values.

HSLA Colors

HSLA is an extension of HSL, with an additional alpha channel for opacity.

body {    background-color: hsla(0, 100%, 50%, 0.5);}
h1 {    color: hsla(120, 100%, 50%, 0.5);}

In the above example, the background color of the body is set to semi-transparent red and the color of the heading is set to semi-transparent green using HSLA values.