Cascading Style Sheets - 3: Colors

Today’s post is short, I will be discussing about colors.

Colors make your webpage look brighter and catch the viewer’s eyes easily. Colors are always expressed in terms of RGB i.e. Red Green Blue.

There are 3 ways to specify a particular color in terms of RGB:

·       A valid name is the easiest option – like “blue” or “red” but that stuff is for basic colors and is quite okay if that is what is required by you.

·       The next way to specify the color is by specifying the detail of the amount of intensity of red, green and blue. Let me give an example and I’ll then explain in detail

Ex: rgb(255,0,0) This code, specifies red color. Intensity of each color is determined from the number specified. Range of the numbers is between 0 and 255 with 255 being the highest intensity number.

Ex2: rgb(100,0,100) This code equally divide intensity of red and blue and has no intensity of green. Now, a combination of red and blue gives purple. Hence, this code specifies purple color.

So depending on numbers, intensity of any of the three main colors can be varied and a new color can be specified.

·       This way is a little complex (in a way) because it involves specifying rgb intensity in terms of hexadecimal numbers. Again, I’ll give an example and then explain in detail.

Ex: #ff0000 This code specifies red color. Every color code contains 6 digits. First 2 digits specify intensity of red; the next two specify intensity of green and the last two specify intensity of blue. In hexadecimal, the decimal number 255 is represented by ‘ff’.

Conversion of numbers from decimal to Hex goes like this:

Decimal	Hexadecimal
0-9	0-9
10	A
11	B
12	C
13	D
14	E
15	F
16-25	10-19
26-32	1A-1F

 

This table continues till the last number 255 or in hexadecimal, FF.

This method of specifying intensity is widely used, as it is otherwise simple once we know hex numbers and the code also looks compact.

Hence, I conclude this post on colors and the 3 ways to specify them.