The calculator's own default color happens to be OneTabKit's accent color: #C1832E, which is exactly rgb(193, 131, 46) and hsl(32, 62%, 47%). The HEX and RGB values are the same information written two ways — HEX pairs C1, 83, and 2E are just the RGB numbers 193, 131, and 46 in base 16 instead of base 10. HSL describes the identical color completely differently: hue 32° places it in the orange band of the color wheel (0° is red, 120° is green, 240° is blue), 62% saturation means it's fairly vivid rather than washed out, and 47% lightness puts it near the middle of the dark-to-light range rather than close to black or white.
Making a color lighter or darker in RGB or HEX means adjusting all three channels together in the right proportion, which isn't obvious by looking at the numbers. In HSL, the same adjustment is just changing one number: hsl(32, 62%, 70%) is a lighter version of the exact same orange, and hsl(32, 62%, 25%) is a darker one — hue and saturation stay untouched, so the color family is instantly recognizable in the numbers themselves. That's why HSL tends to be the more convenient format for adjusting an existing brand color for a hover state or a shaded variant, even though HEX remains the more common format for the color's stored, final value.
HEX and RGB both describe a color by its red, green, and blue components — HEX in hexadecimal, RGB in plain numbers. HSL describes color by hue, saturation, and lightness, which can be more intuitive for adjusting a color's shade.
Yes — type or paste a value into any of the HEX, RGB, or HSL fields and the others update automatically.
Different tools and codebases expect different formats — CSS accepts all three, but some design tools or older systems may only accept one.