
Show HN: A Color Palette Generator I Built For My Senior Thesis - joshrael
http://www.colormoo.com/
======
psuter
Picking colors is an interesting problem at the boundary of what can be done
algorithmically with satisfactory results.

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/](http://colorschemedesigner.com/)

[2]
[https://www.colorschemer.com/online.html](https://www.colorschemer.com/online.html)

[3] [http://flatuicolors.com/](http://flatuicolors.com/)

[4] [http://niklausgerber.com/blog/flat-ui-color-autumn-
edition/](http://niklausgerber.com/blog/flat-ui-color-autumn-edition/)

[5]
[http://i1.ytimg.com/vi/XcwZF1aF4LM/maxresdefault.jpg](http://i1.ytimg.com/vi/XcwZF1aF4LM/maxresdefault.jpg)

[6] [http://labs.tineye.com/color/](http://labs.tineye.com/color/)

~~~
aaronblohowiak
> at the boundary of what can be done algorithmically with satisfactory
> results

Mostly due to insufficient models of human perception of color. Our perception
of color is not accurate, so picking complementary colors based on their
actual wavelength will be less pleasing than picking complementary colors
based on a perceptual model. I don't think any of the pickers you link to
attempt this.

One attempt with libraries in a few common languages is HUSL:
[http://www.boronine.com/husl/syntax/#997061](http://www.boronine.com/husl/syntax/#997061)

A much older approach is described here:
[http://en.wikipedia.org/wiki/CIELUV](http://en.wikipedia.org/wiki/CIELUV)

Learn more about color perception here:
[http://en.wikipedia.org/wiki/Color_perception](http://en.wikipedia.org/wiki/Color_perception)

[Edit: just noticed this was referenced by this comment below:
[https://news.ycombinator.com/item?id=7562905](https://news.ycombinator.com/item?id=7562905)]

------
boronine
Does the algorithm use HSL as its color space? I've seen many online palette
tools that use HSL color wheels for picking colors. It never made sense to me
why they wouldn't use a perceptually uniform color space like CIELUV. I
actually made a color space derived from CIELUV specifically for the task of
picking colors [1]. I never wrote a 'proper' palette generator using it, but I
did make a demo that works pretty well [2]. Considering that you're actually
studying this, I would be curious to know what you think.

[1] [http://www.boronine.com/husl/](http://www.boronine.com/husl/)

[2]
[http://www.boronine.com/husl/syntax/](http://www.boronine.com/husl/syntax/)

~~~
joshrael
Thank you for creating HUSL! I discovered it as I was midway through my
project. I am very glad that this exists! I agree, CIELUV or CIELAB would
probably be a better fit. As I mention in my comment above, it wasn't
immediately clear to me how I would generate a palette using the space given
the holes, especially since I allow the user to choose any color they want.

I am curious, how would you approach generating a palette using these color
spaces?

~~~
boronine
Thanks :)

> how would you approach generating a palette using these color spaces?

This is exactly the problem I was trying to solve in creating HUSL.

You can think of HUSL as a version of CIELUV (Or, more specifically CIELCHuv,
the cylindrical transformation of CIELUV) that is stretched vertically to fill
in the 'holes'. HUSLp, the pastel version, is similar, but instead of
stretching, it cuts the saturated colors off. (You can switch between them in
the demo).

In fact, those stretching and cutting functions are the only thing that HUSL
really does, the rest is all CIE math :P

------
eam
I generated about 30 different palettes just to try it out, but I didn't like
any of them. Most of the palettes generated had colors that didn't even work
well with each other, maybe it's just my taste. Good work though, I'm sure
you'll be able to make it better.

------
lubujackson
Maybe this is useful, but I'd like to see a little bit of info on each palette
as to WHY it was generated the way it was generated. The palette you need for
a pie chart is much different than one you need for a website.

For web site palettes, I like to poke around on
[http://www.colourlovers.com](http://www.colourlovers.com) for inspiration.
[http://colorschemedesigner.com](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](http://www.colorhexa.com) when I just want to
quickly darken or lighten a color.

~~~
eam
Sometimes I'll browse through designs on
[http://dribbble.com/](http://dribbble.com/), when I see a design where I like
the colors I'll click on it and it'll actually show me a nice palette of all
colors in the design. What's nice about it is since these designs were done by
great designers the palette almost always works as-is which is quite nice. :)

------
Sweyla
Here is my immediate suggestion: Show only one palette at a time. By putting
incompatible patterns so close, you get a matrix of colors that with high
probability do not harmonize well.

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].

[1] [http://sweyla.com/themes/](http://sweyla.com/themes/)

~~~
pyrocat
That's pretty rad. Is the source available anywhere? I'd like to see something
like this for Sublime.

~~~
Blahah
You can download the TextMate theme file for the colour scheme you generate.
You can use the tm file directly in Sublime.

~~~
pyrocat
Oh nice, I wasn't aware of that. Thanks!

------
joshrael
Thanks for the feedback everyone. Perhaps I should have included a bit more
explanation.

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/](http://vis4.net/blog/posts/avoid-equidistant-hsv-colors/)

------
canthonytucci
Very cool, however I was hoping the cow's spots would change colors as I moved
the sliders.

------
mck-
Kuler [1] is a great tool by Adobe that I love to use

[1] [https://kuler.adobe.com](https://kuler.adobe.com)

------
nanidin
Is this the same as Munsell for Designers[0]?

[0][http://projects.kumpf.cc/projects/MunsellForDesigners/index....](http://projects.kumpf.cc/projects/MunsellForDesigners/index.html)

------
epaladin
Can this create a palette of an arbitrary number of colors, or is it limited
to six? I've been looking for a good way to generate an arbitrary number of
visually distinct colors for a while, to use in visualizing high dimensional
datasets in bioinformatics. The closest I've come so far is
[http://tools.medialab.sciences-
po.fr/iwanthue/](http://tools.medialab.sciences-po.fr/iwanthue/) (which is
great but I need to port it to R one of these days)

~~~
danieldk
I have recently written a library that picks N as distinct possible from the
RGB color space. Since RGB is not a perceptual color space, it measures
distances between RGB colors in CIE Lab. Since the optimization of the most
distinct color set can get stuck in local maxima, it uses simulated annealing
for optimization.

One nice touch is that you can plug your own random RGB color generators that
feed the optimizer, to find N distinct colors in a subspace of RGB. E.g., I
use it to generate distinct pastel colors in visualization of linguistic data.

[https://github.com/danieldk/quzah](https://github.com/danieldk/quzah)

(I am not an expert in this topic, but I couldn't find a good Java library
with solid theoretical underpinnings.)

------
bennyg
For those that want to do this on iOS, I created a handy UIColor (or NSColor
if OSX dev is your thing) category that can create 5 tone color schemes by
passing in one color.

[https://github.com/bennyguitar/Colours](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.

------
wil421
Not working in Chrome on OS X. Seems to look ok in FF and Safari although I am
not sure where the input for color is supposed to be positioned, it looks out
of place.

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.

~~~
joshrael
Thanks for noting that!

I'm a big fan of Foundation, although if I wasn't trying to get this together
so quickly I might have used something like Skeleton[1]. But I'm sure that is
another discussion thread entirely ;)

[1] [http://www.getskeleton.com/](http://www.getskeleton.com/)

------
scottndecker
Cool tool. Good work! Feedback: I agree w/ other comment...the palette options
I get don't seem to go well together. Maybe you're trying to include too many
colors in a palette? Also, I'd center the checkboxes on the button when
picking a palette.

------
dhotson
If you're into this kind of thing, definitely check out the NASA color usage
research lab website:
[http://colorusage.arc.nasa.gov](http://colorusage.arc.nasa.gov)

------
catshirt
with all due respect, and only for whatever it's worth, every palette it
generated is worse than any palette i found on colourlovers.com. but cool
project. :)

~~~
joshrael
Proof, I suspect, that humans are still better than computers. Or at least
better than my computers. For now.

------
booruguru
I posted something similar a while back...

[http://www.rgbhexcode.com](http://www.rgbhexcode.com)

~~~
vxNsr
Your CSS is a little broken in chrome v34, the black box that overlays when
you mouse over colors are about 15px to low and kinda screw things up the
lower down the page you go...

------
pvnick
Great job, I like it a lot. Congratulations on graduating soon. I wish you
luck in all your future endeavors :)

------
pseudometa
I'm getting a lot of really ugly palettes... by "a lot" I mean all of them.

~~~
pseudometa
This may be a presentation problem as generally when using a palette, colors
are not used all equally and not necessarily all right next to eachother.
Perhaps a thesis for another grad student.

------
garg
Nice work! I made [http://cy.mk/](http://cy.mk/) as a project for learning
javascript a while ago. I need to go back to it and work on it some more.

------
arsey
Neat; glad to see HSL values included!

