RGB to Hex

RGB color codes

RGB color codes are one of the most popular ways to define colors in web pages. They are written in the following way:

color: `rgb`(0, 0, 0);       /* black */
color: `rgb`(255, 255, 255); /* white */

Hex color codes

Hex color codes use the same principle as RGB color codes, as they both define colors using the RGB color mode. However, they are written in a slightly different way:

color: #000000; /* black */
color: #FFFFFF; /* white */

Converting Hex to RGB color codes

RGB color code values are based on the decimal number system, which is a Base-10 systemthis means that there are 10 unique characters that define the numbers 0 – 9.

Hex color code values are based on the hexadecimal number system. It is a Base-16 system, meaning there are 16 unique characters that define the numbers. This includes the numbers 0 – 9 and the letters A – F.

How counting is done

Counting is done the same way in both systems. The first number is 0, and you count all the way up to the last digit. For the decimal number system, this digit is 9. For the hexadecimal number system, this digit is F.

Once you reach the last digit, you start the count again, but this time with your leading digit as the next one in the system1 for both the decimal and hexadecimal number systems.

Below is a chart that helps to show the difference in the two number systems:

In order to convert an RGB color code to a hex color code, you must convert each of the values individually.

Example

Let’s look at the color crimson as an example. The RGB color code for crimson is rgb(220, 20, 60).

First Value

• Take the first number, 220, and divide by 16.

  220 / 16 = 13.75

  This means that the first digit of the 6-digit hex color code is 13 or D.

• Take the remainder of the first digit, 0.75, and multiply by 16.

  0.75 (16) = 12

  This means that the second digit of the 6-digit hex color code is 12, or C.

So far, we have #DC____.

Second value

• Take the second number, 20, and divide by 16.

  20 / 16 = 1.25

  This means that the third digit of the 6-digit hex color code is 1.

• Take the remainder of the first digit, 0.25, and multiply by 16.

  0.25 (16) = 4

  This means that the fourth digit of the 6-digit hex color code is 4.

In addition to what we already had, we now have #DC14__.

Third Value

• Take the third number, 60, and divide by 16.

  60 / 16 = 3.75

  This means that the fifth digit of the 6-digit hex color code is 3.

• Take the remainder of the first digit, 0.75, and multiply by 16.

  0.75 (16) = 12

  This means that the sixth digit of the 6-digit hex color code is 12, or C.

Finally, we have our total value of #DC143C.