HTML Colors for Web Pages - Hexadecimal Code in RGB

All colors that you can see on your monitor are formed from to join certain proportions of three primary colors: red, green and blue.

HTML Colors for Web Pages - Hexadecimal Code in RGB | Learn HTML | All colors that you can see on your monitor are formed from to join certain proportions of three primary colors: red, green and blue

This is a good time to see how colors are defined in HTML.

In our previous example we have set a yellow background color.

We can set the background colors with your name in English, for example: red, pink, skyblue or light green. This is valid in most cases.

In fact, there is a sufficient variety of colors to satisfy all our needs.

But there is an alternative way to set the color. For this we need to know how colors are created on the monitor.

To define any color on the monitor is made from a combination of three colors: red, green and blue.

All the colors you can see on your monitor are formed by joining certain proportions of these three colors.

For this reason we call them primary colors (or also basic colors).

And if you are thinking that the school told us the "teacher" that the primary colors were magenta, cyan and yellow, I will say yes, but no. Clarify it.

Magenta, cyan and yellow are primary colors of ink. From these three the other colors are formed in ink (to print).

For example, green is formed by blue and yellow. If you mix the three primary colors ink, you will get black. For this reason, the mixture of these three colors-ink is known as subtractive synthesis.

However, your computer's monitor emits light. And the colors of light, or light colors, are based on three other primary colors that are, as we have said, red, green and blue. The mixing of these three colors in the largest possible amount results in white.

For this reason it is said that light-colors are mixed by additive synthesis. The scheme of this is seen in the following figure:

Additive synthesis

As we said, we are going to use light colors, since, in short, light is what the monitor emits. Any color that we need to create is formed by mixing different proportions of red, green and blue.

We can indicate to our HTML code any color in which each of the primary colors receives a value between 0 and 255. This makes a total of 256 possible proportions for each of three primary colors.

That said, maybe it does not impress too much, until one thinks that the resulting number of possible combinations is 256 * 256 * 256 = 16,777,216 possible colors.

Thus, the yellow would be formed by the maximum possible of red, the maximum possible of green and nothing of blue, that is to say, would be the combination 255.255.0

The values of the primary colors will always be expressed in that order: first, the proportion of red, then that of green and finally that of blue. Therefore, this color format is known as RGB (Red, Green, Blue).

In many books and programs you will see that it refers to this format with the translated name RVA (Red, Green, Blue).

However, it is not so easy. The creators of HTML decided that the time had come to complicate our lives a little and they have made the language in such a way that the values of the three primary colors have to be expressed in hexadecimal and with two digits.

As you know, the hexadecimal numbering allows you to use the letters from A to F, assigning the numerical values from 10 to 15 correspondingly.

Thus, decimal 0 would be 00 hexadecimal, decimal 15 would be 0F in hexadecimal, decimal 16 would be 10 in hexadecimal, decimal 255 would be FF in hexadecimal, and so on.

This, in fact, is given by a series of rules and fundamentals of numbering that were established in the early days of computing (if, when computers went to valves) and that are still valid today for having proven their efficiency in many land.

Therefore, the yellow color, which we defined as 255 of red, 255 of green and 0 of blue, expressed in hexadecimal would be FFFF00.

The first two digits express the proportion of red (FF = 255), the next two digits of green and the last two digits of blue. In addition HTML asks us to add, in front of the combination of colors, the sign # (popularly known as pillow or cockroach).

Therefore the following sentence:

<body bgcolor=”yellow”>

It would be equivalent to:

<body bgcolor=”#FFFF00”>

This same system that we have learned to set the background color will help us to set the colors of text and other elements of the web page.

There are what are called safe colors for the web. They are a palette of 216 possible combinations.

Web safe colors are those that are displayed exactly the same on a PC platform as on a Macintosh, either with an Internet Explorer browser or with Firefox.

Once again, we must bear in mind that we are working for the network. Our page can be seen by users with different platforms and should be able to see it the same.

The safe colors for the web are those that are formed by any combination of the values 00, 33, 66, 99, CC or FF. So, the following colors are examples of safe colors for the web:

  • #FF66CC
  • #00CC99
  • #FF3366

And, in general, any that meets the condition that the three values (the red, the green and the blue ) respond to one of the specified values.

We must also bear in mind that the text color must contrast with the background color, in such a way that the reading of the page is comfortable for the user. Do not forget that, on its own, reading about the monitor is much more uncomfortable than reading on paper.

If in addition the text just stands out on the background, we will be inviting the user to go to another page. In general, we will choose pastel tones or muted tones for the background.

The garish colors are used almost exclusively in pages of games, modern music or erotic. The combination of black text on a white background usually gives good results many times.

The value that is passed to an attribute can go indistinctly between quotes or without them. For example, the two sentences that appear below are equivalent:

<body bgcolor=”#FFFF00”>
<body bgcolor=#FFFF00>

However, if we put quotation marks at the beginning of the value, we must put them at the end, and vice versa. For example, the following statements would not work properly.

<body bgcolor=”#FFFF00>
<body bgcolor=#FFFF00”>

The hexadecimal values of the colors will be represented in uppercase letters

Actually, it would work the same if we put them in lowercase. We implemented capitals for these values for a matter of code readability.

Now that you have read this article you can understand the following joke

Joke combination colors Web

Did you like it or was it useful?

Help us share it in Social Networks

Professor at the University of Guadalajara

Hugo Delgado Desarrollador y Diseñador Web en Puerto Vallarta

Professional in Web Development and SEO Positioning for more than 10 continuous years.
We have more than 200 certificates and recognitions in the Academic and Professional trajectory, including diploma certificates certified by Google.


Not finding what you need?

Use our internal search to discover more information
Sponsored content:

Leave your Comment


Your business can also appear here. More information