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.
In this post:
Required knowledge:
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 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!


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