A Beginner's Guide To HTML Color Codes & Naming Conventions

A Beginner's Guide To HTML Color Codes & Naming Conventions
Page content

Without color, the internet would be a very drab place… but how do you add it into your own web pages? This article outlines the very basics of color codes in HTML, including naming conventions and color generation.

RGB & Hex Triplets

All color consists of certain proportions of red, green and blue light—including that emitted by the computer. To tell the monitor which proportions of these colors for a given pixel, one assigns a RGB color value for the intensity of red, green and blue respectively between 0 and 255.

This is then converted into a hex triplet value, that is, a six digit, three byte sequence that consists of each of the three RGB values. Hexidecimal is in base 16, as opposed to our usual decimal base 10, so a conversion process is necessary.

To manually convert from the RGB value to the hex triplet, take that RGB value and divide by 16. The integer in the number represents the first digit: 0-9 is represented by the same numbers, while 10-15 are represented by A-F. The remainder provides the second hexadecimal digit in the same fashion.

An abbreviated form of the hex digit may also be used if each byte consists of a double digit. For instance, 1188FF could be shortened to 18F. However, this is primarily used for CSS, not HTML, so it is not recommended.

With this system, any color is possible: there are almost 17 million unique colors represented by this system, so there’s no shortage of flexibility!

Generating The Color

However, don’t worry about doing all that conversion and color selection by hand. There are innumerable web resources that can do this for you for free, if your own software doesn’t do it for you already. For instance, csolor wheels, where you just eyeball the color and select it with your mouse, can generate the precise hex digit color that you require with ease.

HTML Color Names

In addition to be referred to by hex color triplets, many common colors have actual English names as well. 16 colors, to be precise, all very basic, from aqua to yellow. These are the simplest of the simple, the standard building blocks that every computer and web browser can read, no matter what.

Web Safe Color

There are those computers that can only read 256 different colors—which might sound like a lot, until you consider the sheer variety of color in everyday (and web) life. A set of 216 colors, known as “web safe”, is also in common circulation. By using web safe, and only web safe colors, you are guaranteeing that the colors of the web page will be viewed the same by all users.

This is falling out of practical use, however, with the rise of increasingly color-sophisticated browsers, from cell phones to laptops. Within a few years, there’s a good chance that no color will not be considered truly “web safe”, for complete freedom of use in HTML color coding.

X11 Color Names

Individual web browsers also have various names for the different colors—and a lot more than those single 16. From Indian Red to Dark Slate Gray, a huge spectrum of colors is left at the disposal of web developers. While these originate from the X Window System, they were made standard with SVG 1.0, and since then have been used by all modern, mainstream browsers.