Introduction
Hello everyone. Welcome to this tutorial. Till now I have created black & white web pages. Let us see how to create web page using different colours. In this tutorial you will see which colours can be used for a web page and how to change background and font colour.Colours can be specified in RGB (Red,Green,Blue), hex format or simply by their names. Colours that are supported by one web browser are not supported by different browser. However there are some colours that work on all web browsers.
Hex format
Any colour in this form can be specified using six digit number representing red, green and blue components that make up a colour. This number starts with #. First two digits represent red component,next two digits represent green component and last two digits represent blue component. For example hex number for black colour is #000000 and for white is #ffffff16 standard colours
Here is a list of 16 standard colours that are recommended by W3C(World Wide Consortium).ColorNameHex Code
Black#000000
Gray#808080
Silver#C0C0C0
White#FFFFFF
Yellow#FFFF00
Lime#00FF00
Aqua#00FFFF
Fuchsia#FF00FF
Red#FF0000
Green#008000
Blue#0000FF
Purple#800080
Maroon#800000
Olive#808000
Navy#000080
Teal#008080
Browser safe colours
Below is a table showing 216 colours along with their hex code that would display correctly on any computer#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
How to change background and font color ?
To change background and font color I will use CSS(Cascading StyleSheet).There are three ways to use CSS.One of them is to directly use them with HTML elements. You must write css code like below:<html element style="css property1 : value1;css property2 : value2">
e.g.<h1 style="color : maroon">Birds</h1>
To change background color of a page use background-color property in body start tag.i.e.
<body style="background-color:black">
The background color of the page that uses above tag will change to black.
To change font color of a page use color property in body start tag.i.e.
<body style="color:green">
The text color of the page that uses above tag will change to green.
Example
<html><head>
<title>
Coloured page
</title>
</head>
<body style="background-color:#000080;color:#ffffff">
<h1 align="center">Coloured Page</h1>
<p>Background and font colours are navy and white respectively.</p>
</body>
</html>
Output
To view this page click here
