What is the alghoritm to generate an analogic color scheme based on a single input color?

Question

I'm creating a website and as I am thoroughly enjoying using SASS/Compass for organizing my CSS, I came to the idea of making my website themable.

At first, I was thinking to simply have a set of say 8 variables that represent the colors of a theme palette. Next, all CSS rules will use those colors, or lightened/darkened versions of it (for shadows, overlays, gradients and glows).

Then I came to the crazy idea of having a single theme base color, after which the rest of the palette is calculated from that. For example:

In this tool, I picked a single base color (the green at the inside of the circle), after which it generated a full color palette based on that (see right), in this case it is an "analogic" color scheme.

My question is if the alghoritm in use by this tool can be replicated in SASS, so that I can have a single configurable color, whilst SASS calculates the rest of the color scheme.

I know some of you may doubt the usefulness of this exercise, but I think of it as a fun experiment.

Answer 1

For one thing, that color wheel is incorrect. The complementary color of red is cyan, not green. Also, The correct term is 'analogous', not 'analogic'. I personally think this website is better.

To create a basic analogous color scheme, the first thing you need to have is a method to convert colors to and from HSL (or similar hue-based) form. Assuming you have this, the basic algorithm for the analogous 3-color scheme is:

Inputs: BaseColor, HueVariation

Color1 = BaseColor
Color2 = ColorFromHSL(Hue(BaseColor) + HueVariation, Saturation(BaseColor), Lightness(BaseColor))
Color3 = ColorFromHSL(Hue(BaseColor) - HueVariation, Saturation(BaseColor), Lightness(BaseColor))

Wikipedia has more information.

Answer 2

What you are looking for is a color harmony. There are lots of predefined schemes that can help you generate such harmonies. Usually, they are based on the HSL color space rather than the RGB color space.

Here's a link you can use:

http://www.tigercolor.com/color-lab/color-theory/color-harmonies.htm

http://sputnik.freewisdom.org/lib/colors/

You might also wanna try to search in google for other schemes.

Most of the time, a scheme will work with whatever given input color, so you may be able to create a custom scheme for one color and apply it for another set of colors.