Hex to RGB to HSL to HSV Converter

How do you convert Hex to HSL, RGB to HSL, or RGB to HSV? If you are juggling between these codes like me while working on a project, here is good news! Say hello to our all-in-one color code converter! This nifty tool effortlessly transforms one color code format into another, streamlining your workflow and saving you precious time. No more calculations or endless Googling—just input your code and let the magic happen!

Hex:

RGB:

HSL:

H (°):

S (%):

L (%):

HSV:

H (°):

S (%):

V (%):

How Does It Work

Hex to RGB

Hex to RGB code conversion is pretty easy with the following steps:

Take the Hex Code: For example, #FF5733.
Split the Code: Divide it into three pairs: FF, 57, and 33. Each of these three pairs corresponds to R, G, and B values in the RBG codes.
Convert to Decimal: Next, convert each pair from hexadecimal to decimal. Hexadecimal numbers use a base-16 system, which includes the digits 0-9 and the letters A-F. Take the pair “FF” as an example. F is 15 in decimal. The first F represents F×16^1, and the second F represents F×16⁰. Therefore, FF equals 15×16¹+ 15×16⁰=255 in decimal.

Similarly, 57 equals 5×16¹+ 7×16⁰=87 and 33 equals 3×16¹+ 3×16⁰=51.

Get the RGB: At the end, we get the R-value as 255, G as 87, and B as 51. So, the conversion result is (255, 87, 51).

RGB to Hex

Converting RGB code (Red, Green, Blue) to Hex involves similar steps. The only difference is that we must know how to convert decimals back to hexadecimal forms.

Still, take the Red value 255 as an example and divide it by 16:

Divide by 16: Take the decimal RGB value and divide it by 16. 255/16 equals 15.93.
Whole Number: Take the whole number from the division. In this case, the whole number from 15.93 is 15.
Remainder: Find the remainder and map to its hexadecimal equivalent. For this example, 255-15×16=15, and 15 is the F in the hexadecimal number system.
Continue to Divide the Quotient by 16: Remember the whole number (quotient) we got from Step 2? Divide it by 16, and repeat steps 1 to 3 until the quotient is less than 16. Specifically, in our scenario, we got the quotient number 15 from Step 2. 15 is less than 16, so we do not need to divide it by 16 but directly use it as a remainder. 15 is F in the hexadecimal system. Here we got another F.
Concatenate: Finally, we need to concatenate all the hexadecimal numbers we got from the previous steps. Remember, the concatenation should be in reverse order, which means the last acquired number should be at the first. In our case, we got two F’s, so we don’t need to care about order. The red value of 255 in decimal is just FF in hexadecimal.

Feeling dizzy? Let’s take a little practice to understand this mechanism more easily. (Of course, you can always use our all-in-one tool to save your time!) We have derived FF from the R-value of the RGB code. Now try the last two of (255, 87, 51)! Can you convert 87 and 51 back to Hex?

Following the same steps above, we can get the hexadecimal numbers of Green and Blue, which are 57 and 33. Put them in the order of R, G, B, and we have gotten the hex code of (255, 87, 51), which is FF5733.

RGB to HSL

Normalize RGB: First, divide each RGB value by 255. So, if you have RGB as (255, 87, 51), you’ll get:

R = 255/255 = 1
G = 87/255 ≈ 341
B = 51/255 = 0.2

Find Min and Max: Identify the smallest and largest values among the normalized R, G, and B.

Min: min(1, 0.341, 0.2) = 0.2
Max:max(1, 0.341, 0.2) = 1

Calculate Luminance (L): Add the Min and Max, then divide by 2.

L = (1+0.2)/2 = 0.6

Calculate Saturation (S):

If Min equals Max, S=0;
Otherwise, if L<0.5, S = (Max – Min)/(Max + Min);
If L≥5, S=(Max – Min)/(2 – Max – Min).

In our case, L is 0.6, which is larger than 0.5, so S = (1-0.2)/(2-1-0.2)=1.

Calculate Hue (H):

If Min equals Max, H=0;
If Max is R, H = (G – B)/(Max – Min), so our H is (0.341-0.2)/(1-0.2)≈176;
If Max is G, H = (B – R)/(Max – Min)+2;
If Max is B, H = (R – G)/(Max – Min)+4;

Finally, multiply H by 60 to get degrees on the color circle. For our example, H is 10.56. If H is negative, add 360.

Convert to Percentages: Multiply L and S by 100 to get percentages. We don’t need to multiply H because H is in degrees, not percentages.

And there you have it! Your HSL values will be (10.56, 100%, 60%). Hope this makes the RGB to HSL conversion crystal clear!

RGB to HSV

Normalize RGB: Divide each RGB value by 255. So if your RGB is (255, 87, 51), you should convert them to:

R = 255/255 = 1
G = 87/255 ≈341
B = 51/255 = 0.2

Find Min and Max: Spot the smallest and largest values among R, G, and B.

Min: min(1, 0.341, 0.2) = 0.2
Max: max(1, 0.341, 0.2) = 1

Calculate Value (V): The Max value you just found is your V.

V = Max = 1

Calculate Saturation (S):

If Max is 0, then S=0;
Otherwise, S = (Max – Min)/Max. Therefore, our S is 0.8.

Calculate Hue (H):

If Max equals Min, H=0;
If Max is R, H = (G – B)/(Max – Min), so our H is (0.341-0.2)/(1-0.2)≈176;
If Max is G, H = (B – R)/(Max – Min)+2;
If Max is B, H = (R – G)/(Max – Min)+4;

Finally, multiply H by 60 to get degrees on the color circle. If H is negative, add 360. This step is basically same as the fifth step of RGB to HSL. Our H is still 10.56.

Convert to Percentages: This step is also identical to the sixth step of RGB to HSL. Multiply S and V by 100 to get percentages.

And voila! Your HSV values will be (10.56, 80%, 100%). It might seem like a lot at first, but once you’ve done it a couple of times, it’s a piece of cake!

HSL to RGB

Start with HSL: Let’s say you have HSL as (120°, 50%, 60%), which means the Hue (H) is 120 degrees, Saturation (S) is 0.5, and the Luminance (L) is 0.6.
Normalize Hue (H): Divide the hue by 360.

H = 120/360 = 1/3.

Calculate Temp RGB:

Temp_R= H+1/3 = 2/3;
Temp_G = H = 1/3;
Temp_B= H-1/3 = 0.

Calculate Another Two Temp Values:

Temp₁ =
- L × (1+S) if L < 0.5;
- (L+S) – (L×S) if L≥5. Our L is 0.6, so Temp₁ for our example is 0.8.
Temp₂ = 2 × L – Temp₁ = 0.4.

Adjust Temp Values: If any temp value is less than 0, add 1. If it’s greater than 1, subtract 1.
Calculate RGB Components: (The letter “x” in the formulas below represents R, G, and B.)

If 6 × Temp_x < 1, X in RGB = Temp₂ + (Temp₁ – Temp₂) × 6 × Temp_x
Else, if 2 × Temp_x < 1, X in RGB = Temp₁
Else, if 3 × Temp_x < 2, X in RGB = Temp₂ + (Temp₁ – Temp₂) × 6 × (2/3 – Temp_x)
Otherwise, X in RGB = Temp₂

In our case, Temp_R = 2/3, Temp_G = 1/3, and Temp_B = 0. Therefore, we got RGB values as (0.4, 0.8, 0.4)

Final RGB Result: Multiply each value we got from the step above by 255 and round to the nearest integer. Our final result from HSL to RGB is (102, 204, 102).

HSV to RGB

Start with Your Colors: This time, let’s take (120°, 50%, 60%) as a HSV code. Hue (H) is 120, Saturation (S) is 0.5, and Value (V) is 0.6.
Find the Color Zone: Divide H by 60 and find the integer part. This part will tell you the “color zone” of the hue:

Red Zone, if integer = 0;
Yellow Zone, if integer = 1;
Green Zone, if integer = 2;
Cyan Zone, if integer = 3;
Blue Zone, if integer = 4;
Magenta Zone, if integer = 5.

Besides, don’t forget to save the remainder as f so that we can use it in the next step below.

For our example, H=120, 120/60=2, so we are in the green zone.

Calculate Intermediate Values: Imagine three prep ingredients: p, q, t. Use S and V to calculate them:

p = V × (1 – S)
q = V × (1 – S × f)
t = V × (1 – S × (1 – f))

Our p = 0.3, q = 0.6, t = 0.3.

Assign Intermediate Values to RGB Based on Hue Region:

If we are in the Red zone, R = V, G = t, B = p;
If we are in the Yellow zone, R = q, G = V, B = p;
If we are in the Green zone, R = p, G = V, B = t;
If we are in the Cyan zone, R = p, G = q, B = V;
If we are in the Blue zone, R = t, G = p, B = V;
If we are in the Magenta zone, R = V, G = p, B = q;

We have already known we are in the Green zone according to Step 2. So our R=0.3, G=0.6, B=0.3.

Final Touch: Multiply these values by 255 to get our final result.

At the end, we can convert the HSV (120°, 50%, 60%) to RGB (76.5, 153, 76.5). Sounds a lot of work? Now you know why I designed this converter. Say goodbye to all these calculations!

Hex to HSL and HSL to Hex

Once you know all the mechanisms above, the following conversions will all be easy peasy. For both Hex to HSL and HSL to Hex conversions, RGB serves as our intermediary.

To transform Hex to HSL, we will start by converting Hex to RGB using the steps we’ve previously outlined. With the RGB values in hand, proceed to convert them to HSL, following the RGB to HSL guidelines mentioned earlier.

Similarly, our converter can change HSL to Hex codes by HSL to RGB and RGB to Hex methods we introduced.

Hex to HSV and HSV to Hex

Just like with our previous conversions, RGB will act as the middleman here. Whether you’re going from Hex to HSV or the reverse, the process is straightforward.

To convert Hex to HSV, we’ll first switch the Hex code to RGB. You can do this by following the Hex to RGB steps we’ve already discussed. Once you’ve got your RGB values, simply use the RGB to HSV guidelines we’ve covered.

For the reverse journey, from HSV to Hex, the process is equally simple. Start by converting your HSV values to RGB, and then convert RGB to Hex code. You can do this by referring to the HSV to RGB and RGB to Hex steps we’ve outlined before.

HSL to HSV and HSV to HSL

RGB continues to be our trusty intermediary for these conversions as well. To go from HSL to HSV, convert the HSL values to RGB and then from RGB to HSV. Use the HSL to RGB and RGB to HSV methods we’ve previously detailed.

To convert HSV to HSL, also transform HSV values to RGB and then to HSL. Follow the HSV to RGB and RGB to HSL steps we introduced.

Hope you enjoy our all-in-one converter!