HEX, RGB and HSL write one colour three ways. Why HEX and RGB are the same, when HSL is easier, adding transparency, screen vs print and text contrast.
Each point on a screen contains red, green and blue light, and colour comes from adjusting their intensities. All three at maximum is white and all three at zero is black. Unlike paint, which darkens as you mix, light brightens as you add. Screen colour is therefore expressed as the intensity of those three lights. The additive primaries are red, green and blue because the colour-sensing cells in the human eye respond roughly to those three ranges of light.
RGB writes the three intensities as numbers from 0 to 255. HEX writes those same three numbers as two hexadecimal digits each, joined together, because two hex digits hold exactly 0 to 255. The two carry identical information and differ only in notation. With 256 levels per channel, the three channels combine into 256 cubed, about 16.77 million colours.
Making a colour slightly lighter from HEX or RGB means working out how much to raise each of three numbers. HSL separates hue, saturation and lightness, so only the lightness value changes. It is especially convenient for building a palette that varies lightness within one hue. It points at the same colours, but it is more intuitive to adjust. HSL hue is written as an angle from 0 to 360 degrees: 0 is red, 120 is green and 240 is blue. Lightness gives the purest colour at 50 percent, white at 100 percent and black at 0.
A fourth value sometimes follows the colour, and that is transparency. HEX gains two more digits for eight in total, and RGB writes it as a fourth value. A transparent colour's final appearance depends on what sits behind it, so contrast must be checked over the actual background. Opacity is written as a value from 0 to 1 in some notations and as 00 to FF in HEX, so it helps to know that 0.5 is roughly 80 in HEX.
Print layers ink to subtract light, the opposite principle from a screen. Some colours that look vivid on screen therefore cannot be reproduced in print. Colours chosen for a screen and used directly in printed material are why the result can look muddy. Print specifies colour in CMYK, using cyan, magenta, yellow and black inks, and there is no single formula for converting screen RGB values to CMYK. Results vary with the printer's equipment and paper, so for important print work, check with an actual proof.
The same HEX value looks slightly different on each screen. The numbers only set how strong each light is; which red that strength of red means is defined by the colour space. The web assumes a colour space called sRGB by default, but many recent devices have screens that can show a wider range of colours. Screen brightness, night modes and room lighting add to the variation, so work that needs exact colour should be checked on a calibrated monitor.
Before asking whether a colour looks good, ask whether text on it can be read. The Web Content Accessibility Guidelines (WCAG) recommend a contrast ratio of at least 4.5 to 1 for normal text and 3 to 1 for large text. At the same HSL lightness, yellow looks bright and blue looks dark, so lightness alone cannot judge contrast. Putting both colours into a contrast checker and reading the ratio is the reliable way.
Pick the notation to suit the task. HEX is short and easy to copy when passing colours between design tools, while RGB, with its separated numbers, is easier when code calculates new values. HSL is the most convenient for making several variants of one colour, such as a button's default, pressed and disabled states. For print, specify in CMYK from the start.