Colors and HTML

In this article, you will learn how to create colors in RGB notation with values ​​in hexadecimal, the most common way to express a color in the HTML language. We explain the correct use of colors in HTML.

In the composition of websites, colors play a very important role. Using a defined color palette usually helps the consistency of a design and convey certain sensations to the user. As part of our learning HTML we have to stop to understand how colors are expressed in the language.

HTML uses a specific notation to specify a color, made up of three “RGB” values: Red, Green, Blue. Red, Green and Blue. In other words, to get any color we will mix quantities of each of those colors. RGB is the model used to create colors for monitors and televisions, so it’s a great way to express color on a digital medium like the web.

RBG values ​​in HTML are given in hexadecimal numbering, base 16. (The digits can grow up to 16. Since there aren’t that many numeric digits, the letters A through F are used.)

To get a color, we’ll mix values ​​by assigning two digits to each RBG value. Like this: “#RRGGBB”

As you’ve noticed, we also put a hash “#” at the beginning, to indicate that that string is a color value in hexadecimal.

Later in the article we will see examples in a large palette, with its values ​​in RGB. However examples could be #000000 for black, #FFFFFF for white, #660000 would be a dark red or #FF0000 would be a bright red.

Note: You will have been able to observe on some occasion that colors can also be expressed with some words, in fact in the article about it we already discussed it. However, it is much more common to write in RGB, because it is more versatile and we can more easily achieve any desired hue.

Color attributes in HTML tags

In HTML there are numerous tags that support color attributes. So that you have a first reference, this is how the font would be changed to write in red:

Red

As you can see, we give the color attribute an RGB value in hexadecimal format. The # character is placed at the beginning of the string.

Note: Again we have to warn about the need to express everything that is styled by . In HTML we must focus on what it is to write the content and in CSS on applying the style. Of course, color is more styling than content, so it should go in the CSS. This is why the entire FONT tag has been deprecated, because it only served us to apply styling. For your peace of mind, in CSS colors can be expressed in the same way as in HTML, so you won’t have to learn anything new.

To give another example, the TABLE tag allows the background color of the table to be expressed. We’ll cover it later, but you get it with the bgcolor attribute.

Combine other colors

At first it may seem difficult to create color combinations with hexadecimal values, but with practice we will get used to it and we will even be able to think of a color and come up with an approximate RGB value. It will be good for us to keep in mind the color wheel:

But in the end, what is easiest to use is a graphic design program, which has color selectors that usually give us RGB values ​​so that we can use them in any program. Some editors come with built-in “color pickers” to make this task easier, without having to switch programs. Most publishers can additionally install plugins to implement color pickers, as this is a very common request from developers.

For example, other RGB colors can be combined like this. Although at the end of this article you have a complete color table.

safe colors

We must be prepared to receive visits from all types of devices and we must offer all of them an adequate user experience. As far as colors are concerned, we cannot know a priori what type of screen the person visiting us will have and the color resolution. That is why a good idea is to use those colors considered safe: “Safe colors”, colors compatible with all systems.

Note: Today the need to use safe colors (those that will look good on all monitors, regardless of their color palette), is not as great as it was years ago, because technology has evolved a lot and it is rare to find a monitor that only support 256 colors. However, it is knowledge that is interesting due to the fact that it highlights the universal nature of the web and the need to build pages that are capable of adapting to each medium where it will be consulted. In this HTML manual we are not going to go into this kind of detail, but if you are interested you should read the .

The way to achieve safe colors is by limiting our colors to those that can be achieved using the following values:

It is interesting to note that when we use safe colors, we can summarize the RGB notation by using three characters instead of 6. For example, #000 equals #000000. Or #ABC equals #AABBCC.

Using all the combinations of “safe colors”, we get the following color palette:

Note for curiosity: This was the first article published in .com. Although revised in 2016, its original publication is from 1999.