Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.

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?

share|improve this question
add comment

2 Answers

up vote 3 down vote accepted

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.

share|improve this answer
    
Thanks for the reply, and sorry for the poor wording. What tool did you use to determine that #D05B3D is desaturated/lighter/darker than the brand color, and with that tool is it possible to determine the transformation to reproduce that color from the brand? –  RSG Jun 28 '11 at 9:34
    
I linked the tool I used on the third line, after the word "See:" — plug the hex codes into the first box and watch the numbers change. –  ghoppe Jun 28 '11 at 16:04
add comment

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.

share|improve this answer
    
Nice answer, you are the first person who gives a human readable explanation of those 4 types of color comparisons –  PsychoDad Jul 24 '11 at 1:17
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.