Color Generator Codes HTML

Ryan Dube
Color Generator Codes HTML
HTML Color Codes

When you are hand coding the design of your web page, there are many times when you'll need color generator codes for HTML features of your page. These features include font, background, shading and much more.

Finding Color Generator Codes for HTML Elements

It's very simple to define simple colors in your HTML code by using the regular English words for those colors like "blue", "green" or "red," it isn't quite as simple when you want to use non-standard colors. Thanks to HEX numeric codes, you have a very wide variety of colors to choose from for your website. In order to determine the correct color code for the color you want, it's best to use a color generator for codes in HTML HEX format which you can simply cut and paste into your web page script.

How and Where to Use Color Codes

When you design your website layout, there are many instances where you can insert the codes from the color generator in order to define the exact color that you want. The following examples are a few of the most common ways that you can use these color codes.

Modifying Font Color

For many years, web designers used to common <FONT COLOR> code to define the color of the font within a web page. However, more common techniques today involve the use of the newer "span" tag as shown here.

<p>If you want to <span style="color:#2F1BC8">change the font color</span>, just use the right color code. <span style="background-color:yellow">different background color</span></p>

The code above uses the Hex code for a very specific shade of blue that's not too dark and not too bright. By using the exact code for a color, you don't have to worry about whether defining the color as "blue" will be the correct shade of blue that you want. Using the color generator codes for HTML font definitions will produce the exact color that you're looking for.

Defining Background Color

Much like fonts, the technique for defining background color has changed with the times. Previously, web designers would make use of the bgcolor attribute for the BODY tag in order to define the background color for the web page.

<p><BODY bgcolor="#F0C4EF" text="black" link="blue"> ...the body of the page goes here. </BODY> </p>

The Hex code used in the example above provides the web page with a very light purple background. These days, web designers prefer making use of the style sheet approach, as shown here.

<STYLE type="text/css"> BODY { background: #F0C4EF; color: black} A:link { color: blue } </STYLE>

There are a number of other attributes you can use to define how different elements of the page appear, so make sure that you understand CSS codes and how those attributes work so that you can better customize the appearance of your page.

Finding Color Generators for HTML HEX Codes

The easiest way to choose the exact shade of color that you want for your font, background or any other element of your website is to use online code generators. The following list is a few of the best online generators that you can use any time to determine the correct hex code for your HTML script.

  • Free-Webmaster-Tools provides this very useful tool that lets you either choose from a long list of common colors, or select the shade of color that you want from the hue-saturation map at the bottom of the page. You can see what the color looks like as the web page background by clicking on "Test" or "Display Color."
  • Color Schemer is actually a PC application download, but at this link the color scheme feature is provided online. Unlike most other color code generators, this online application lets you find just the right shade by clicking "Lighten Scheme" or "Darken Scheme" until the color is exactly what you're looking for.
  • Hypergurl provides this very useful color generator that provides a nice display so you can see how the background, text and link text colors all look together.
  • 2 Create a Website provides this very useful tool that includes a hue selector tool and saturation grid as well as a color wheel at the bottom that helps you come up with a good looking color scheme for your site.

Colors Make a Website

Countless psychological studies prove that colors induce emotions in humans. It should come as no surprise that colors can greatly influence how people react to your website and whether they like it or not. So, make sure to consider your website colors carefully when you're starting the design phase of your new web page.

Was this page useful?
Color Generator Codes HTML