Blog

How to convert HEX to RGB and HSL

Convert a HEX color to RGB and HSL by hand, understand the channel values, and check colors on your screen with TooLab's Color Picker.

Lauren HughesTools and utilities Tools 4 min read

Have a HEX color such as #3A7BD5 and need its RGB or HSL values for a design, a website, or an app? You can convert it by splitting the code into color channels and doing a few calculations.

If the color is visible on your screen, the Color Picker can show its HEX, RGB, and HSL values directly. If you already have the HEX code written down, use the steps below to work out the other formats.

Convert a HEX color to RGB and HSL

  1. Open the Color Picker in Chrome or Edge on a computer if you want to check a color on screen. Move the pointer over the color to see its values. For a HEX code from a message or design file, continue with the next steps.
  2. Remove the # from the beginning of the code and split the six remaining characters into three pairs. In #3A7BD5, the pairs are 3A, 7B, and D5. They represent red, green, and blue, in that order.
  3. Convert each pair from hexadecimal, or base 16, to a decimal number. Multiply the first digit by 16 and add the second digit. Letters have these values: A is 10, B is 11, C is 12, D is 13, E is 14, and F is 15. For example, 3A is 3 times 16 plus 10, which equals 58.
  4. Write the three decimal values in red, green, blue order. For #3A7BD5, the result is red 58, green 123, and blue 213, or rgb(58, 123, 213).
  5. For HSL, first divide each RGB value by 255. Find the largest and smallest of the three results. Lightness is their average. Saturation is the difference between them divided by 1 - |2 times lightness - 1|. Convert saturation and lightness to percentages by multiplying by 100.

Hue needs one more calculation. If all three channels are equal, hue is 0. Otherwise, compare the largest channel with the other two, using the matching formula:

  • Red is largest: Hue = 60 times ((green minus blue) divided by the channel difference). If the result is negative, add 360.
  • Green is largest: Hue = 60 times (((blue minus red) divided by the channel difference) plus 2).
  • Blue is largest: Hue = 60 times (((red minus green) divided by the channel difference) plus 4).

For #3A7BD5, the normalized channels are about 0.227, 0.482, and 0.835. Lightness is about 53%, saturation is about 65%, and hue is about 215 degrees. Rounded to whole numbers, the HSL value is hsl(215, 65%, 53%).

What the color values mean

RGB gives the amount of each light color

RGB describes red, green, and blue light. In the common 8-bit format, each value runs from 0 to 255. A value of 0 means none of that channel, while 255 means its maximum. RGB is useful in CSS, graphics software, and code that expects three channel values.

HSL describes hue, saturation, and lightness

Hue is the color angle around a color wheel, from 0 to 360 degrees. Saturation describes how vivid or gray the color looks, from 0% to 100%. Lightness describes how dark or bright it is, also from 0% to 100%. HSL can be easier to adjust by eye: keep the hue and saturation, then change just the lightness.

Short and extended HEX codes mean something different

A three-digit code such as #39C is shorthand for #3399CC. Repeat each character to expand it, then convert the three pairs as usual. A six-digit code has no transparency value. An eight-digit CSS code such as #3A7BD580 adds an alpha channel after the RGB pairs. The last pair controls transparency, so it is not part of the RGB color itself.

Fix common conversion mistakes

  1. Keep the pair order. HEX uses red first, green second, and blue third. Swapping the pairs changes the color, even if you use the same three numbers.
  2. Use base 16 for each pair. Treating 3A as the decimal number 3 followed by 10 will not work. Convert it as 3 times 16 plus 10 to get 58.
  3. Check the range. Each RGB channel should be a whole number from 0 to 255. If a channel is outside that range, check that you split the HEX code into two-character pairs.
  4. Do not confuse hue with a percentage. HSL hue is an angle in degrees. Saturation and lightness are percentages. For example, write hsl(215, 65%, 53%), not three percentage values.
  5. Round only at the end. Keep a few decimal places while calculating HSL, then round the displayed result. Rounding the RGB fractions too early can shift the final hue or percentage slightly.

Check a color that is already on your screen

The TooLab Color Picker is useful when you can see the color but do not have its HEX value. Pick the color on screen and read its HEX, RGB, and HSL values instead of calculating them yourself. Picking a color from anywhere on the screen works in Chrome and Edge on a computer. Other browsers may show a reduced version or may not support this feature.

Different tools may display a rounded HSL value, so small differences such as 64% versus 65% can represent the same underlying color.

More articles