HEX color coding

In graphics editors and website code, colors are often denoted by something like #ffd600, #с158f5, or #fff. This color description format is called HEX.

With just 6 characters, all the colors you see on websites are coded. Accordingly, to all web designers and designers, that create interfaces, it doesn’t hurt to understand exactly how this coding is arranged and even to know some typical combinations. We will talk about all this in this article! And let’s start by finding out what your HEX actually means.

What is HEX

HEX is the first letter of the English word hexadecimal, which comes from the Greek έξ (hex), meaning six, and the fraction “-decimal”, which comes from the Latin word “tenth”. That is, “hexadecimal”. So HEX color coding is nothing else, as writing a number in the hexadecimal number system. Sound scary? Don’t be afraid, now we will put everything on the shelves.

Computing systems are a kind of mathematical languages. For example, there is one subject that will be called differently in different languages. For example, the same “egg” is called “egg” in English and “œuf” in French.

Numeral systems work in a similar way - they are simply different ways of describing numbers. Such systems throughout the history of mankind many were created: the Egyptian number system, Arabic, Old Slavic, binary, octal, decimal, etc.

By the way, we are most familiar with the decimal system. Any number can be written in it using ten digits, from 0 to 9. You have probably heard that there is also a binary system (it is also called “binary”). Any number can only be written in it with two symbols - zero and one.

Well, in the hexadecimal system, as you already guessed, there are 16 digits. The first ones are the same, from 0 to 9. And then they are used the first 6 letters of the Latin alphabet: A, B, C, D, E, F. That is, the number 10 in the hexadecimal system is written as A, 11 — B, 15 — F, 16 — 10. And so on.

How HEX encoding is arranged

The more signs in the numbering system, the more compact the number is.

For example, to write the number 15, in the decimal system you need 2 digits (ones and tens), in binary - 4 (1111), and in hexadecimal - only one (F).

And for large numbers, the savings are even more noticeable.

If you understand, transferring numbers from one system to another is not difficult at all. But it is not necessary to do it manually — in there are many online calculators on the Internet, with which it is much easier to do this.

But in fact, with the help of number systems, you can describe (that is, “encode”) not only numbers, but also … Actually, almost anything. Including colors. Let’s find out exactly how.

HEX color coding

Before explaining how colors are coded in HEX, it should be clarified that this coding is based on the RGB model.

So, if you already understand how the RGB model works, it will be easy for you to understand the principle of HEX encoding. In detail we are about it was told in the article “RGB color model”.

And in this article, we will simply remind you that in the RGB model, colors are obtained by mixing three main colors — red, green and blue. Accordingly, each color can be described by three numbers. Basically, each of these numbers will describe brightness of each of the primary colors. In the decimal system, brightness has 256 gradations — from 0 to 255. Here 0 is is the weakest brightness, and 255 is the strongest. If the brightness on all three scales is minimal (0, 0, 0), black is obtained color. If the maximum (255, 255, 255) is white.

Let’s use the same calculator to convert them to the hexadecimal system.

255 = ff

So, in the hexadecimal system (255, 255, 255) will look like (ff,ff,ff). Black will be (00,00,00) and our burgundy will be #7C1A76. And in the HEX encoding format, round brackets and commas are not used. Instead, write down 6 characters consecutively and add them in front grid

It turns out such a compact record: #ffffff.

This is the HEX code of white color.

Compact! Only 6 characters instead of nine. But it can be even more compact. In some cases, if one parameter is met two identical letters, such as in white, then they are shortened to one letter in one color #ffffff → #fff

Until the beginning of the nineties, such coding was almost never used. It became widespread with the advent of websites. Actually, because of this, hex-encoded colors are often called web colors because of this.

Some typical colors

For confirmation, here are some more examples of writing colors in decimal and hexadecimal systems.

Using HEX in practice

If it’s all clear to you in general, but you’re still a little scared that you won’t be able to remember all these codes, we have good news- it is not necessary to do this.

Recording in the HEX encoding format exists in all editors — in Photoshop, Illustrator, and Figma. And now you know what the numbers in this code mean.