In the profile customiser you can add the code to allow not only the background colour to be set, but border colour as well.
The top box is where you can add entries. In the bottom box is the current defined entries. You will see three links over to the right side, Background, Fonts, and Borders.
Each block has a design box assigned to it. The profile customiser will affect all blocks with the same design box. The default blocks on the profile page have design box one assigned to them.
If you do not currently have an entry for the background colour of the blocks, then you will create one and add it to the list of background entries.
Let's start with your question, colour for the boxes which I assumed you meant the background colour. We will name our entry, boxbackground and give it the caption of Background for boxes. In the Name of css field we will enter #divUnderCustomization .disignBoxFirst and for the type we will choose Background. That is it, hit the save button and your new entry will be added to the list. The rest is handled by the profile customisation module. By default, the background colour will be solid. However, instead of using the colour picker, your members can type in the rgba code for the colour. There is a hack on here that goes into the module files to add it so a member can pick the transparency but I have not added that and would have to hunt for it. I did hack the module and added background position to the profile customiser so a member could fixed their background image to the page so it would not scroll with the page.
By the way, that is not a typo on the name of the design box.
Design box one also has a header, you can have it so the header can have a different background colour as well. The header css for design box one is boxFirstHeader so your css name will be #divUnderCustomization .boxFirstHeader and the rest will follow as above.