Show HN: A Color Palette Generator I Built For My Senior Thesis

Picking colors is an interesting problem at the boundary of what can be done algorithmically with satisfactory results.<p>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 &quot;hand crafted&quot; 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.<p>Thinking that &quot;picking colors that go well together&quot; 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.<p>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.<p>[1] <a href="http://colorschemedesigner.com/" rel="nofollow">http:&#x2F;&#x2F;colorschemedesigner.com&#x2F;</a><p>[2] <a href="https://www.colorschemer.com/online.html" rel="nofollow">https:&#x2F;&#x2F;www.colorschemer.com&#x2F;online.html</a><p>[3] <a href="http://flatuicolors.com/" rel="nofollow">http:&#x2F;&#x2F;flatuicolors.com&#x2F;</a><p>[4] <a href="http://niklausgerber.com/blog/flat-ui-color-autumn-edition/" rel="nofollow">http:&#x2F;&#x2F;niklausgerber.com&#x2F;blog&#x2F;flat-ui-color-autumn-edition&#x2F;</a><p>[5] <a href="http://i1.ytimg.com/vi/XcwZF1aF4LM/maxresdefault.jpg" rel="nofollow">http:&#x2F;&#x2F;i1.ytimg.com&#x2F;vi&#x2F;XcwZF1aF4LM&#x2F;maxresdefault.jpg</a><p>[6] <a href="http://labs.tineye.com/color/" rel="nofollow">http:&#x2F;&#x2F;labs.tineye.com&#x2F;color&#x2F;</a>

Does the algorithm use HSL as its color space? I&#x27;ve seen many online palette tools that use HSL color wheels for picking colors. It never made sense to me why they wouldn&#x27;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 &#x27;proper&#x27; palette generator using it, but I did make a demo that works pretty well [2]. Considering that you&#x27;re actually studying this, I would be curious to know what you think.<p>[1] <a href="http://www.boronine.com/husl/" rel="nofollow">http:&#x2F;&#x2F;www.boronine.com&#x2F;husl&#x2F;</a><p>[2] <a href="http://www.boronine.com/husl/syntax/" rel="nofollow">http:&#x2F;&#x2F;www.boronine.com&#x2F;husl&#x2F;syntax&#x2F;</a>

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

Maybe this is useful, but I&#x27;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.<p>For web site palettes, I like to poke around on <a href="http://www.colourlovers.com" rel="nofollow">http:&#x2F;&#x2F;www.colourlovers.com</a> for inspiration. <a href="http://colorschemedesigner.com" rel="nofollow">http:&#x2F;&#x2F;colorschemedesigner.com</a> helps with finding appropriately distanced colors that work nicely together (set colorspace to Opaltone colors to find a nice palette) and there is always <a href="http://www.colorhexa.com" rel="nofollow">http:&#x2F;&#x2F;www.colorhexa.com</a> when I just want to quickly darken or lighten a color.

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.<p>I am assuming you have a slightly different algorithm for these three, since the middle one doesn&#x27;t seem to match the root color&#x27;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&#x2F;saturation as much as possible.<p>This caught my eye because I developed my own algorithm for this a few years ago and applied it to syntax highlighting[1].<p>[1] <a href="http://sweyla.com/themes/" rel="nofollow">http:&#x2F;&#x2F;sweyla.com&#x2F;themes&#x2F;</a>

Thanks for the feedback everyone. Perhaps I should have included a bit more explanation.<p>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&#x27;ve selected (i.e. complimentary colors, analogous colors, triadic colors). One the palettes that my app provides uses this approach.<p>Another approach I looked at was a trick that I&#x27;ve seen many designers use in which you &quot;mix&quot; 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&#x27;ve selected.<p>Finally, I am a huge fan of Gregor Aisch&#x27;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).<p>As he mentions in the post I&#x27;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.<p>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!<p>[1] <a href="http://vis4.net/blog/posts/avoid-equidistant-hsv-colors/" rel="nofollow">http:&#x2F;&#x2F;vis4.net&#x2F;blog&#x2F;posts&#x2F;avoid-equidistant-hsv-colors&#x2F;</a>

Very cool, however I was hoping the cow&#x27;s spots would change colors as I moved the sliders.

Kuler [1] is a great tool by Adobe that I love to use<p>[1] <a href="https://kuler.adobe.com" rel="nofollow">https:&#x2F;&#x2F;kuler.adobe.com</a>

Is this the same as Munsell for Designers[0]?<p>[0]<a href="http://projects.kumpf.cc/projects/MunsellForDesigners/index.html" rel="nofollow">http:&#x2F;&#x2F;projects.kumpf.cc&#x2F;projects&#x2F;MunsellForDesigners&#x2F;index....</a>

Can this create a palette of an arbitrary number of colors, or is it limited to six? I&#x27;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&#x27;ve come so far is <a href="http://tools.medialab.sciences-po.fr/iwanthue/" rel="nofollow">http:&#x2F;&#x2F;tools.medialab.sciences-po.fr&#x2F;iwanthue&#x2F;</a> (which is great but I need to port it to R one of these days)

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.<p><a href="https://github.com/bennyguitar/Colours" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;bennyguitar&#x2F;Colours</a><p>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 &quot;like&quot; colors on the fly.

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.<p>I see you used Zerb Foundation, how did you like it I am thinking of using it on a side project.<p>Edit: Working in Chrome after a few refreshes.

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

If you&#x27;re into this kind of thing, definitely check out the NASA color usage research lab website: <a href="http://colorusage.arc.nasa.gov" rel="nofollow">http:&#x2F;&#x2F;colorusage.arc.nasa.gov</a>

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

I posted something similar a while back...<p><a href="http://www.rgbhexcode.com" rel="nofollow">http:&#x2F;&#x2F;www.rgbhexcode.com</a>

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

I&#x27;m getting a lot of really ugly palettes... by &quot;a lot&quot; I mean all of them.

Nice work! I made <a href="http://cy.mk/" rel="nofollow">http:&#x2F;&#x2F;cy.mk&#x2F;</a> as a project for learning javascript a while ago. I need to go back to it and work on it some more.

Neat; glad to see HSL values included!