Convert HEX to RGB and HSV in Python

The three-color models are RGB, HSV, and HEX. RGB stands for Red, Green, and Blue. HSV stands for Hue, Saturation, and Value. HEX is a hexadecimal representation of RGB values.

RGB is the most common color model in web design because it is the most intuitive to work with on a computer monitor. It is also the easiest to convert from one format to another such as from HEX or HSV values.

HSV is an alternative to RGB that can be used in web design for coloring text or backgrounds because it has a greater range than RGB does. It also has more intuitive controls than RGB does for adjusting colors on a monitor.

HEX values are often used when specifying colors in HTML because they are easier to type than decimals.

HEX to RGB

RGB color channel is an additive color model in which red, green, and blue colors are added together to create a varied range of colors. The three colors in the mix are each represented with an 8-bit signed integer – an integer between 0 and 255.

For example, RGB(255, 0, 0) represents the red color, RGB (0, 0, 255) is blue, and mixing all the three colors at full intensity, that is, RGB (255, 255, 255) gives a white.

On the other hand, HEX color space is a hexadecimal representation of 8-bit signed RGB color. To understand the conversion of HEX to RGB, therefore, we need to cover the conversion of hexadecimal into decimal.

Hexadecimal to Decimal Conversion

Hexadecimal or simply hex contains 16 units – numbers 0-9 and letters A through F. That means hex place values are of powers of 16.

Dec0123456789101112131415
Hex0123456789ABCDEF
Table 1: First 16 values in DEC-HEX representation. From these values, all other values can be derived.

Typically, a hex starts with a # symbol followed by 6 characters representing different colors. The image below shows how values on HEX color space are mapped into the RGB counterpart – ignoring the #, the first two characters in HEX are mapped into red value in RGB, the second two go with green color and the last two with blue.

Figure 1: Figure showing how string characters in HEX string are matched into RGB values. It is necessary to understand this step before we perform actual conversion.

Since HEX place values are to the powers of 16, we convert HEX into RGB by simply taking each place value with a unit and adding them together.

Let us work on an example of converting HEX values to RGB equivalent.

HEX(#180C27) to RGB?

Powers of 1616^2=25616^1=1616^0=1
Matching R18
Matching G0C
Matching B27
Table 2: The maximum value for RGB is 255, so we don’t need power 2, that is, 16^2=256 and above.

Therefore,

R = (16*1) + (1*8) = 24,

G = (16*0) + (1*C) = (16*0) + (1*12) = 12 since C=12 from Table 1 , and

B = (16*2) + (1*7) = 39,

And thus hex(#180C27) = rgb(24, 12, 39)

In Python, converting HEX to RGB can be archived using any of the following methods:

Method 1: Using the concepts we discussed above

The following function puts into practice the concepts we have learned on how to convert HEX into RGB.

First, remove the # symbol from the HEX string. It is not needed in the computation. Secondly, slice the resulting HEX string into 3 equal parts – the three substrings matching the three channels on the RGB color scheme. Lastly, get the hexadecimal representation of those substrings. That is done by int(**, 16), for example, if you run print(int(“F5”, 16)) you will get 245.

Output:

(24, 12, 39)

Output:

(245, 25, 48)

Method 2: Using matplotlib

Install matplotlib if it is not already installed by running “pip install matplotlib” for pip users and “conda install matplotlib” for anaconda users.

Output (rounded off to 3 places):

(180, 251, 184)

The function colors.to_rgb() outputs fractions RGB values. To put the values in the range of 0 and 255, we multiplied each value by 255.

Method 3: Using the Pillow package

As usual, if you try importing PIL and you can’t find it, you can install Pillow by using pip by running “pip install pillow”.

Output:

(35, 169, 221)

HEX to HSV

HSV stands for Hue, Saturation, Brightness/Value. It is an alternative representation of the RGB color scheme.

Figure 2:HSV_color_solid_cylinder_saturation_gray

Hue is measured in degrees ranging from 0 to 360 and represents the color model of the channel, saturation, and value ranging from 0 to 100 percent explaining the amount of gray component and the intensity of color, respectively.

Since we already know HEX->RGB, to understand HEX->HSV, we will discuss how RGB is converted to HSV.

RGB to HSV

This conversion can be achieved using the following steps

  1. Normalize r,g,b values by dividing them by 255.
  2. Compute max(r,g,b), min(r,g,b), and the difference between the two.
  3. Calculate H.
    • if max(r,g,b)=,min(r,g,b)=0, then H = 0
    • if max(r,g,b)=r, then, H = (60 * ((g – b) / difference ) + 360) % 360
    • if max(r,g,b)=g,  then, H= (60 * ((b – r) / difference) + 120) % 360
    • if max(r,g,b)=b,  then, H = (60 * ((r – g) / difference) + 240) % 360
  4. Calculate S :
    • if max(r,g,b)= 0, then, S = 0
    • if max(r,g,b)!=0 then, S = (difference/max(r,g,b))*100
  5. Lastly, compute V :
    • v = max(r,g,b)*100

Let’s put these steps into Python code.

Output:

(267, 69, 15)

To convert HEX to HSV, we will do the conversion HEX->RGB->HSV. In Python, we can employ the following methods.

Method 1: Using the concepts we discussed earlier

We’ve already created hex2rgb() and rgb2hsv() functions. In this, the method we call the two functions to convert HEX to HSV as a conversion HEX->RGB->HSV

Output:

(267, 69, 15)

The * used in that line is used to unpack the tuple returned by hex2rgb() to arguments of the rgb2hsv() function.