Colors

Color is the one of the main part of styling. Colors are specified using predefined color names, Hexadecimal Color Code, RGB, HEX, HSL, RGBA, HSLA values.

But in real life, we mostly use Color name, Hexadecimal Color Code, RGB and RGBA. Others are used very rarely. So we will discuss only Color name, Hexadecimal Color Code, RGB and RGBA.

Color Name

Names are the name of the color like red, yellow, blue, grey, pink and many more.

			p{
				background-color : pink;
				color : red;
			}
		

Note that, the name is case-insensitive. red or RED, Red, rEd all are same.

Hexadecimal Color

Most color can be specified with the Hexadecimal value. It starts with a # sign and followed by six digit hexadimal digit(0 to F); Most browser provides a color picker, if you inspect the document you can get it. It is hard to remember these color code, so using color picker you can choose awesome color that is predefined in the color picker.

			p{
				background-color : #0000cc;
				color : #4caf50;
			}
		

Here again, the values are Case-insensitive. #0000cc or #0000CC means same.

Hexadecimal color can be specified with three digit. It will be converted to six digit automatically in the browser. Each digit is counted as twice. For example #eee is equivalent with #eeeeee. #faf is same as #ffaaff. Or #e3a is same as #ee33aa.

			p{
				background-color : #0f0;
				color : #dea;
			}
		

Hexadecimal color can alos be represent with the 8 digit value. And the short form takes four digit in which each digit counted twice just like above. The last extra two digit represent the opacity of the color, called alpha.

			p{
				background: #00ff0080;
			}
		

These 8 and 4 digit version of color code is new to the Web. Some major browser support it but others doesn't support it yet. So try ignoring this value. Any combination of color can be represented with rgba function. Try stick to it.

RGB

Here, rgb is a CSS function which takes three arguments. rgba(red, green, blue)

All the three arguments has minimum value 0 and maximum is 255. rgb provides the combination color of red, green, blue of their specified values.

			p{
				background-color : rgb(10,30,67);
				color : rgb(87,89,169);
			}
		

You should grab the rgb color from the color picker tool to get the right color and using color picker you can be never wrong with the value.

RGBA

It is the same as rgb but it takes another argument at the end which specify the opcity of the color. It is stand for alpha. It has the value between 0 to 1. 1 is full color where 0 is transparent.

			p{
				background-color : rgba(10,30,67,0.3);
				color : rgba(87,89,169,0.7);
			}
		

Try with different value of alpha and see the result.

Forground and Background

So far we are discussing the different combination of values. Lets dive into some CSS property to attach these value to. There are two place to put the color in -

Forground

Forground color is just the text color of the element. We use color property to specify the forground color.

			p{
				color : rgba(87,89,169,0.7);
			}
		

Background

Background color is the background color of an element. We use background-color property to specify the background color.

			p{
				background-color : rgba(87,89,169,0.7);
			}
		

Opacity

The opacity property in CSS specifies how transparent an element is. Opacity has a default initial value of 1 (100% opaque). Opacity is not inherited, but because the parent has opacity that applies to everything within it. You cannot make a child element less transparent than the parent. It means if you apply the opacity to the parent div, the effect will reflect on all the child element. There's no way you can make the child element have more opacity.

When an element has a value of 0 the element is completely invisible; a value of 1 is completely opaque (solid). Take a look at the following example -

			<div style="opacity: .5">
				<p style="opacity: 1;">This is a text</p>
			</div>
		

See? If the child element has the higher opacity, it doesn't change anything at all. But you can make the child more less opaque. The following works -

			<div style="opacity: .5">
				<p style="opacity: .1;">This is a text</p>
			</div>
		

To get around with it, you can make the parent div background transparent using rgba() color. So that the child element are safe from the opacity effect.

It is always better to use rgba instead of opacity value. So that you can never go wrong.