0

This question follows from https://stackoverflow.com/questions/29589186/generating-a-perceptually-accurate-colour-wheel-in-javascript

I'm trying to create 12 colours that are roughly uniformly spaced from one another perceptually.

d3 provides HSL, so d3.hsl( (i/12)*360, 0.5, 0.5 )

However, this doesn't work very well for greeny-yellowy colours.

d3 appears to provide HCL and LAB, but I can't see how to use these.

Is there any mathematical approach I can use, or should I just implement my own HSL hue transfer function?

Community
  • 1
  • 1
P i
  • 29,020
  • 36
  • 159
  • 267
  • 1
    IMHO this question should not be downvoted or closed (to whoever did that). It's a legitimate question about LAB color space, which lacks documentation on the d3 API reference. – meetamit May 08 '15 at 19:33
  • This is likely to be tricky. I definitely look into [colorbrewer](http://colorbrewer2.org/) – user1614080 May 09 '15 at 09:24
  • 1
    I'd suggest you to use this library: https://vis4.net/blog/posts/mastering-multi-hued-color-scales/ also you can have a look here: http://gka.github.io/palettes/#diverging|c0=darkred,deeppink,lightyellow|c1=lightyellow,lightgreen,teal|steps=13|bez0=1|bez1=1|coL0=1|coL1=1 – tomtomtom May 09 '15 at 11:10

1 Answers1

2

I am not familiar with d3, but assume it uses the typical CIELab convention which is L: 0::255, a: -100::100, b: -100::100

You can try 

d3.lab( 128, 100 * Math.sin(2 * Math.PI * i/12), 100 * Math.cos(2 * Math.PI * i/12) )

This should create a visually uniform color wheel

Rosa Gronchi
  • 1,828
  • 15
  • 25