Using this tool:

This tool is used to help determine colours to use in branding. Three root colours are defined; “Primary”, “Secondary” and “Accent”.  Each has two variations. To keep colour consistency, variations should only be Saturation or Brightness. The Colour pickers used are HTML5 elements. For best results select the left column colours. When adjusting the other columns, change to HSL mode, only adjust saturation and/or brightness.

Setting the “Saturate By” and “Brightness By” will apply these as defaults when the root colours change (left column). 

Changing the colour with the  left column colour picker; the Saturation and Brightness variants automatically change.