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.

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

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

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.

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.

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.