HTML5 website coding

Webpages are designed to be displayed on a screen and therefore use RGB format. Colors can be expressed in different ways in HTML, however the HEX RGB notation is the correct method.

In this post:

  1. Word! HTML color names
  2. HEX value colors
  3. Color pickers
  4. HTML 5

Colour is spelt color in HTML so the latter spelling will be used throughout this post.

1. Word! HTML color names

HTML provides a long list of color names in the form of words. The names of most common colors occur in the list and you are safe with: black, white, red, blue, green, yellow, magenta, gray, etc. Some of these color names appear on the NSC HTML Tag sheet.

There are many more exotic colors such as chartreuse, tomato, darksalmon & teal.

For the complete set of color names, visit https://www.w3schools.com/colors/colors_names.asp

2. HEX value colors

The correct way to express color in a webpage is by using HEX values. This is a notation for expressing a mix of red, green and blue. HEX notation always starts with a # (hashtag) followed by 6 characters. The first 2 characters represent red, the second 2 green and the third 2 blue.

For example, if you want to mix a pure red, you will take the full amount of red with no green and no blue: #FF0000

See the Pen HTML color basics by David Fox (@foxbeefly) on CodePen.

3. Color pickers

There are a multitude of online color pickers that allow you to select a color visually and then give you the HEX color values — start here: https://www.w3schools.com/colors/colors_picker.asp

Of course, you may have a color in a picture or a logo and you would like to reproduce that color in your webpage as a HEX value. Most image editing software includes an “eyedropper” feature which allows you to click on a color to select that color for editing. Microsoft PowerPoint has this feature. This allows you to select a color and have the RGB color HEX made visible.

4. HTML5

You may even want to include a color picker in your webpage. HTML5 introduced the color value for the type attribute for the input tag to allow for just that!

<input type="color">

By MisterFoxOnline

CAT Educator

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.