6 ms·

"I Want Hue" – Colors for Data Scientists

189 points by jacomyal 14y ago

ChuckMcM 14y ago
This is an interesting tool, it fails at 16 colors. Which is surprising. (it may be the gamut of my display of course but I would think 16 would be within its abilities). That is probably the most number of distinct colors I've needed in a graph. Works nicely for numbers 10 and below.
- mturmon 14y ago
  Hmm...the linked page worked for me on several tries for 16, 20, and 22 colors, even restricting the luminance somewhat. I used the protovis categorical colors (http://mbostock.github.com/protovis/docs/color.html http://mbostock.github.com/protovis/docs/color.html, see at the bottom of the page) when I needed a 20-color map recently.
  - ChuckMcM 14y ago
    Those are nice, I've bookmarked the protovis ones. Re-running my experiment, I seem to get two nearly identical magentas or two nearly identical greens every time I re-roll. It is entirely possible its my monitor though.
ChrisNorstrom 14y ago
Aw, so sorry to tell you but it doesn't work in the latest version of IE. I'm not even sure if you should bother trying to get it to work but at minimum just put up a message to IE users telling them to use another browser.
mnicole 14y ago
Love this, even just for website palettes. Nice work.
Raydric 14y ago
I'm glad it's not a Mordekaiser circle jerk.
michaelhoffman 14y ago
This is really nice! And attractive. One of the reasons I'll probably stick with ColorBrewer palettes for now is that I can easily find color schemes that are safe for people with colorblindness or for display in particular environments.
- DigitalJack 14y ago
  I appreciate this. For a deficiency that affects so many men, I'm always dismayed by the lack if awareness.
hotpockets 14y ago
I've used something similar in matlab, which I though worked a little better. It started out with red green blue, colors frequently considered maximally distinct, at least on color monitors for the non-colorblind. Then it just found maximally distant points in the color cube. I found it worked nicely and you could also seed it with your own starting color(s). Edit: found out it is based on Lab color space.
- mturmon 14y ago
  But, doing it this way can result in oversaturated colors that compete for attention.
  - hotpockets 14y ago
    Interesting point. Though, some of the colors in OPs preset examples seemed very similar, even with only 7 colors. For generating graphs, maximally distinct colors seems the primary goal, even if they compete for attention, perhaps because of it.
    - deleted 14y ago
      [deleted]
- svachalek 14y ago
  I'm no color expert but I'm pretty sure color distance in RGB space is a pretty poor metric compared to other color models (at least some of them). Looking at an RGB color cube I see big splashes of near-identical colors while the entire spectrum of oranges is hard to even find.
  - hotpockets 14y ago
    Looking closer, it uses the Lab colorspace. Here is what I was using: http://www.mathworks.us/matlabcentral/fileexchange/29702 http://www.mathworks.us/matlabcentral/fileexchange/29702
mxfh 14y ago
Great tool, it heavily uses chroma.js http://vis4.net/blog/posts/avoid-equidistant-hsv-colors/ http://vis4.net/blog/posts/avoid-equidistant-hsv-colors/ https://github.com/gka/chroma.js https://github.com/gka/chroma.js The HCL color space is also available in this d3 module: https://github.com/d3/d3-plugins/tree/master/cie https://github.com/d3/d3-plugins/tree/master/cie
monkeyfacebag 14y ago
I really like the interaction and flexibility, but I failed to generate a set of colors as nice as those provided by Color Brewer (http://colorbrewer2.org/ http://colorbrewer2.org/). Sure, Color Brewer doesn't dynamically generate color schemes, but the set of colors it provides looks damn good in just about any context. I might use this new app in cases where I need more than 12 colors (Color Brewer's limit), but I don't think dynamic color scheme generation adds much. The JSON and CSS exports do seem very useful, however, and a big improvement over Color Brewer's interface.
- paulgb 14y ago
  Here are Color Brewer palettes in CSS and JSON: https://github.com/mbostock/d3/tree/master/lib/colorbrewer https://github.com/mbostock/d3/tree/master/lib/colorbrewer
mixedbit 14y ago
Is it hard to automatically generate a large (say 100+) palette of colors of increasing intensity that go well together? Do you have pointers to any algorithms for this?
snprbob86 14y ago
Cool! I also really like http://colorschemedesigner.com/ http://colorschemedesigner.com/
hadem 14y ago
The color section (after creating a palette) looks very similar to http://www.colourlovers.com/colors http://www.colourlovers.com/colors
desbest 14y ago
I prefer http://www.colorschemer.com/online.html http://www.colorschemer.com/online.html and http://www.workwithcolor.com/hsl-color-schemer-01.htm http://www.workwithcolor.com/hsl-color-schemer-01.htm
lignuist 14y ago
Recently I was looking for something like this for a visualization. I had to find 16 nice looking distinct colors, which turned out to be pretty hard. Thanks!
huhsamovar 14y ago
Any solutions for colour blind scientists?
- aw3c2 14y ago
  Check out http://colorbrewer2.org/ http://colorbrewer2.org/
jostmey 14y ago
As someone who has put together figures for a scientific paper, I can safely say that the last thing I want are a wide-range of colors to use. Many people are color-blind, and many people print on black & white printers. So when I design the figures, I stick with pure colors. Pure red (255,0,0) or pure green (0,255,0) or pure blue (0,0,255). I suppose it would be smarter to design a set of color codes where even if someone were missing one of the three color receptors in their eye, they would still be able to discern each individual color as distinct. Perhaps (128,128,0), (128,0,128), (0,128,128).
- cbr 14y ago
  Unless you're staying on a computer your 'pure colors' aren't really pure. And pure green (0,255,0) is really unpleasant.
- cscheid 14y ago
  This will sound snarky, but there's just too much that's wrong with this comment to let it stand. For people reading this: please don't do any the above. Go here for good color scales and spare yourself the risk of getting it all wrong: http://colorbrewer2.org http://colorbrewer2.org If you're going to not use colorbrewer, please, either know what you're doing (and if you're reading this comment, you don't) you either stick with black and white, or you at least use orange and blue (orange and blue is a combination that's safe with most common types of color-blindness, and also tends to separate well in black-and-white conversions). Just as importantly: don't try to guess what colors look like for colorblind people, either (and don't do it in RGB space like the original post suggested either! RGB is a device-centric coordinate system; please use something like Lab or Luv). The rightest, simplest way to simulate different types of color blindness is to use define 2D affine subspaces of Lab space, like here: http://www.inf.ufrgs.br/%7Eoliveira/pubs_files/CVD_Mass_Spring/CVD_Mass_Spring.html http://www.inf.ufrgs.br/%7Eoliveira/pubs_files/CVD_Mass_Spri... (figure 2, in page 3)
  - paulgb 14y ago
    Are there any particular resources you'd recommend on getting to know this stuff?
carlob 14y ago
It's interesting they've started this médialab in Science Po, which is (as the name implies) a social sciences university [0] in Paris [1]. Looking at the team [2] the name of Bruno Latour as a director seems a bit out of place. After his controversial views on the social construction of science [3] I find it astonishing that he is put at the head of the department that is in charge of bridging the world of the social scientists with that of the quantitative methods and hard sciences. [1] Grande école actually. [0] http://en.wikipedia.org/wiki/Sciences_Po http://en.wikipedia.org/wiki/Sciences_Po [2] http://www.medialab.sciences-po.fr/en/team/ http://www.medialab.sciences-po.fr/en/team/ [3] http://en.wikipedia.org/wiki/Bruno_Latour#Laboratory_Life http://en.wikipedia.org/wiki/Bruno_Latour#Laboratory_Life
- _delirium 14y ago
  I don't see Latour as a particularly bad choice for bridging those worlds. One of his main points is paying close empirical attention to both how scientists actually work, and how non-human things work. Unlike a lot of humanities theorists of science, he actually went into laboratories and wrote down what seem like pretty honest accounts of what he found there. He's fairly controversial among pure social constructionists partly as a result. For example, he had a dispute with David Bloor some years ago [1] over Latour's insistence on including nonhuman objects in his explanation of how science works (rather than treating science as a purely social process). More recently, he's been attacking the tendency, born of the legacy of critical theory, to treat intellectual activity as a series of de-maskings of something the scholar will always find to be "naive" [2]. I mean, the last thing we should want, as scientists, is to have blind faith in a quasi-religious, idealized view of how science works, rather than empirically investigating how it actually works. Plus he seems pretty interested lately in tying in some philosophical ideas with quantitative network-analysis methods: http://www.bruno-latour.fr/sites/default/files/123-WHOLE-PART-FINAL.pdf http://www.bruno-latour.fr/sites/default/files/123-WHOLE-PAR... [1] Bloor's attack on Latour, http://reclus.files.wordpress.com/2009/03/bloor-anti-latour.pdf http://reclus.files.wordpress.com/2009/03/bloor-anti-latour...., and a reply, http://www.melissa.ens-cachan.fr/IMG/pdf/latour_-_reponse_a_bloor.pdf http://www.melissa.ens-cachan.fr/IMG/pdf/latour_-_reponse_a_... [2] http://www.pathguy.com/Latour.pdf http://www.pathguy.com/Latour.pdf
RuggeroAltair 14y ago
Great work! Is there already an API to use? It would be great to use it directly and credit this website for the algorithms used. The dynamical palette would become very useful in that case.
melloclello 14y ago
Ohhh man I feel like I have been waiting years for this to exist
anigbrowl 14y ago
Lovely UX, more like this please.

189 points by jacomyal 14y ago

This is an interesting tool, it fails at 16 colors. Which is surprising. (it may be the gamut of my display of course but I would think 16 would be within its abilities). That is probably the most number of distinct colors I've needed in a graph. Works nicely for numbers 10 and below.

mturmon 14y ago
Hmm...the linked page worked for me on several tries for 16, 20, and 22 colors, even restricting the luminance somewhat. I used the protovis categorical colors (http://mbostock.github.com/protovis/docs/color.html http://mbostock.github.com/protovis/docs/color.html, see at the bottom of the page) when I needed a 20-color map recently.
- ChuckMcM 14y ago
  Those are nice, I've bookmarked the protovis ones. Re-running my experiment, I seem to get two nearly identical magentas or two nearly identical greens every time I re-roll. It is entirely possible its my monitor though.

ChrisNorstrom 14y ago

Aw, so sorry to tell you but it doesn't work in the latest version of IE. I'm not even sure if you should bother trying to get it to work but at minimum just put up a message to IE users telling them to use another browser.

mnicole 14y ago

Love this, even just for website palettes. Nice work.

Raydric 14y ago

I'm glad it's not a Mordekaiser circle jerk.

michaelhoffman 14y ago

This is really nice! And attractive. One of the reasons I'll probably stick with ColorBrewer palettes for now is that I can easily find color schemes that are safe for people with colorblindness or for display in particular environments.

DigitalJack 14y ago
I appreciate this. For a deficiency that affects so many men, I'm always dismayed by the lack if awareness.

hotpockets 14y ago

I've used something similar in matlab, which I though worked a little better. It started out with red green blue, colors frequently considered maximally distinct, at least on color monitors for the non-colorblind. Then it just found maximally distant points in the color cube. I found it worked nicely and you could also seed it with your own starting color(s). Edit: found out it is based on Lab color space.

mturmon 14y ago
But, doing it this way can result in oversaturated colors that compete for attention.
- hotpockets 14y ago
  Interesting point. Though, some of the colors in OPs preset examples seemed very similar, even with only 7 colors. For generating graphs, maximally distinct colors seems the primary goal, even if they compete for attention, perhaps because of it.
  - deleted 14y ago
    [deleted]
svachalek 14y ago
I'm no color expert but I'm pretty sure color distance in RGB space is a pretty poor metric compared to other color models (at least some of them). Looking at an RGB color cube I see big splashes of near-identical colors while the entire spectrum of oranges is hard to even find.
- hotpockets 14y ago
  Looking closer, it uses the Lab colorspace. Here is what I was using: http://www.mathworks.us/matlabcentral/fileexchange/29702 http://www.mathworks.us/matlabcentral/fileexchange/29702

mxfh 14y ago

Great tool, it heavily uses chroma.js http://vis4.net/blog/posts/avoid-equidistant-hsv-colors/ http://vis4.net/blog/posts/avoid-equidistant-hsv-colors/ https://github.com/gka/chroma.js https://github.com/gka/chroma.js The HCL color space is also available in this d3 module: https://github.com/d3/d3-plugins/tree/master/cie https://github.com/d3/d3-plugins/tree/master/cie

monkeyfacebag 14y ago

I really like the interaction and flexibility, but I failed to generate a set of colors as nice as those provided by Color Brewer (http://colorbrewer2.org/ http://colorbrewer2.org/). Sure, Color Brewer doesn't dynamically generate color schemes, but the set of colors it provides looks damn good in just about any context. I might use this new app in cases where I need more than 12 colors (Color Brewer's limit), but I don't think dynamic color scheme generation adds much. The JSON and CSS exports do seem very useful, however, and a big improvement over Color Brewer's interface.

paulgb 14y ago
Here are Color Brewer palettes in CSS and JSON: https://github.com/mbostock/d3/tree/master/lib/colorbrewer https://github.com/mbostock/d3/tree/master/lib/colorbrewer

mixedbit 14y ago

Is it hard to automatically generate a large (say 100+) palette of colors of increasing intensity that go well together? Do you have pointers to any algorithms for this?

snprbob86 14y ago

Cool! I also really like http://colorschemedesigner.com/ http://colorschemedesigner.com/

hadem 14y ago

The color section (after creating a palette) looks very similar to http://www.colourlovers.com/colors http://www.colourlovers.com/colors

desbest 14y ago

I prefer http://www.colorschemer.com/online.html http://www.colorschemer.com/online.html and http://www.workwithcolor.com/hsl-color-schemer-01.htm http://www.workwithcolor.com/hsl-color-schemer-01.htm

lignuist 14y ago

Recently I was looking for something like this for a visualization. I had to find 16 nice looking distinct colors, which turned out to be pretty hard. Thanks!

huhsamovar 14y ago

Any solutions for colour blind scientists?

aw3c2 14y ago
Check out http://colorbrewer2.org/ http://colorbrewer2.org/

jostmey 14y ago

As someone who has put together figures for a scientific paper, I can safely say that the last thing I want are a wide-range of colors to use. Many people are color-blind, and many people print on black & white printers. So when I design the figures, I stick with pure colors. Pure red (255,0,0) or pure green (0,255,0) or pure blue (0,0,255). I suppose it would be smarter to design a set of color codes where even if someone were missing one of the three color receptors in their eye, they would still be able to discern each individual color as distinct. Perhaps (128,128,0), (128,0,128), (0,128,128).

cbr 14y ago
Unless you're staying on a computer your 'pure colors' aren't really pure. And pure green (0,255,0) is really unpleasant.
cscheid 14y ago
This will sound snarky, but there's just too much that's wrong with this comment to let it stand. For people reading this: please don't do any the above. Go here for good color scales and spare yourself the risk of getting it all wrong: http://colorbrewer2.org http://colorbrewer2.org If you're going to not use colorbrewer, please, either know what you're doing (and if you're reading this comment, you don't) you either stick with black and white, or you at least use orange and blue (orange and blue is a combination that's safe with most common types of color-blindness, and also tends to separate well in black-and-white conversions). Just as importantly: don't try to guess what colors look like for colorblind people, either (and don't do it in RGB space like the original post suggested either! RGB is a device-centric coordinate system; please use something like Lab or Luv). The rightest, simplest way to simulate different types of color blindness is to use define 2D affine subspaces of Lab space, like here: http://www.inf.ufrgs.br/%7Eoliveira/pubs_files/CVD_Mass_Spring/CVD_Mass_Spring.html http://www.inf.ufrgs.br/%7Eoliveira/pubs_files/CVD_Mass_Spri... (figure 2, in page 3)
- paulgb 14y ago
  Are there any particular resources you'd recommend on getting to know this stuff?

carlob 14y ago

It's interesting they've started this médialab in Science Po, which is (as the name implies) a social sciences university [0] in Paris [1]. Looking at the team [2] the name of Bruno Latour as a director seems a bit out of place. After his controversial views on the social construction of science [3] I find it astonishing that he is put at the head of the department that is in charge of bridging the world of the social scientists with that of the quantitative methods and hard sciences. [1] Grande école actually. [0] http://en.wikipedia.org/wiki/Sciences_Po http://en.wikipedia.org/wiki/Sciences_Po [2] http://www.medialab.sciences-po.fr/en/team/ http://www.medialab.sciences-po.fr/en/team/ [3] http://en.wikipedia.org/wiki/Bruno_Latour#Laboratory_Life http://en.wikipedia.org/wiki/Bruno_Latour#Laboratory_Life

_delirium 14y ago
I don't see Latour as a particularly bad choice for bridging those worlds. One of his main points is paying close empirical attention to both how scientists actually work, and how non-human things work. Unlike a lot of humanities theorists of science, he actually went into laboratories and wrote down what seem like pretty honest accounts of what he found there. He's fairly controversial among pure social constructionists partly as a result. For example, he had a dispute with David Bloor some years ago [1] over Latour's insistence on including nonhuman objects in his explanation of how science works (rather than treating science as a purely social process). More recently, he's been attacking the tendency, born of the legacy of critical theory, to treat intellectual activity as a series of de-maskings of something the scholar will always find to be "naive" [2]. I mean, the last thing we should want, as scientists, is to have blind faith in a quasi-religious, idealized view of how science works, rather than empirically investigating how it actually works. Plus he seems pretty interested lately in tying in some philosophical ideas with quantitative network-analysis methods: http://www.bruno-latour.fr/sites/default/files/123-WHOLE-PART-FINAL.pdf http://www.bruno-latour.fr/sites/default/files/123-WHOLE-PAR... [1] Bloor's attack on Latour, http://reclus.files.wordpress.com/2009/03/bloor-anti-latour.pdf http://reclus.files.wordpress.com/2009/03/bloor-anti-latour...., and a reply, http://www.melissa.ens-cachan.fr/IMG/pdf/latour_-_reponse_a_bloor.pdf http://www.melissa.ens-cachan.fr/IMG/pdf/latour_-_reponse_a_... [2] http://www.pathguy.com/Latour.pdf http://www.pathguy.com/Latour.pdf

RuggeroAltair 14y ago

Great work! Is there already an API to use? It would be great to use it directly and credit this website for the algorithms used. The dynamical palette would become very useful in that case.

melloclello 14y ago

Ohhh man I feel like I have been waiting years for this to exist

anigbrowl 14y ago

Lovely UX, more like this please.