4 ms·

RandomColor – a color generator for JavaScript

137 points by dmerfield 12y ago

jbranchaud 12y ago
Would it be possible to add a seed option so that you could request the same set of random colors if needed?
- tstrimple 12y ago
  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 https://github.com/davidbau/seedrandom
- jere 12y ago
  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 https://github.com/nluqo/autumn
OGC 12y ago
Oh, a random color generator that does not generate random colors, neat.
betadreamer 12y ago
Neat! I would love to see the math behind it.
- tokenizerrr 12y ago
  Here you go: https://github.com/davidmerfield/RandomColor/blob/master/randomColor.js#L29 https://github.com/davidmerfield/RandomColor/blob/master/ran...
mxfh 12y ago
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/ http://vis4.net/blog/posts/avoid-equidistant-hsv-colors/ [2] https://github.com/gka/chroma.js 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 http://tools.medialab.sciences-po.fr/iwanthue/index.php
- leeoniya 12y ago
  also check out http://alienryderflex.com/hsp.html http://alienryderflex.com/hsp.html
  - roryokane 12y ago
    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/ 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.
- jacobolus 12y ago
  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 https://github.com/jrus/chromatist
hcarvalhoalves 12y ago
Supporting complementary / tertiary colors would make it even more useful.
leeoniya 12y ago
"BRIGHT COLORS" and "DARK COLORS" overlap with several dark colors. pretty much every color model gets brightness values that dont jive with perceptual reality.
loopdoend 12y ago
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.
- pwg 12y ago
  Not a "library" but possibly worth a look: "Picking a range of colors": http://wiki.tcl.tk/38935 http://wiki.tcl.tk/38935
  - jacobolus 12y ago
    This is a bad approach, because HSV is not an appropriate color model for this purpose.
    - pwg 12y ago
      How so? What would be an appropriate model, and why is HSV not appropriate?
      - roryokane 12y ago
        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://www.boronine.com/husl/.
- aw3c2 12y ago
  http://colorbrewer2.org/ http://colorbrewer2.org/
kanakiyajay 12y ago
Anyone looking for a single line code to generate a random hex color: var randomColor = Math.floor(Math.random()*16777215).toString(16);
- oneeyedpigeon 12y ago
  FYI that's almost the first thing mentioned in the article!
sideproject 12y ago
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!
enscr 12y ago
Related : "How to Generate Random Colors Programmatically" http://martin.ankerl.com/2009/12/09/how-to-create-random-colors-programmatically/ http://martin.ankerl.com/2009/12/09/how-to-create-random-col...
riffraff 12y ago
Maybe of interest: colorbrewer palettes as included in D3.js, which is my goto choice for colors http://bl.ocks.org/mbostock/5577023 http://bl.ocks.org/mbostock/5577023 https://github.com/mbostock/d3/tree/master/lib/colorbrewer https://github.com/mbostock/d3/tree/master/lib/colorbrewer
rhubarbcustard 12y ago
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.
calineczka 12y ago
I went with the approach of hardcoding few sets generated by http://tools.medialab.sciences-po.fr/iwanthue/ 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.
bikamonki 12y ago
Great job! I know need not to worry about font color just pick one that reads fine for a given hue.
heydenberk 12y ago
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 https://github.com/heydenberk/stochator [1] https://github.com/heydenberk/stochator#from-predefined-sets https://github.com/heydenberk/stochator#from-predefined-sets
bilalq 12y ago
This is actually really cool. I can think of several practical applications for this.

137 points by dmerfield 12y ago

jbranchaud 12y ago

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

tstrimple 12y ago
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 https://github.com/davidbau/seedrandom
jere 12y ago
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 https://github.com/nluqo/autumn

OGC 12y ago

Oh, a random color generator that does not generate random colors, neat.

betadreamer 12y ago

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

tokenizerrr 12y ago
Here you go: https://github.com/davidmerfield/RandomColor/blob/master/randomColor.js#L29 https://github.com/davidmerfield/RandomColor/blob/master/ran...

mxfh 12y ago

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/ http://vis4.net/blog/posts/avoid-equidistant-hsv-colors/ [2] https://github.com/gka/chroma.js 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 http://tools.medialab.sciences-po.fr/iwanthue/index.php

leeoniya 12y ago
also check out http://alienryderflex.com/hsp.html http://alienryderflex.com/hsp.html
- roryokane 12y ago
  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/ 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.
jacobolus 12y ago
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 https://github.com/jrus/chromatist

hcarvalhoalves 12y ago

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

leeoniya 12y ago

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

loopdoend 12y ago

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.

pwg 12y ago
Not a "library" but possibly worth a look: "Picking a range of colors": http://wiki.tcl.tk/38935 http://wiki.tcl.tk/38935
- jacobolus 12y ago
  This is a bad approach, because HSV is not an appropriate color model for this purpose.
  - pwg 12y ago
    How so? What would be an appropriate model, and why is HSV not appropriate?
    - roryokane 12y ago
      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://www.boronine.com/husl/.
aw3c2 12y ago
http://colorbrewer2.org/ http://colorbrewer2.org/

kanakiyajay 12y ago

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

oneeyedpigeon 12y ago
FYI that's almost the first thing mentioned in the article!

sideproject 12y ago

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!

enscr 12y ago

Related : "How to Generate Random Colors Programmatically" http://martin.ankerl.com/2009/12/09/how-to-create-random-colors-programmatically/ http://martin.ankerl.com/2009/12/09/how-to-create-random-col...

riffraff 12y ago

Maybe of interest: colorbrewer palettes as included in D3.js, which is my goto choice for colors http://bl.ocks.org/mbostock/5577023 http://bl.ocks.org/mbostock/5577023 https://github.com/mbostock/d3/tree/master/lib/colorbrewer https://github.com/mbostock/d3/tree/master/lib/colorbrewer

rhubarbcustard 12y ago

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.

calineczka 12y ago

I went with the approach of hardcoding few sets generated by http://tools.medialab.sciences-po.fr/iwanthue/ 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.

bikamonki 12y ago

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

heydenberk 12y ago

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 https://github.com/heydenberk/stochator [1] https://github.com/heydenberk/stochator#from-predefined-sets https://github.com/heydenberk/stochator#from-predefined-sets

bilalq 12y ago

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