Three ways to write the same colour
HEX, RGB and HSL all describe colours in sRGB, the colour space that ordinary web pages and monitors use. A hex value such as #4D8DFF is the three channel values written in base sixteen: 4D for red, 8D for green and FF for blue, each between 00 and FF. The rgb() form writes the same numbers in decimal, rgb(77, 141, 255). Nothing is lost between those two; they are the same data in different notation.
HSL is a different way of expressing those same sRGB numbers, not a separate colour space in the sense that sRGB or Display P3 are. Hue is an angle around the colour wheel, saturation is how far the colour sits from grey at that lightness, and lightness is how close it is to black or white. The conversion is a reversible arithmetic transform on the red, green and blue channels, so hsl(218, 100%, 65%) and #4D8DFF describe the same sRGB colour rather than two different ones.
What the converter accepts and returns
Input can be a six-digit hex value with or without the leading hash, or an rgb() or rgba() function with three numeric channels. Output always shows all three forms plus a preview swatch: uppercase hex, rgb() with decimal channels, and hsl() with whole degrees and percentages. The uppercase hex is a convention rather than a requirement, since CSS accepts either case.
Three-digit shorthand such as #4DF is not accepted, and hsl() is not read on the input side, so expand shorthand to six digits before pasting. Alpha is ignored: rgba() is accepted for convenience, but only the first three channels affect the result, so a semi-transparent colour converts as if it were fully opaque. Write plain integers in rgb(), because percentages and values outside the 0 to 255 range are not interpreted as you might expect.
Rounding, greys and the limits of hex
Converting from RGB to HSL rounds the hue to a whole degree and the other two values to whole percentages, so a round trip back to hex can land one unit away on a channel. That is fine when you are choosing a palette by hand and not fine when you are diffing colours programmatically. Hue also has no meaning for greys, where all three channels are equal: the converter reports 0 degrees with 0 percent saturation, which is the conventional answer and the reason a mid grey comes back as 0 degrees rather than some arbitrary hue.
Hex and rgb() can express exactly 16,777,216 colours, the full 8-bit-per-channel sRGB set. They cannot describe a colour outside that gamut, such as a saturated Display P3 or Rec. 2020 value, so converting a wide-gamut colour to hex means clipping it to the nearest sRGB colour that fits. No notation here carries a colour profile either, which is why the same hex value can look slightly different on two uncalibrated monitors. That difference belongs to the display, not to the number.
An example: matching a brand colour
A brand guide lists the logo blue as #4D8DFF. Pasted into the converter it returns rgb(77, 141, 255) and hsl(218, 100%, 65%). If the design needs a hover state about ten percent darker, the hsl form is the easier one to edit: drop the lightness from 65 to 55 and the hue stays put, so the shade belongs to the same family. The hex value is what goes into the stylesheet, the rgb value is what a canvas or charting library wants, and the hsl value is what you reason with while building tints and shades. The preview swatch confirms the colour before you copy anything, and the meta tag generator is the place to put the chosen value if you also want a matching browser theme colour. For palette work on photographs rather than CSS, the image converter handles the file side.