Hi Karen,

There are two ways to change the colors in Framework.

1. You can modify the main.css file by using find & replace to change any color code (#333; or rgba(123,123,123,1) for instance) throughout the whole file. After this you'll need to clear your browser cache (ctrl+shift+r or ctrl+f5 usually does it), and/or reset your skin GUID. To do this click "Administration" in your admin bar on the left, then go to Advanced Tools > Design Tools > Cache Tool, then click the "Reset Skin Version GUID" button.
2. You can modify the skin using the .LESS code (as you said, in variables.less) and then recompile the skin using a tool like Prepros. Instructions for this can be found in this page, under the "What does this all involve?" heading. Basic steps:
   1. Download Prepros and run it.
   2. Download your skin and drag your skin folder onto the Prepros window.
   3. You should see a folder named "Framework" inside Prepros now, right click the folder and click the "refresh project" option
   4. Make the change to your variables.less file.
   5. After Prepros says it has compiled, copy your skin back over to your website.
   6. Reset the skin GUID (as mentioned above).
   7. Reload the page (ctrl+shift+r to be safe).

Hope this helps!