How to Add Color to an HTML Web Page: Elements of Color

Quick Take

In this guide, we take a look at how to add color to an HTML web page. We cover all the basics of applying color to a web page and its various elements , such as text, tables, input buttons, and so forth. We also give tips on finding HTML color codes.

On this page

Working with Colors in HTML

HTML is the basic language used to design web pages. Whether you develop a web site in PHP or ASP.NET, it all boils down to HTML when the browser actually renders the page. HTML, along with CSS and JavaScript, are the most basic and necessary tools to shape up the look and feel of a web page.

When dealing with the look and feel of a web page, most of the times all we need is HTML and CSS (even if the site is being developed in PHP, Java or ASP.net). Setting up a background image or color, setting up a particular font and the font style, and so on can be (and is done) with HTML and CSS. In this guide, we focus on how to add colors to different elements in an HTML page.

Adding Color to the Page Background

Let’s start with the background of the web page. Adding color to the background of a page is very easy with HTML. To add color to the page background we use the HTML tag “bgcolor”. For example, the HTML code will set the background color for the webpage as green. Alternatively you can also use the code where instead of defining the color green as we know it, we have defined it in its hexadecimal equivalent also widely known as the HTML color code .

Adding Color to Text

While adding color to text is as easy as setting up the “color” tag, you may want to make use of CSS to define a CSS class if the text style you are using is going to be used more than just once. This way, it will save you some time. So, you can just define a style in your CSS, such as:

.style1 {

color: #FF0000;

}

And then apply it in your HTML with the following code.

Example Text

Adding Background (Highlight) Color to Text

If you want to highlight any text by applying a background color to it, you can do so by using the background-color tag in a font style. For example,

Some sample text

Will output “Some sample text” with an aqua background around “text”. You can also use HTML color codes instead of the word “aqua” to have more control over the look of your final text.

Adding Color to Tables

This code will output a table with a blue background and a border of 1px thickness.

In a similar way, using CSS you can add color to other elements like input buttons, text area, etc. For example, the following CSS, if applied to an input button, will result in an input button with white text and red background.

.style1 {

color: white;

background-color: red;

}

How to Get HTML Color Codes

HTML and CSS make use of a color code to define a color. We can always define primary colors like red, blue etc., literally. But what if we want to define a particular shade of red or green or may be yellow. Well, color code is our preferred option. Let’s see how to find out the color code of a particular color**.**

Color Codes with Adobe Photoshop

Perhaps the easiest way to find out the HTML color code is to use Adobe Photoshop if you have access to it. In Photoshop all you need to do is to bring up the color palette and select the color you need and then look for its HTML equivalent. Alternatively, if you don’t have Photoshop, you can use one of several free web color matching tools .

Color Codes using Expression Web

If you use Expression Web to author webpages, then you have access to an easy way to find the HTML equivalent of a color. While applying color to any page background or text, just bring up the “More Colors” dialog and select the color you need. The HTML color code will be displayed at the top of the dialog.

Filed under

Web development Internet

How to Add Color to an HTML Web Page: Elements of Color

Working with Colors in HTML

More from Tech