How to determine color transformations from given colors?

Question

Our designer has provided us with some nice web 2.0 buttons, etc. I translated them into beautiful CSS3. Now I want to go overboard and generalize the color scheme using Sass color manipulation.

Given a base brand-color in the design (#7e1a00) and a set of derivative colors used on buttons, links, gradients, etc. (#D05B3D,#973D24,#7E1900), how can I determine what transformation must be applied to the brand-color to result in a derivative color?

I can guess and check, or write a brute force program to try all the combinations- it seems like this might be something there's a clever and easy way to determine.

Any thoughts?

Edit This doesn't need to be a generalized solution- I can reasonably determine which transformation to apply by looking at the colors. I need to determine the parameters for the transform.

Answer 1

The easiest way is probably to convert the colors into HSL and look at the differences there. All the Sass color manipulation functions work in the HSL space, so it should be easy to tell if you need to e.g. increase the lightness or decrease the saturation.

Answer 2

In theory, there are infinitely many functions that go from one value to another, but in practice just a few are sensible. The thing is, you may know which function you want to use, but determining the arguments is number crunching that computers are better at.

I created a tool that suggests color functions. It lists most of the SASS functions that get from one color to another, so that you can focus on whether using darken or softlight makes more sense in terms of your design.