What looks good with #AFC398?

February 4, 2011 2:40 PM

Programmers: know any good algorithms for picking colors, modifying colors or choosing colors that go well together? This is specifically for code. I'm NOT looking for apps that let you choose colors.

I'm not trying to solve a particular problem right now. But I often find that, when programming, I need to generate pleasing colors. I know that the best way to do this is to use a human eye, but imagine you were writing a program that filled the screen with random dots of various colors, but you wanted the colors to look good together.

Or you have a UI where the user gets to pick the background color, and you want to choose harmonious colors that go with his choice.

I know basic color theory. I understand the color wheel. So I could probably create most of these myself, but I'm wondering if there's a good resources for them online, something that works for C-family languages.

I am specifically coding in Actionscript, but I can convert stuff over from Java, C or whatever.

Actionscript generally deals with colors as hex values -- NOT AS STRINGS THAT LOOK LIKE HEXES. (I keep finding code on the web that accepts "#FF0000" and chops off the "#," and then proceeds to do all sorts of string-to-number parsing. I don't need anything like that.)

But I can convert a hex value into r-g-b values if necessary (and vice versa).

Examples of what I'm looking for are:

pickComplimentaryColor( inputColor );
returnArrayOfColorsThatGoWith( inputColor, numColorsWanted );
generatePastelColorsFromThisBaseColor( inputColor, numColorsWanted );
generateMetalicColorsFromThisInputColor( inputColor, numColorsWated );
darkenThisColor( inputColor, byThisPercent );
lightenThisColor( inputColor, byThisPercent );
randomColorThatGoesWith( inputColor );
rondomColorNearThisColor( inputColor );

etc.

I would love a huge library of cool manipulation functions!

posted by grumblebee to Computers & Internet (15 answers total)

There's a question like this on StackOverflow: Algorithm to randomly generate an aesthetically-pleasing color palette with some sort-of answers.
posted by GuyZero at 2:53 PM on February 4, 2011

There's A'hote, which I've never used but looks it would fit the bill. Also, Agave is an open source color scheme generator written in C++. I expect if you poke in the source you'll find some useful code in there.
posted by zjacreman at 2:55 PM on February 4, 2011

I find that this is much easier if you convert your colors into an HSV (or similar, like HSL or LCh) color space, where the color components correspond more closely to human notions of the qualities of the color. After you've generated your pleasing complementary colors in that color space, using whatever ad-hoc manipulations look good, convert them back to RGB for Flash's use.
posted by hattifattener at 3:01 PM on February 4, 2011

I don't know of any general tools for this, but I've had to tackle similar problems and found that just converting to a HSV colorspace makes most of what you're looking for almost trivial to do: to darken or lighten a color you just tweak the value, pastels are just pulling back on the saturation, for complementary colors just change the hue.
posted by ook at 3:02 PM on February 4, 2011

Transform RGB to HSV, map, transform back?
posted by phliar at 3:03 PM on February 4, 2011

If you're looking for pleasing combinations to use (and not as the goal of an app itself), why not let people do the work for you? For example, start with COLOURlovers most loved user-created palettes and browse. Or search palettes (except there is apparently no love for #AFC398).
posted by filthy light thief at 3:08 PM on February 4, 2011

Thanks for the answers so far.

I was a bit misleading above. I should have said that Actionscript generally deals with colors as byte-integer values in base 10. It doesn't deal with base-16 numbers (real hex values). You can tell it to color something 0xFFFFFF, but that gets translated into the base-ten number 16777215. In other words, in Flash colors are usually represented by the numbers 0 - 16777215, but you can enter those numbers as hex codes.


If you're looking for pleasing combinations to use (and not as the goal of an app itself), why not let people do the work for you?

Because I'm generally starting with a base color that isn't known until run-time (e.g. it's picked by he user. I need to choose other colors that look good with it.

I would also rather not be dependent on run-time calls to online services.

Finally, file size is often an issue in the work I do. So I'd prefer not to hard-code in large lookup tables.
posted by grumblebee at 3:50 PM on February 4, 2011

A researcher at the university I attend did his Doctoral thesis on this subject - Giovanni Moretti.

He can probably give you more information if you email him.
posted by dohmer at 3:57 PM on February 4, 2011

I've used a package for R called RColorBrewer which does basically this (e.g. for shading maps). It knows some basic palettes and then calculates however many appropriately distanced colors within them you need. After some googling, the comments in this Java thing suggest it's basically the same thing, and might work for you, but I haven't looked at it closely.
posted by shadow vector at 4:05 PM on February 4, 2011

I asked a similar question previously.

The answer I came up with was that converting to HSL colorspace (hue, saturation, and lightness) made manipulating a base color much more intuitive than working in RGB. Doing so allowed me to easily experiment with rules to generate relatively pleasing pallettes given any particular source color.

An example set of rules might be: backgrounds must have a lightness value below [X]. Text must have a lightness value above [Y]. Links will have their hue shifted from the seed color by 30%, and have the same lightness value as text. Etc.

HSL is a much more human-friendly way to think about colors. The math necessary to convert back and forth is pretty well documented and can be implemented easily in any language.
posted by jsturgill at 4:16 PM on February 4, 2011

I see that Philar mentioned HSV above. Same deal. Using one of those color spaces, it's trivial to calculate a complimentary color (by modifying hue), turn a color into a pastel (modifying lightness), and generate useful companion colors.
posted by jsturgill at 4:21 PM on February 4, 2011

Color wheels are based on complimentary color rules, which are based on HSL (hue/saturation/lightness) and not RGB. So first you need to convert your 6 character RGB hex code to HSL and then keep a small static list of a few common complimentary combinations.

You can find the code & some examples here.
posted by Civil_Disobedient at 4:27 PM on February 4, 2011

It's not precisely what you're looking for, but I have a little toy on my site that generates random colors for the 4 cells as backgrounds. Now, I wanted to have text on top of those colors, so I needed to choose a color for on top of that, now, I'm only choosing black or white, and I found the algorithm online -- yes, there's a step where I parse the string for color components, here's what the JavaScript code looks like:

function foregroundColorFromWebColor(color){
	// #RRGGBB
	// 0123456
	var bg = {
		R : parseInt(color.substr(1,2),16),
		G : parseInt(color.substr(3,2),16),
		B : parseInt(color.substr(5,2),16)
	};
	var nThreshold = 105;
	var bgDelta = ((bg.R * 0.299) + (bg.G * 0.587) + (bg.B * 0.114));
	var foreColor = (255 - bgDelta < nThreshold) ? '#000000' : '#ffffff';
	return foreColor;
}

I think I based this on this Determining Ideal Text Color Based on Specified Background Color in C#.

This is useful if you end up having to place text on things.

Honestly though, I think you can get a lot of the way there by simply increasing or decreasing the overall color values 10 or 15% for each of the rgb components, use the lighter for text-shadow, use the darker for some borders, or headers and you're pretty much there.
posted by artlung at 7:31 PM on February 4, 2011

It doesn't really matter what the internal Actionscript representation is, you can extract the R, G, B values from a base 10 integer by using bitwise-and and then convert those to floating point HSV values. Do all your work there, and then convert back. For example, if you want something of the same hue but which contrasts well with a given color, then invert V, e.g. if V < 0.50 then add 0.40, otherwise subtract 0.40. To get complementary colors keep V the same and change H by adding or subtracting values like 60°, 90°, or 180°. To create multiple complementary colors keep going, e.g. +60°, +120°, +180°, etc.
posted by Rhomboid at 11:35 PM on February 4, 2011

I wrote a PHP class some time back that can handle hex ('ffffff') or decimal RGB (255,255,255) conversion to HSV, adjustments to HSV values, and back to RGB. I ported the RGB->HSV algorithm (see the _updateHsv() method) from some other language (shame on me for not including a link in my comments!) so it probably wouldn't be too hard to get it into ActionScript.

The only built-in color scheme method it has is getComplimentary(), but once you have a color's data in HSV, it's dead easy to mathematically find triad/tetrad/nearby hues and create lighter/darker/pastel variations.
posted by usonian at 6:07 AM on February 5, 2011