Dynamically adjusting css variables in a style sheet?

[Molemefef]

I am currently building a template and have come across the following problem. I want the user to be able to choose a color, any color, based on a hex number that their theme will have. It is currently hardcoded into many places in my style.css file. What I want to know is what is the best way to go about this? I have looked into less.js and is this the best option for me to go with? I would also have to recode a lot of the css into it less. So the question is what is the best option for me? I don't want to convert style.css into php just so I can accomplish this... because I am sure there is a better way. This will also become a wordpress theme eventually so I want to know how to do it with that as well based on user settings.Thank you.