english
spanish
chinese

One-click HTML Background Color

How to use this tool? How to apply this style sheet to my web page? Change the background color of your WP theme Bookmark and Share

This is the first paragraphs of the text. You can change the color of this text, using the second input field and HTML color codes picker. You can see how the text is changing while you are dragging the selection tool around. Cool, isn't it? This tool allows you to select the right combination of background color and text color, to produce good contrast and readability. There are also some links, which you can change using the third input filed and color picker. While done and satisfied with the result, you can download the prepared CSS style sheet and later modify it or just copy and paste the selected HTML color codes. If you like our tool, please leave a feedback. We appreciate every comment.
This is a text block, completely filled with pure white colored text. You can not change the color of this block, it is here for you to see the contrast between background and the white text. This can be useful because if you can read this, that means that the background color of your HTML is not too bright.
Another, I swear that the last, dummy text block. It is very similar to the one on the left, except that the color of this text is not pure white, but pure black. Why this is good you can derive from the white-colored text (if you can read it). Also check our tutorial how to change background color of Wordpress themes.

How to use and apply HTML background colors to my web page?

There are many ways you can apply the background color to your website element. The easiest one is to simply add the "style" parameter with defined hex HTML color code you select with color picker.

This will fill the whole background of your HTML web page with corresponding color to HTML color code #a125b8:

This will fill the background color of the div element with corresponding color to HTML color code #a125b8:

And this will fill the background color of the span element with corresponding color to HTML color code #a125b8:

Very similar you can also change the text color of the HTML element. You just need to add one more parameter:

Note that you need to start the color code with the sharp character (#). For example, you have selected HTML color code 6fa097 and for applying this one to the HTML tag of your choise you need to add the sharp at the beginning like this: #6fa097.

Commands between the quotation marks are called CSS parameters. We know some dozen of CSS parameters, but for simple work you need to know just the basics.

CSS files and HTML

We have just come across with "background-color" and "color" CSS parameters. The first tells the browser what is the color of the background, and the second tells the color of the text. You can apply this to any HTML tag you like. And further on, it's not necessary that you type your styles directly into HTML document. You can put all your styles in separate CSS file and include that file in header of your document. Name your new file "style.css" and put it into the same folder as your HTML document. Then add the following line into the head section of your HTML document (that is between <head> and </head> HTML tags):

On this page you can define HTML background color, text color and link color and simply download the CSS style with just one click! Yes, it's that simple. Then you include this style sheet to your document and you are done!

How to use HTML background color?

This online tool has been created for web designers and webmasters who need to change the background color of their websites.

You can change the background of this website to see in real-time how the site and the text look like. If you click in the first input field a simple color picker appears and you can drag and select any color you like.

The HTML color code of the background color will be automatically refreshed every time you change the background color and when you are satisfied with the result you can simply copy the color code from the input filed.

You can do the same way with text color and link color. You will see that the text in the widest column will start changing its color when you start dragging the color picker, just as the web page.

This way you can create the initial CSS style sheet for your new web page or just select the best HTML background color for your old page which needs some fresh look.

Currently you can select only colors, other CSS properties are added automatically, to make your page looks like this one. Nevertheless, you can always remove predefined values and replace it with your owns! CSS rules are practically limitless.


arrow up Use Cupon Code »HTMLCOLORS« for one month free hosting! arrow up