HTML Lesson 13: Colors

1
29

Introduction to HTML Colors

Welcome to another exciting lesson of HTML. In this lesson you will learn how to add colors in your webpage. Colors has very significance importance in website. You should choose the colors which perfectly reflect ideology of your website.

[tooltip]As a TIP try to use light colors because it gives professional look to your website.[/tooltip]

While defining colors in HTML is very easy. The only thing you have to remember is the color attributes. Throughout this lesson you will learn in detail about the different ways of defining colors in HTML and which is the best approach among them. Let’s get started. Before that checkout the following demonstration in which we give color to the text.

Source Code Output
WikiProgramming HTML Color Tutorial

Background color

So let’s learn about the background color. In HTML it is very simple to color the background. You only need to know an attribute which is bgcolor. Here is the simple demonstration of it

Source Code Output
WikiProgramming HTML Color Tutorial

Color codes

As you have learned now that in HTML you can define color for text and background. In above examples we have only used name of color. However, there are total three different ways to define HTML color codes. Let’s study them one by one.

 Name – Color Codes

The first way to define the color code is by name. In HTML, you can simply use the color name to define your color. In the above example we have used the color name but only one color i.e. grey. So let’s give you an demonstration using differnet color to give you better understanding that HTML is very versatile in it.

Source Code Output
WikiProgramming HTML Color Tutorial

RGB – Color Code

RGB mean Red(r), Green(g) and Blue(b). Always remember that there are 255 different combination of colors. Every color is comprised of by mixing these colors. You can define any number from 0 to 255. However, we are not going to teach how to crate these combinations because these are very complicated and can detract us from our main objective. You can get the color codes from any photoeditor software. Here you will surely get the understanding of how to define them in your HTML code. Let’s checkout the following demonstration.

Source Code Output
White Color
Light Grey Color
Black Color

You can see that every color is a mixture of three colors whose values are defined from 0 to 255.

[tooltip ]Normally, it is not recommended to use the rgb color in HTML codes. Because, browser are not fully compatible to understand rgb color.[/tooltip]

Hex Code – Color Code

Hexadecimal or Hex color code are most used color code type. It is highly recommended to define colors in hex codes. These codes are complex to understand but once you get grip on it, you can easily made any RGB color’s hex code. Here we will teach you how to calculate it. But first let’s have a look a simple demonstration of it.

Source Code Output
WikiProgramming HTML Color Tutorial

Calculate Hexadecimal code

Before calculating Hex code of RGB colors, first you should understand the format. Hex Codes are 6 digits and it composed of three components red, green and blue. Two digits are for each color i.e. first two (00) for red value, next two (00) define green value and last two (00) defines blue value. Its formula is as follow:

To calculate the Hex color of Navy Blue 000080, lets divide it into three component Red: 00 Green: 00 Blue: 80

Some color codes contained Alphabetic letters for example Lime Color is #00FF00. Following is the chart which will guide you to convert numbers into Alphabetic letters.

Decimal 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Hexadecimal 0 1 2 3 4 5 6 7 8 9 A B C D E F

With the help of this table you can easily convert the numbers into alphabets in HTML.

To calculate the Hex color of Lime #00FF00, lets divide it into three component Red: 00 Green: FF Blue: 00

By following above formula you can easily calculate the Hex Color. However, practice is must!

Summary

  • Use color attribute to define Colors in HTML.
  • Colors can be defined by name, RGB and Hex code.

Next Lesson

Let’s move toward another exciting lesson of HTML Tutorial. In the next lesson, we will learn about HTML Forms.

1 COMMENT

  1. […] have learned in detail about the Colors in HTML and Text lesson of CSS. However, here is a brief introduction about […]

Leave a Reply