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.

Photo courtesy of olivia mew(CC No Derivatives)

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.

Photo courtesy of olivia mew(CC No Derivatives)

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.

Photo courtesy of olivia mew(CC No Derivatives)

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).

Photo courtesy of olivia mew(CC No Derivatives)

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

Photo courtesy of olivia mew(CC No Derivatives)

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.

Photo courtesy of olivia mew(CC No Derivatives)

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.

Photo courtesy of olivia mew(CC No Derivatives)

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.

Photo courtesy of olivia mew(CC No Derivatives)

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.

Source — cases.media

5 trends in graphic design, which should be abandoned in 2021

Why it is desirable to avoid - low functionality, not suitable for inclusive products, can not be used in bright sunlight, it is difficult to implement at the programming level.

TOP-10 basic rules of composition in web design

Composition sets the arrangement of materials in a logical order, in which the design becomes solid and acquires an inner meaning.

10 principles of prototyping products and services

It is difficult to show the value of prototyping if you do not know what you want to test. "Create a prototype interface to show the approximate position of the blocs "- a dub ...

10 Best UI Design Tools in 2022

The best tools for building user interfaces, these tools help you do it faster and more efficiently, eliminating the need to reinvent the wheel over and over again.

5 design systems that a UX designer should know in 2022

Color has existed since the beginning of the universe and is a part of our daily lives. But how much do we know about color? Let's dive a little further into the interesting w ...