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

Web pages 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.

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.

A comparison between RGB and CMYK colour modes.
A comparison between RGB and CMYK colour modes.

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 on your webpage. HTML5 introduced the color value for the type attribute for the input tag to allow for just that!

The following line of HTML:

<input type="color">

results in:

Palettes

If you are looking for a color scheme to wow your audience, look for one of the many resources online. I love the palettes created by @awsmcolor on Instagram; just look at the following 2 examples!

Complimentary colors (palette from @awsmcolor on Instagram).
Complimentary colors (Credit: @awsmcolor on Instagram).
Complimentary colors (palette from @awsmcolor on Instagram).
Complimentary colors (Credit: @awsmcolor on Instagram).

References:

  1. Colors Tutorial. (2022). Retrieved 16 November 2022, from https://www.w3schools.com/colors/default.asp

By MisterFoxOnline

Mister Fox AKA @MisterFoxOnline is an ICT, IT and CAT Teacher who has just finished training as a Young Engineers instructor. He has a passion for technology and loves to find solutions to problems using the skills he has learned in the course of his IT career.

Leave a Reply

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