Converting colors from RGB to HEX is as simple as converting their numeral values from decimal to hexadecimal numbers system. In order to convert RGB color (50, 168, 82), we convert each of the number to hexadecimal value:
50 = 32 168 = A8 82 = 52
RGB(50, 168, 82) = #32A852
RGB
stands for Red, Green, and Blue hues of light that can be mixed to create different colors. It is the standard method of producing images for TV screens, computer monitors, and smartphone displays.
To be more precise, RGB is an additive color model, meaning you must add hues together to create a different color.
Imagine stacking colors one on top of the other:
Note: different devices produce different RGB values. Each device uses different color mixing theory, meaning RGB colors are not the same across all the devices, and they need color management to look the same.
To describe a color in the RGB color model, you have to tell how much red, green, and blue is needed.
You indicate how much of red, green and blue is needed by using a RGB triplet (R, G, B)
where each of the elements can vary from zero to a defined maximum value.
If all of the elements are at zero (0, 0, 0)
- the result is black color.
If all of the elements are at a maximum (255, 255, 255)
- the result is white color.
Combinations of these numbers make up different colors (255, 255, 0)
- the result is yellow color
This is known as color depth and is measured in bits.
As of 2018, almost every TV, computer and smartphone display uses 24-bit color depth know as true color. It supports eight bits for each of the three colors, or 24 bits total.
This provides 28 or 256 possible values for red, green and blue:
256 x 256 x 256 = 16,777,216 total possible colors in the true color palette
Hexadecimal
describes a base-16 number system made up of 16 symbols. It uses numbers from 0 to 9 to represent numbers from 0 to 9, and letters A to F to represent the numbers from 10 to 15.
It is most often used in computer science and mathematics as a means to represent binary code in a human-readable form.
Unlike computers or scientists, most of us use the decimal numeral system. It consists of numbers from 0 to 9 and it is the standard way to use numbers. We start learning it in the preschool and we use it every day:
a car drives at 10 mph a cat weights 4kg a month is made of 30 days
Now that we know the difference between hexadecimal and decimal let’s examine how we can convert from one to another.
As we already know, in the hexadecimal number system, numbers from 0 to 9 represent 0 to 9, and letters A to F represent 10 to 15 in the decimal system.
Here is an in-depth table that is good at explaining conversion from hexadecimal to decimal numbers:
In order to convert RGB to HEX, you have to convert red green and blue color values from decimal to hexadecimal.
Example #1: convert color red (255, 0, 0)
to HEX:
R = 255 = FF G = 0 = 00 B = 0 = 00 HEX = #FF0000
Example #2: convert color green (0, 255, 0)
to HEX:
R = 0 = 00 G = 255 = FF B = 0 = 00 HEX = #00FF00
Example #3: convert color blue (0, 0, 255)
to HEX:
R = 0 = 00 G = 0 = 00 B = 255 = FF HEX = #0000FF
Example #4: convert color black (0, 0, 0)
to HEX:
R = 0 = 00 G = 0 = 00 B = 0 = 00 HEX = #000000
Example #5: convert color white (255, 255, 255)
to HEX:
R = 255 = FF G = 255 = FF B = 255 = FF HEX = #FFFFFF
Bonus example #6: convert color gold (255, 215, 0)
to HEX:
R = 255 = FF G = 215 = D7 B = 0 = 00 HEX = #FFD700
In order to convert HEX to RGB, you have to split the hexadecimal value into pairs of two and convert it to a decimal number.
Example #1: convert color red #FF0000
to RGB:
FF = 255 00 = 0 00 = 0 RGB = (255, 0, 0)
Example #2: convert color green #00FF00
to RGB:
00 = 0 FF = 255 00 = 0 RGB = (0, 255, 0)
Example #3: convert color blue #0000FF
to RGB:
00 = 0 00 = 0 FF = 255 RGB = (0, 0, 255)
Example #4: convert color black #000000
to RGB:
00 = 0 00 = 0 00 = 0 RGB = (0, 0, 0)
Example #5: convert color white #FFFFFF
to RGB:
FF = 255 FF = 255 FF = 255 RGB = (255, 255, 255)
Bonus example #6: convert color gold #FFD700
to RGB:
FF = 255 D7 = 215 00 = 0 RGB = (255, 215, 0)
As we can see from the examples above, the main difference between RGB and HEX is that it uses different numeral systems. RGB uses decimal, and HEX uses hexadecimal.
Converting colors from RGB to HEX is as simple as converting their numeral values from decimal to the hexadecimal number system.
From our experience and from what our team has observed over the years, hexadecimal is used more often that RGB especially in web development and web design industries.
However, it makes no difference which one you use as they both represent the same color. The only suggestion - stay consistent.
If you begin using RGB throughout our web project - stick to it. If you begin using HEX throughout our web project, try to use only HEX