As you move the color picker from left to right in the large color box you are adjusting the saturation of the hue. Try it and you'll notice the numbers next to the S change from 0 (far left) to 100 (far right). Moving the color picker up and down adjusts the brightness of the hue. As you move the color picker up and down notice that the B values change from 0 to 100 as well. To change the Hue, you can click in the narrow rainbow-colored strip next to the large color picker area, or you can drag up and down in this space.
The RGB grouping is for specifying colors by their red, green, and blue values. At some stage in this course I may ask you to select a specific color by its RGB values. In these cases, you would enter numbers in the corresponding numeric fields for R, G, and B. For example, the RGB values for 50% gray are R128-G128-B128 and would be entered as shown in the screen shot here.
The # field is for specifying colors by their hexadecimal color codes. Hexadecimal color values are primarily used in Web design.