Colors add life to any scene, so color up your web page. To do that, you have to learn few things. Here they are,
Primary Colors- Red, Blue, Green
- Red, blue and green are primary colors.
- These colors when added in various ways give out a broad array of colors.
- All the colors we see are a subset of the combination of these three colors.
- We can use these colors to give a good look to our web page.
Adding colors to a web page
We can add colors to our web page using CSS. We can set colors to the background, text, tables etc. Some of the examples are
Adding colors to a paragraph
<p style= "color: green ;"> Colors!!!!</p>
Using CSS
<style> body { background-color : yellow; } </style>
Adding color to the background:
<body style="background:#FFBFFF">
Adding color to a link:
<a style="color:#0CBFFF">
We can specify a color name in 3 ways
- Using Hexadecimal Triplet( hex codes)
Example:
<body style="background:#80BFFF">
- Specifying the name of the color like green, blue , black etc
Example:
<body style="background:blue">
- Specifying the RGB triplet
Example:
<body style="background:rgb(0,0,255)">
Concept behind Hex color codes
Hex color code is defined using hexa-decimal representation starting with pound ‘#’ sign. Each code is a combination of letters (A-F) and numbers (0-9).
- The first two letters represent the intensity of Color Red (starting from 00 to FF, 00 being the lighter version of red and FF is the most intense)
- The second two letters represent the intensity of the color Green (starting from 00 to FF, 00 being the lighter version of Green and FF is the most intense)
- The last two letters represent the intensity of the color Blue. (Starting from 00 to FF, 00 being the lighter version of Blue and FF is the most intense)
Let us see few examples
#FF0000 - represents Red color
#00FF00 - represents Green color
#0000FF - represents Blue color
#FFFF00- represents Yellow color (Red + Green= Yellow)
Combine the various intensities of these three colors and get the desired color.
Each color can have 256 values ranging from 00 to FF (In decimal 255). We can have 256x256x256 various combinations using these three colors.
Web Safe Colors
In the past, the designers were encouraged to use the 216 web safe colors determined by the W3C standards as these are displayed same across all the display units which run on 256 color palettes. These colors vary from 000000 to FFFFFF.
The hex codes of these colors are simple and easy to remember.
With the advent of advanced display units this concept is of no use now.
The following are the web safe colors:-
000000 | 000033 | 000066 | 000099 | 0000CC | 0000FF |
003300 | 003333 | 003366 | 003399 | 0033CC | 0033FF |
006600 | 006633 | 006666 | 006699 | 0066CC | 0066FF |
009900 | 009933 | 009966 | 009999 | 0099CC | 0099FF |
00CC00 | 00CC33 | 00CC66 | 00CC99 | 00CCCC | 00CCFF |
00FF00 | 00FF33 | 00FF66 | 00FF99 | 00FFCC | 00FFFF |
330000 | 330033 | 330066 | 330099 | 3300CC | 3300FF |
333300 | 333333 | 333366 | 333399 | 3333CC | 3333FF |
336600 | 336633 | 336666 | 336699 | 3366CC | 3366FF |
339900 | 339933 | 339966 | 339999 | 3399CC | 3399FF |
33CC00 | 33CC33 | 33CC66 | 33CC99 | 33CCCC | 33CCFF |
33FF00 | 33FF33 | 33FF66 | 33FF99 | 33FFCC | 33FFFF |
660000 | 660033 | 660066 | 660099 | 6600CC | 6600FF |
663300 | 663333 | 663366 | 663399 | 6633CC | 6633FF |
666600 | 666633 | 666666 | 666699 | 6666CC | 6666FF |
669900 | 669933 | 669966 | 669999 | 6699CC | 6699FF |
66CC00 | 66CC33 | 66CC66 | 66CC99 | 66CCCC | 66CCFF |
66FF00 | 66FF33 | 66FF66 | 66FF99 | 66FFCC | 66FFFF |
990000 | 990033 | 990066 | 990099 | 9900CC | 9900FF |
993300 | 993333 | 993366 | 993399 | 9933CC | 9933FF |
996600 | 996633 | 996666 | 996699 | 9966CC | 9966FF |
999900 | 999933 | 999966 | 999999 | 9999CC | 9999FF |
99CC00 | 99CC33 | 99CC66 | 99CC99 | 99CCCC | 99CCFF |
99FF00 | 99FF33 | 99FF66 | 99FF99 | 99FFCC | 99FFFF |
CC0000 | CC0033 | CC0066 | CC0099 | CC00CC | CC00FF |
CC3300 | CC3333 | CC3366 | CC3399 | CC33CC | CC33FF |
CC6600 | CC6633 | CC6666 | CC6699 | CC66CC | CC66FF |
CC9900 | CC9933 | CC9966 | CC9999 | CC99CC | CC99FF |
CCCC00 | CCCC33 | CCCC66 | CCCC99 | CCCCCC | CCCCFF |
CCFF00 | CCFF33 | CCFF66 | CCFF99 | CCFFCC | CCFFFF |
FF0000 | FF0033 | FF0066 | FF0099 | FF00CC | FF00FF |
FF3300 | FF3333 | FF3366 | FF3399 | FF33CC | FF33FF |
FF6600 | FF6633 | FF6666 | FF6699 | FF66CC | FF66FF |
FF9900 | FF9933 | FF9966 | FF9999 | FF99CC | FF99FF |
FFCC00 | FFCC33 | FFCC66 | FFCC99 | FFCCCC | FFCCFF |
FFFF00 | FFFF33 | FFFF66 | FFFF99 | FFFFCC | FFFFFF |