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?

Answer 1

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.

Answer 2

It will help if you have some kind of basic grasp of color harmony and how it can be calculated.

There are many ways to derive a harmonious color scheme from a base color. One of these is monochromatic as you have in your example. The H (hue) value is what we perceive as "color." Perhaps the easiest way to think of it is, it's what is not there in a black-and-white photograph of a leaf. Take away the hue, and you have a grayscale "color." Alter the saturation (purity) by adding or subtracting black or white to any given hue and you will have "different colors" that are variations of the same Hue. Reducing or increasing the Value (lightness or darkness) likewise doesn't change the Hue.

Adobe's Kuler tool will give you a painless introduction to color harmony. Enter your base color (the brand base color) and choose the various options from "Select a rule" to see what the results are. The resulting colors are shown with their hex, hsv (same as hsl), RGB, CMYK and Lab values, and you can work things from there.

As a rough guide:

• Monochromatic color harmony maintains a constant value in the H and varies the S and V values.
• Complementary color harmony uses H values that are about 200 degrees apart (with variations in S and V as desired).
• Triadic color harmony uses 3 H values roughly 130 degrees apart (vary S and V to taste).
• Analogous color harmony uses 3 or more H values in a range of about 30 degrees plus and minus from your key color.

All of these are fairly safe to work with if you're not well-versed in color harmony, and pretty easy to plug into SASS, but there's no substitute for (and no harm in) becoming knowledgeable in the subject. Google "Color Wheel" and "Color Harmony" and dig in a bit. GO to your local art store and buy a color wheel, read its instructions, and play with it a bit.