fbpx
April 2, 2020
html colors

Tutorial #19 Learn About HTML Colors and How to Use Them

Hello! Welcome back. In this tutorial we will be looking at HTML colors, their codes and how you can use them. HTML gives us the opportunity to add colors to our web page using codes and these codes are sometimes called hex codes. Colors are used to beautify HTML documents. You can add HTML color to the body of your web document to change the color from the default white background to any color of your choice.

Read Previous tutorial on: Tutorial #18 Learn How to Add HTML Background Colors to web Document

Body Tag Color Attributes


There are different attributes used to add colors to the body of HTML documents are they are listed below:

Attribute Description
bgcolor Used to set colors for background
text Used to set colors for text
link Used to set colors for links
alink Used to set colors for active links
vlink Used to set colors for visited links

Methods for setting colors in HTML

There are different methods of setting colors in HTML and they include:

  • Color names – colors are specified using color names e.g black
  • Hex codes – colors are specified using 6 digit hex codes
  • Color decimal – colors are specified using rgb property

Now we will be looking at HTML coloring using color names.

HTML Color Names

There are over 200 colors recognized by web browsers but we have 16 simple color names that are validated on HTML. The list of colors are shown below and you can use the names directly on your HTML web document using the colors attribute.

W3C Standard 16 Colors

Black blue Red green
Gray Rays Lime White
Aqua Maroon Fuchsia Teal
Olive Navy Purple Yellow

Example using color names

<!DOCTYPE html>
<html>

   <head>
      <title>HTML FRAME ILLUSTRATION</title>
   </head >
	
   <body bgcolor="red">
      
   </body>
   
</html>

In this example the background color was set to red using the bgcolor HTML attribute

HTML Colors using Hex Codes

In the previous lesson we looked at HTML coloring using color names. In this section we will be looking at same coloring but this time we will be making use of HEX codes.

Hex codes also known as hexa decimal code is a 6 digit representation of colors used for coloring in HTML. The hex codes always starts with a # sign followed by 6 digit codes. The first two numbers (RR) in the codes represent red value, the middle two numbers (GG) represent green color then the last two (BB) represent blue color. Below are list of HEX Codes you can find in HTML

HEX CODE COLOR
#000000
#0000FF
#FF0000
#00FF00
#FFFF00
#00FFFF
#FFFFFF
#C0C0C0

Example using HEX CODES

<!DOCTYPE html>
<html>

   <head>
      <title>HTML FRAME ILLUSTRATION</title>
   </head >
	
   <body bgcolor="#000000">
      



   </body>
   
</html>

Adding Colors to HTML using RGB Values

The RGB mode of coloring in HTML involves using rgb values in the format rgd(0,0,0). this is the default format that shows up a white color. The rgb takes in three values from 0 to 255. Below are list of colors in HTML using rgb values . Most browsers do not support the rgb code property so its preferable not use it.

Example of RGB color and values

color rgb value
rgb(0,0,0)
rgb(0,255,255)
rgb(0,0,255)
rgb(0,255,0)
rgb(255,255,0)
rgb(255,0,0)
rgb(255,0,255)
rgb(255,255,255)
rgb(192,192,192)

Example using RGB color values

<!DOCTYPE html>
<html>

   <head>
      <title>HTML FRAME ILLUSTRATION</title>
   </head >
	
   <body bgcolor="rgb(192,192,192)">
      
      



   </body>
   
</html>

Conclusion

Now you understand the basics of HTML colors and you are really doing great. Lets move on to the next tutorial on HTML FONTS

Leave a Reply

Your email address will not be published. Required fields are marked *