CSS Color

In this tutorial we will learn about CSS color.

color

We use the color property to set the color of the element content.

We can set the color value using the color name, RGB (red, green, blue) value, Hex value, RGBA (red, green, blue, alpha) value.

Child element can inherit the color of parent element.

You can use the Color Mixer of this website to mix and experiment with colors.

Color name

In the following example we have set the color of div element to red.

div {
	color : red;
}

RGB color

RGB stands for Red, Green and Blue. We can set the color of an element using rgb value. Each component of RGB takes a value from 0 to 255 where 0 means the component is not taken and 255 means it if fully present in the final result.

We can combine the component values of RGB to create different colors. For example, if RGB each all is set to 255 then we get WHITE color. And if all the three component RGB is set to 0 then we get BLACK color.

Red in RGB = 255, 0, 0
Green in RGB = 0, 255, 0
Blue in RGB = 0, 0, 255

In the following example we have set the color of the div to green.

div {
	color : rgb(0, 255, 0);
}

Hex color

In this we set the color of an element using hex value for each RGB.

Hex or hexadecimal number consists of 16 numbers 0 to 9 and A to F where A denotes 10 and F denotes 15 in decimal. We can also use lower case a to f.

To learn more about Hex to Decimal conversion check out this tutorial.

Each component of RGB takes value from 0 to 255 so, in HEX it will be 00 to FF.

For example, if we want WHITE color we have to set RGB to 255,255,255 which in hex is FFFFFF. Similarly, if we want BLACK color we have to set the RGB to 0,0,0 which in hex is 000000.

Red in HEX = FF0000
Green in HEX = 00FF00
Blue in HEX = 0000FF

In the following example we have set the color of div to blue.

div {
	color : #0000FF;
}

HEX Shorthand

If the value of each RGB component in Hex is in pair (i.e., same) then we can replace the two pair characters with a single character.

For example, WHITE in HEX is FFFFFF. So, we have three pairs (FF)(FF)(FF) which can also be written as FFF. Likewise, color BLACK in HEX is 000000 which can be written as 000.

Red in HEX (shorthand) = F00
Green in HEX (shorthand) = 0F0
Blue in HEX (shorthand) = 00F

In shorthand form HEX value must have 3 characters which will can be expanded into 6 characters.

Following are invalid shorthand HEX values.

Red in HEX (shorthand) = F0F0
Green in HEX (shorthand) = FAFAF
Blue in HEX (shorthand) = FFAB

In the following example we have set the color of div to #1ad.

div {
	color : #1ad;
}

RGBA color

In RGBA color we have 4 components. RGB is same as explained above. The fourth component A is for alpha and it controls the opacity and takes value from 0 to 1. So, if the value of A is 0 then opacity is 0% i.e., we will not the color of the element. And if the value of A is 1 then opacity is 100%.

In the following example we have set the color of div to red and alpha to 0.5.

div {
	color : rgba(255, 0, 0, 0.5);
}

In the following example we have set the color of div to blue and alpha to 1.

div {
	color : rgba(0, 0, 255, 1);
}