HEX and RGB: the same color, written two ways
Screens build every color from red, green and blue light, each with a value from 0 to 255. RGB writes those three numbers out in decimal: rgb(37, 99, 235). HEX writes the same numbers in hexadecimal, two digits per channel, after a hash sign: 37 is 25, 99 is 63 and 235 is EB, giving #2563EB.
To convert by hand, split a HEX code into pairs and convert each from base 16, where A to F stand for 10 to 15. FF is 255, 80 is 128 and 00 is 0. Three-digit shorthand such as #FFF doubles each digit, so it equals #FFFFFF. The picker shows HEX in uppercase, but case makes no difference.
When HSL is the better format
HSL describes the same color as hue (a position on the color wheel from 0 to 360 degrees), saturation and lightness. The example above is hsl(221, 83%, 53%). It is the easiest format to adjust by eye: lower the lightness for a darker shade or reduce the saturation for a softer version, while keeping the same hue.
Where to paste each format
CSS accepts all three formats anywhere a color is expected. Most design and presentation apps have a HEX field in their color dialog. Code for graphics and charting libraries often takes RGB values, sometimes divided by 255 to give numbers between 0 and 1.
Click on the image to pick, use the Copy button next to the format you need, and click a palette swatch to see codes for the image's main colors. The palette is calculated on the server from the uploaded image, and Copy palette as CSS gives you all of them as custom properties.