The codes
HEX and RGB are the same thing written two ways: how much red, green and blue light, from 0 to 255 each. HSL describes it as a hue round the colour wheel (0 to 360°), how saturated it is, and how light. CMYK is the ink mix for print; it is an estimate, since real ink depends on the printer and paper.
Shades and colours that go with it
The scale keeps the hue and saturation and steps the lightness from near white to near black, for hover states, borders and backgrounds. The pairings turn the hue round the colour wheel: the complement sits opposite, analogous colours sit either side, and a triad is three evenly spaced. Click any swatch to make it the colour.
Questions
Can I pick a colour from my screen?
In Chrome and Edge on a computer, yes: press Pick from screen and click anywhere. Other browsers do not offer it yet, so the button is hidden there.
Will my text be readable on it?
Check with the Contrast Checker, which tests text and background against the WCAG accessibility guidelines.