by joshrael on 4/9/14, 4:28 PM with 44 comments
by psuter on 4/9/14, 5:51 PM
For my latest side project, I needed sets of up to 5 colors that go well together but are sufficiently distant not too be confused. Since this is the task that palette generators typically set out to achieve, I tried a couple of them [1,2], as well as some "hand crafted" palettes found on design blogs [2,3]. In each case, I found that the palettes, while satisfying the desired properties, were aesthetically not particularly pleasing, in a sense lacking a unifying quality.
Thinking that "picking colors that go well together" must be a solved problem, I resorted to looking up photographs of 20th century paintings (e.g. [5]) and using the color picker in Gimp to extract what I visually perceived as the most important colors. This gave me far better palettes that any of the generators.
There are ways to do this algorithmically, as a form of constrained color quantization, and I later found online implementations as well [6] that give results very close to my hand picking.
[1] http://colorschemedesigner.com/
[2] https://www.colorschemer.com/online.html
[4] http://niklausgerber.com/blog/flat-ui-color-autumn-edition/
by boronine on 4/9/14, 10:25 PM
by eam on 4/9/14, 6:27 PM
by lubujackson on 4/9/14, 7:03 PM
For web site palettes, I like to poke around on http://www.colourlovers.com for inspiration. http://colorschemedesigner.com helps with finding appropriately distanced colors that work nicely together (set colorspace to Opaltone colors to find a nice palette) and there is always http://www.colorhexa.com when I just want to quickly darken or lighten a color.
by Sweyla on 4/9/14, 7:02 PM
I am assuming you have a slightly different algorithm for these three, since the middle one doesn't seem to match the root color's brightness, and they seem to match saturation differently too. Make a choice between these before you generate, and if you want to eliminate this choice, I would go with the one that tries to match brightness/saturation as much as possible.
This caught my eye because I developed my own algorithm for this a few years ago and applied it to syntax highlighting[1].
by joshrael on 4/9/14, 11:54 PM
I was primarily interested in an algorithmic approach to generating color palettes. I am familiar with the various tools available (Adobe Kuler being my favorite) that use color theory as a basis of providing colors to go with one that you've selected (i.e. complimentary colors, analogous colors, triadic colors). One the palettes that my app provides uses this approach.
Another approach I looked at was a trick that I've seen many designers use in which you "mix" a little of the color you want to use with another color. To play with this concept, I generate a random set of colors and blend it with the one that you've selected.
Finally, I am a huge fan of Gregor Aisch's work [1] with colors in regard to statistics. My third palette borrows a method of his that I had not seen elsewhere. He essentially maps a particular color space into two dimensions and keeps the third constant. You can sample equidistant colors along a line in that space to derive a set of colors that look good together. In my case I used HSL, where I hold Lightness constant (I use the value of lightness of the color you selected).
As he mentions in the post I've linked below, HSL is not necessarily the best color model to use this way. A more perceptually uniform color space like CIE LAB would be better. However, working with this space in this way is a little more complicated because, since this color space models how we perceive colors, it has holes. I had trouble finding an elegant way around those holes such that I could consistently offer a fourth palette.
Anyway, after looking at each of these methods, I was curious if any one of them would rise to the top as the favorite among users. Or, perhaps one method would perform better for some colors over others. I am in the midst of processing all this data and my thesis should be published within the next month. Thank you for helping me collect data!
[1] http://vis4.net/blog/posts/avoid-equidistant-hsv-colors/
by canthonytucci on 4/9/14, 6:58 PM
by mck- on 4/9/14, 5:55 PM
by nanidin on 4/9/14, 7:11 PM
[0]http://projects.kumpf.cc/projects/MunsellForDesigners/index....
by epaladin on 4/9/14, 6:08 PM
by bennyg on 4/9/14, 11:14 PM
https://github.com/bennyguitar/Colours
Beyond the color scheme part, another cool thing you can also do is find distances between colors using CIE_LAB specification. This is great for finding "like" colors on the fly.
by wil421 on 4/9/14, 5:29 PM
I see you used Zerb Foundation, how did you like it I am thinking of using it on a side project.
Edit: Working in Chrome after a few refreshes.
by scottndecker on 4/9/14, 6:43 PM
by dhotson on 4/10/14, 9:33 AM
by catshirt on 4/9/14, 10:58 PM
by booruguru on 4/9/14, 6:06 PM
by pvnick on 4/9/14, 9:19 PM
by pseudometa on 4/9/14, 10:56 PM
by garg on 4/10/14, 1:53 AM
by arsey on 4/9/14, 4:56 PM
