RandomColor – a color generator for JavaScript | Hacker News Reader

RandomColor – a color generator for JavaScript

llllll.li

137 pointsdgam28 comments

Good library to begin with, but could do better on the perceived brightness.

Since HSV is NOT perceived as evenly distributed to the human eye along the value(lightness) axis[1],

would recommend employing chroma.js[2] which uses the HCL and CIE color spaces, which in general yield more pleasing results for use in color scales.

[1] http://vis4.net/blog/posts/avoid-equidistant-hsv-colors/

[2] https://github.com/gka/chroma.js

i want hue might be a bit of overkill though: http://tools.medialab.sciences-po.fr/iwanthue/index.php

Judging from the little interactive diagrams in your link #1, the author has set up the CIELAB and RGB color spaces with different white points, without doing any kind of chromatic adaptation transform in between. As a result, the widget presents a sort of pale orangish-brownish color as 'neutral' and all the slices related to hue and chroma are noticeably off. It’s an unfortunate oversight, because it makes them much more confusing than they would otherwise be.

In general, I’d recommend people use the CIECAM02 color space for most of the purposes being discussed in this thread. Here’s my implementation: https://github.com/jrus/chromatist

also check out http://alienryderflex.com/hsp.html

That page has a nice graphic clearly showing the problems with HSV and HSL. But the color scheme HSP it invents is not ideal. HUSL (http://www.boronine.com/husl/) is a strict improvement, as you can see from its comparison table of HUSL vs. HSL. HSP fixes the “lightness” problem with HSL, and HUSL fixes that as well as the “hue uniformity” problem.

Maybe of interest: colorbrewer palettes as included in D3.js, which is my goto choice for colors

http://bl.ocks.org/mbostock/5577023

https://github.com/mbostock/d3/tree/master/lib/colorbrewer

A really important thing for data-vis is generating distinguishably different random colors. It'd be great to have a library that produces series of distinguishable, pleasing colors.

I have a library that does this. It picks random colors in the RGB space (or any subspace) and then uses simulated annealing to optimise the distance between the colors in CIE LAB:

https://github.com/danieldk/quzah

I am no expert in this field, I just implemented the work of C.A. Glasbey, et al., 2006 :). We use it in one visualisation and the result is pleasing to my eye ;).

Not a "library" but possibly worth a look:

"Picking a range of colors": http://wiki.tcl.tk/38935

This is a bad approach, because HSV is not an appropriate color model for this purpose.

How so? What would be an appropriate model, and why is HSV not appropriate?

As the link says, “it's not perfect, as it doesn't take into account the different visual acuity of the human eye in different color channels”. That is why HSV is not appropriate – its H, S, and V scales are only approximations of axes that categorize colors as humans perceive them. For instance, V (value) roughly corresponds to how light or dark a color is, but blue with maximum V is way darker than yellow with maximum V.

I don’t know what the best model is. HSL, at least, is a simple-to-understand strict improvement over HSV. Other people in this thread are suggesting models I don’t know much about like CIELAB and CIECAM02. A model I have used to choose colors before, which is a variation of CIELUV and an improvement over HSL, is HUSL: http://www.boronine.com/husl/.

http://colorbrewer2.org/

Would it be possible to add a seed option so that you could request the same set of random colors if needed?

It's using Math.random, so no it's not currently possible. You'd have to replace the Math.random calls with something like this: https://github.com/davidbau/seedrandom

Self plug. Autumn.js will do this if you pass it the same keys both times. Or it will do it by default if you call it with no arguments. https://github.com/nluqo/autumn

Related : "How to Generate Random Colors Programmatically"

http://martin.ankerl.com/2009/12/09/how-to-create-random-col...

This is actually really cool. I can think of several practical applications for this.

I wrote a general purpose (pseudo-)random value generation library[0] that does random color generation[1] among lots of other capabilities. It'd be interesting to see how you could use the mutator to implement some of this functionality.

[0] https://github.com/heydenberk/stochator [1] https://github.com/heydenberk/stochator#from-predefined-sets

I went with the approach of hardcoding few sets generated by http://tools.medialab.sciences-po.fr/iwanthue/ (which i think already been covered on HN) in my app. Just one set when i need <= 5 colors, one for <= 20, 50 and 100. Oh, and alternative set with different palette of colors when I need two diagrams on the same page. As a colorblind person I must say I was very happy with the results.

"BRIGHT COLORS" and "DARK COLORS" overlap with several dark colors. pretty much every color model gets brightness values that dont jive with perceptual reality.

This produces really nice colour sets, I'll definitely be using this to generate some backgrounds for blog posts. Nice work and thanks for sharing.

Great job! I know need not to worry about font color just pick one that reads fine for a given hue.

Supporting complementary / tertiary colors would make it even more useful.

really like it. did some research before on how to generate colours that would be good for some simple visualizations, but found it difficult. This is great for a quick retrieval of colours that you can use!

Neat! I would love to see the math behind it.

Here you go: https://github.com/davidmerfield/RandomColor/blob/master/ran...

Anyone looking for a single line code to generate a random hex color: var randomColor = Math.floor(Math.random()*16777215).toString(16);

FYI that's almost the first thing mentioned in the article!

Reply on news.ycombinator.com