 |
| HTML and CSS tutorial for beginners in English |
Hello friends, welcome to KTL's HTML and CSS tutorial. Today we will study lesson 6.
In our previous lesson, we studied attributes. We also used style attribute for specifying text color.
Today we will see different ways of specifying colors.
Different ways of specifying colors
There are two ways of specifying color. 1. By color name, 2. By color values.Specifying colors by color names
We have specified color name in Lesson-05. Orange, blue, green, black, gray are all examples of color names.Specifying colors by color values
There are 5 methods of specifying color values.1. RGB value
2. HEX value
3. HSL value
4. RGBA value
5. HSLA value
1. RGB value:
This is specified as rgb(red, green, blue). we specify intensity of colors in parentheses. These values range from 0 to 255.
Similarly rgb(0,0,255) is blue, rgb(0,0,0) is black, rgb(255, 255, 255) is maximum intensity, that is white.
Different shades of gray are defined by equal values of rgb. For example rgb(0,0,0), rgb (60, 60, 60) and so on. We will write this code in today's script.
2. HEX value
In this method color values are specified using hexadecimal value. Hexadecimal is a number system in which numbers are counted using 16 basic symbols. In decimal system 10 symbols are used to count numbers - 0 to 9. In hexadecimal system symbols used are 0 to 9 and a to f. So how do we count using hexadecimal system? We use 0 to 9 for decimal 0 to 9, and after that "a" for 10, "b", for 11, "c for 12, ... f for 15. These are first 16 symbols, and then 10 for decimal 16, 11 for decimal 17 and so on. See the table given below: |
| Figure 6-1 Hex numbering system |
ff is 255. That means 255, 0, 0 is ff, 00, 00.
Color is specified as #rrggbb. Red is #ff0000, blue is #0000ff.
3. HSL value:
These are specified as hsl(hue, saturation, lightness)Hue is degree on color wheel. A color wheel is shown in the following figure. Note that hue of red color is 0 degrees.
 |
| Figure 6-2. Color wheel |
Lightness is a % value. 100% is white. 0% is black.
RGBA and HSLA values: Here "A" stands for alpha value. It specifies opacity. 0 is full transparent, 1 is not transparent.
Now let us see an example. Copy code from Lesson-05.
After second paragraph insert following lines. These are written for displaying gray color indifferent shades.
<p style="background-color:rgb(0,0,0);">Gray shade 1</p>
<p style="background-color:rgb(60,60,60);">Gray shade 2</p>
<p style="background-color:rgb(120,120,120);">Gray shade 3</p>
<p style="background-color:rgb(180,180,180);">Gray shade 4</p>
<p style="background-color:rgb(255,255,255);">Gray shade 5</p>
 |
| Figure 6-3. Specifying color with rgb |
Click on figure 6-3 for PDF file of source code. Save this as Lesson-06. Again save this as "Lesson-06.html". In windows explorer double click on HTML document.
 |
| Figure 6-4. Shades of gray using equal values of rgb |
See the output. Different shades of gray are displayed after second paragraph. Click on figure 6-4 to see actual output in web page.
Important Points:
1. We can specify colors in two ways: by name and by values.2. When specifying values we can use rgb, hex, hue, rgba or hsla.
3. When we specify equal values for red, green and blue, gray color is shown.
Lesson-05 Lesson-07
