HTML TUTORIAL

How To Embed Colors on Web Documents Using HTML

HTML COLORS
Written by ikenna

As we move deep into studying about HTML, we thought we should shed more light on how to use colors when customizing the web document using HTML. In our previous article we discussed about HTML background colors and how to add them and this prompted us on the need to shed more light on colors. If you haven’t gone through the previous tutorial, you can do so using the link below

READ PREVIOUS TUTORIAL: Learn How To Add Background Colors To Web Documents Using HTML

Introduction to Colors in HTML

HTML gives us the opportunity to use colors when styling our web document. colors are very important features because they add beauty to our web pages. There are different ways of adding colors to our web document but before then, lets look at the color attributes needed for adding colors to web pages

The Body Tag Color Attributes

There are different attributes that are used on the html body tags and they include:

AttributeDescription
bgcolorUsed to set background colors
textUsed to set colors to text
linkUsed to set colors to links
alinkUsed to set colors to active links
vlinkUsed to set colors to visited links

Methods used in setting colors to web documents

There are different methods we can use to set colors to html documents and they include:

  • Color names
  • Hex codes – using 6 digit hex codes
  • Color decimal – using rgb property

Using color names

There are over 200 recognized colors by the web browsers but there are about 16 color names popular known on html. The below list shows the list of 16 colors we have on html:

The W3C Standard Colors

BlackblueRedgreen
GrayRaysLimeWhite
AquaMaroonFuchsiaTeal
OliveNavyPurpleYellow

Example on using the color names

<!DOCTYPE html>
<html>

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

COLORS USING THE HEX CODES

Another method of adding colors to web pages is with the use of hex codes also known as hexadecimal codes. The hexadecimal codes are 6 digit codes starting with a “#” sign and followed by 6 digits. The 1st two numbers (RR) in the codes represent the red value, the 2nd set of two numbers (GG) represent the green color value then the last two (BB) represent the blue color value. Below are list of HEX Codes you can find in HTML

HEX CODECOLOR
#000000WHITE
#0000FFBLUE
#FF0000RED
#00FF00GREEN
#FFFF00YELLOW
#00FFFFAQUA
#FFFFFFWHITE
#C0C0C0

Example using HEX CODES

<!DOCTYPE html>
<html>

   <head>
      <title>HTML COLOR ILLUSTRATION</title>
   </head >
	
   <body bgcolor="#FFFFFF">
   
   </body>
   
</html>

Inserting Colors to HTML Pages using RGB Values

Another interesting way of adding colors to html pages is using RGB values. The RGB codes consist of three sets of values placed in a bracket and starting with RGB before the bracket as shown below. The default RGB value is RGB(0,0,0) and RGB is the short form for red, green and blue. The rgb takes 3 values from 0 to 255. Below are the list of color values using RGB

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 RGB COLOR ILLUSTRATION</title>
   </head >
	
   <body bgcolor="rgb(255,255,0)">
      
     
   </body>
   
</html>

The above article explains how to add colors to web pages using different coloring techniques in HTML. If you have questions regarding this lecture, kindly let us know using the comment section below

NEXT TUTORIAL: USING STYLESHEET WITH HTML

About the author

ikenna

Leave a Comment