The Colors in HTML and CSS

The video monitors work with the color system RGB(Red-Green-Blue), where values between 0 and 255 of red, green, and blue are combined to form all the different shades of colors on the screen. By example, the color yellow is comprised of 100% red, 100% of green and 0% blue, or 255,255,0. However, when we work with HTML or CSS, the colors are used in the hexadecimal system (with base-16). So, you probably know better the yellow as #FFFF00.

In the past, the monitors supported only 256 colors, limited the amount of tones available. Today, modern display work with millions of colors, but even so there are still the safe colors for the web.

Web safe, as they are also called, are the colors formed by the combination of the 3 colors RGB in the intensities 0% (0), 20% (51), 40% (102), 60% (153), 80% (204) and 100% (255) or, in hexadecimal, 00, 33, 66, 99, CC and FF, respectively. In my portfolio you can find a table with all the colors to the web safe as possible, and their codes in hexadecimal.

And the other colors? As I said, the monitors now work with millions color. In some cases, we want to use other colors that are not in the vane standard of our editor images in RGB and that is also not they are part of the palette, Web Safe. How to use this color?

Another interesting way is to learn how to do the calculation to convert RGB to hex. It is simple and can be done, for example, with the Windows Calculator. If your calculator only has the basic operations in the “View” menu choice “Scientific”.

As an example, we have, in RGB, the color 227,95,54. To turn her on in hex, just enter each value in the calculator and click on the button Hex:

Thus, 227 in hexadecimal is E3.

Click in Dec to return to decimal system and retry the operation with the other two values. For 95, we will be 5F, and 54 we have 36 in hexa. So, what RGB is (227,95,54) becomes in #E35F36, which corresponds this color.

Even though some sites are best with special colors, whenever can try to use colors Web Safe: as I always say, it is worth to take some care with the accessibility. Do not forget to also some users have special needs and can only, for example, to see colors in high contrast. In this sense, a tip is to take a print screen of your work, turn it into gray scale of grey in your image editor and check if the texts and images continue visible in this condition.

The Colors in HTML and CSS 1

The Colors in HTML and CSS
Rate this post

You may also like...