CSS Colors:

In every HTML element, there are two ways to specify colors. The one is foreground and the other is background. Following are the properties that are used to specify colors:

color for specifying foreground color.
background-color for specifying background color.

Color specifications:

CSS allows following types of color specifications:

Color names.
Color Hexadecimal values.
Color rgb values.
Color rgba values.
Color hsl values.
Color hsla values.

Color names:

Color names are the simplest way to specify color. The following example specifies both the foreground and background colors:

<html>
	<head>
		<style>
			p
			{
				color:red;
				background-color:lightgreen;
			}
		</style>
	</head>
	<body>
		<p>Namaste! You're at ourtutorials.</p>
		<p>We offer a variety of academic content.</p>
	</body>
</html>

Here in this code, two properties are applied to the element selector p that enables foreground color as red and background color as lightgreen.
Output

Color Hexadecimal codes:

It is assumed that a total of 16⁶ = 16777216 or 16M distinct colors are generally processed by modern display systems. Providing every distinct color a name, is almost next to impossible hence a coding system of six hexadecimal digits was introduced. The range starts from 000000 being black to ffffff being white. Many tools are there in the market or in the web that convert a color into its corresponding Hexadecimal value.

<html>
	<head>
		<style>
			p
			{
				color:ff0000;
				background-color:#8CF18B;
			}
		</style>
	</head>
	<body>
		<p>Namaste! You're at ourtutorials.</p>
		<p>We offer a variety of academic content.</p>
	</body>
</html>

Here in this code, the value given to foreground color is ff0000 and background color is #8CF18B.
Output

Color rgb values:

SInce we have discussed that a total of 16777216 or 16M distinct colors are generally processed by modern display systems. This much colors can be specified by another method of distributing them into the rgb (Red, Green and Blue) values mixed in them. These value range between 0 to 255. Again if you see, 256 * 256 * 256 = 16777216 colors.

<html>
	<head>
		<style>
			p
			{
				color:rgb(255,0,0);
				background-color:rgb(140,241,139);
			}
		</style>
	</head>
	<body>
		<p>Namaste! You're at ourtutorials.</p>
		<p>We offer a variety of academic content.</p>
	</body>
</html>

Here in this code, the value given to foreground color is rgb(255,0,0) and background color is rgb(140,241,139).
Output

Color rgba values:

This specification is exactly the same as is rgb but with one difference. Another thing alpha is specified here. Alpha is a specification of transparancy in the color. It ranges between 0.0 being invisible to 1.0 being opaque.

<html>
	<head>
		<style>
			p
			{
				color:rgba(255,0,0,0.3);
				background-color:rgba(140,241,139,0.3);
			}
		</style>
	</head>
	<body>
		<p>Namaste! You're at ourtutorials.</p>
		<p>We offer a variety of academic content.</p>
	</body>
</html>

Here in this code, the value given to foreground color is rgba(255,0,0,0.3) and background color is rgba(140,241,139,0.3).
Output

Color hsl values:

This specification is almost similar as rgb but the specification of color is in the distributed values of hue, saturation and light. Hue ranges between 0 to 360 whereas saturation and light both range between 0% to 100%.

<html>
	<head>
		<style>
			p
			{
				color:hsl(0,100%,50%);
				background-color:hsl(119,78%,75%);
			}
		</style>
	</head>
	<body>
		<p>Namaste! You're at ourtutorials.</p>
		<p>We offer a variety of academic content.</p>
	</body>
</html>

Here in this code, the value given to foreground color is hsl(0,100%,50%) and background color is hsl(119,78%,75%).
Output

Color hsla values:

This specification is exactly the same as is hsl but with alpha specified additionally.

<html>
	<head>
		<style>
			p
			{
				color:hsla(0,100%,50%,0.3);
				background-color:hsla(119,78%,75%,0.3);
			}
		</style>
	</head>
	<body>
		<p>Namaste! You're at ourtutorials.</p>
		<p>We offer a variety of academic content.</p>
	</body>
</html>

Here in this code, the value given to foreground color is hsla(0,100%,50%,0.3) and background color is hsla(119,78%,75%,0.3).
Output