Text Link

Basics

A collection of insightful tips and guides to help you become a great designer.

<path d="M6.6729 18.3516C8.50093 18.3516 9.79065 18.989 10.3738 19.3626C10.5757 19.4725 11.0804 19.7802 11.215 19.8352V2.38462C10.4075 1.04396 8.23178 0 6.03364 0C3.06168 0 0.672897 1.62637 0 2.9011V18.5714C0.011215 19.5824 0.594392 20 1.30093 20C1.81682 20 2.13084 19.8352 2.48972 19.5714C3.16262 19.044 4.71028 18.3516 6.6729 18.3516ZM17.3495 18.3516C19.3009 18.3516 20.8486 19.044 21.5215 19.5714C21.8692 19.8242 22.1944 20 22.6991 20C23.4056 20 24 19.5824 24 18.5824V2.9011C23.3383 1.62637 20.9607 0 17.9888 0C15.7794 0 13.615 1.04396 12.7963 2.38462V19.8462C12.9308 19.8022 13.4355 19.4835 13.6486 19.3626C14.2206 18.989 15.5103 18.3516 17.3495 18.3516Z" fill="currentColor"/>
What's the Hex Code and How to Use It

What's the Hex Code and How to Use It

In this article, you will learn the basics about the Hex Code and how to apply it.

If you have ever used graphics software, you may have noticed in the Color Picker Menu a 6-digit  number with a hashtag symbol at the beginning.

The number is called the Hex Code. The Hex Code is a color code that is based on the Hexadecimal system.

If you sample a specific color with the color picker of any design software, it automatically displays the corresponding Hex Code and in most cases the corresponding RGB and HSB values.It is possible to convert a Hex Code number to RGB, CMYK, and HSB color values and vice versa. Many free calculators are online available for the conversion of Hex Color Codes

If you only have the Hex color code available, you can type it in the Hex Button, and the corresponding color will be displayed in the Fill or Stroke Well.

hex color bar on vectornator
Source: Vectornator Color Panel

The Hexadecimal System

We are used to calculating in the decimal system. This means that our Indo-Arabic number system uses ten symbols to notate the digits (0 to 9). The hexadecimal system, on the other hand, contains sixteen digits. Since the mid-1950s, the letters A through F or a through f have been used as numeral symbols to represent the six additional digits. This goes back to the practice of IBM computer scientists at that time.

The word hexadecimal is composed of the terms Hexa and Decem.

Hexa comes from Greek and means "six", while Decem is the Latin word for "ten". The hexadecimal system is therefore a place value system that represents numbers with a base of 16. This means that the hexadecimal number system uses 16 different digits. In other words, there are 16 possible digit symbols - as opposed to two in the binary system (1 and 0) or ten in the decimal system (0 to 9).

The hexadecimal system is used in computer technology and facilitates the readability of large numbers or long bit sequences. These are grouped into four bits each and converted into hexadecimal numbers. The result: a long sequence of ones and zeros becomes shorter hexadecimal numbers, which in turn can be divided into groups of two or four. Thus, hexadecimal numbers are a more compact form of representing bit sequences.

Large binary numbers have the disadvantage that they are very confusing. To remedy this, the hexadecimal system was introduced. Here, 4 bits of a dual number are replaced by a hexadecimal character. Since a 4-bit dual number can have 16 states, but we only know 10 decimal numbers, 6 letters were added to the hexadecimal number system.

Hexadecimal values are base 16 instead of base 10:

~key~ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F ~key~

It uses the letters A, B, C, D, E, and F to equate the additional values.

%table%

Decimal | Binary Dual | Hexadecimal

0 | 0 0 0 0 | 0

1 | 0 0 0 1 | 1

2 | 0 0 1 0 | 2

3 | 0 0 1 1| 3

4 | 0 1 0 0 | 4

5 | 0 1 0 1 | 5

6 | 0 1 1 0 | 6

7 | 0 1 1 1 | 7

8 | 1 0 0 0 | 8

9 | 1 0 0 1 | 9

10 | 1 0 1 0 | A

11 | 1 0 1 1 | B

12 | 1 1 0 0 | C

13 | 1 1 0 1 | D

14 | 1 1 1 0 | E

15 | 1 1 1 1 | F

%table%

The Hexadecimal Color Definition

Hex color codes are code values that represent the color values from 0 to 255.

If red, green, and blue are all at the minimum 0 (represented as “00” in the code), the color expressed is the color black. If red, green, and blue are all at the maximum 255 (represented as “ff” in the code), the color expressed is the color white.

To accurately assign a color in computer-aided graphic design, it is represented by a six-digit hexadecimal code based on the RGB model. The first two numbers represent the color red, followed by green and blue. Each hue is mixed from these three basic colors. The numerical values are divided into 255 parts and over 16 million different colors. The full hue of a base color has the value 255, which corresponds to the hexadecimal code "FF". The color value "0" indicates that the base color is not included. Since pure white results from the digital mixture of the colors red, green, and blue, this color has the hexadecimal coding #FFFFFF. For the color red, the hexadecimal code #FF0000 is derived on this basis.

white square and red squere
Image on the left: Hex Code: #FFFFFF
Image on the right: Hex Code: #FF0000

The system of hexadecimal color definition finds its application in many areas of computer-aided design. In this system, a color is represented by three consecutive hexadecimal numbers, each of which stands for the color of the RGB color space. RGB is an abbreviation for the proportions of the primary colors red, green, and blue in the mixed color.

The hexadecimal color definition is usually in the six-digit form, i.e. as a sequence of three hexadecimal numbers, each written with two digits, according to the scheme: #RRGGBB, which allows per octet 2 8 {\displaystyle 2^{8}} 2^{8}} (= 256) different states can be defined - from 0 for a completely "off" color and 255 (FF) for 100% color saturation.

The Hex Color Values can display more than 16 million different colors.

Pro Tip – If you decide on brand colors, it is essential to keep track of the corresponding HEX color codes, so that the colors will get reproduced uniformly online and in print.

It can be helpful to memorize a few of the more common Hexadecimal Colors. This knowledge might come in handy if you were designing with a coder on the fly.

%table%

Color | RGB | Hex Color Code

Black | 0 0 0 | #000000

White | 255 255 255| #FFFFFF

Grey | 128 128 128| #808080

Red | 255 0 0 | #FF0000

Blue | 0 0 255 | #0000FF

Green | 0 128 0 | #008000

%table%

The Hex Color and the Alpha Channel

Generally, the Alpha Channel has separate controls in graphics software and does not interfere with the 6 digit HEX code. You have the display of the color value located in the 6-digit Hex Code, but the alpha is often organized with a separate slider which does not influence the 6-digit HEX Code. The 6-digit HEX code controls only the displayed color. If you want to change the alpha value, you'll need to use the separate alpha channel slider in the Color Picker or the Color Slider Space in Vectornator.

Nevertheless, it is generally technically possible to implement the alpha value directly into the HEX code. With CSS Hex Codes f.ex, an Alpha value can be added. Using an alpha value to update a color transparency will change the hex code format from 6 digits #RRGGBB to 8 digits #RRGGBBAA.

blue square  and blue opicity square
Image on the left: RRGGBB Hex Code #1144EA
Image on the right: CSS 8-digit RRGGBBAA Hex Code: #1144EA50 (Alpha = 50%)

Photo in the cover by Pierre Bamin on Unsplash.

Download
Download the PDF version here.
https://www.toptal.com/developers/javascript-minifier/