How to determine color transformations from given colors?

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?

Answer

Not certain what you’re asking here. Using the HSL colour model, the derivative colours all appear to be nearly the same hue with different saturations and lightness — the two derivative colours are desaturated the same amount, one’s slightly lighter than the other. So I’m going to guess you’re looking for derivative gradient colours all of the same hue.

If that’s what you’re looking for, there’s no need to brute force anything. Just plug in your new hue in the HSL colour space. Naturally, MSIE is late to the party and doesn’t support HSLa, so if you really want to get funky you’ll have to programatically calculate them yourself.

See:
http://hslpicker.com/#7e1a00

EDIT

Just noticed this comment on the article I linked:

SASS is a server-side CSS pre-processor that also supports HSLA, math, nesting, and mixins. However, SASS outputs HSLA colors as hex so it works on IE.

Looks like SASS converts the colours to hex when it compiles to CSS so looks like you’re good to go.

Attribution
Source : Link , Question Author : RSG , Answer Author : ghoppe

Leave a Comment