I'm trying to create a RYB color wheel with a smooth-looking gradient across the RYB spectrum. The angles of the HSV wheel are incorrect (yellow at 60deg instead of 120deg etc).

enter image description here

If I just do a few linear transformations the results is still not appropriate; perceptually red occupies too many angles and yellow not enough. Even if I do a bit of a hack and try a non-linear polynomial gradient it's difficult to get the right "spread":

enter image description here

Is there an "official" function that maps HSV hue angle to RYB hue angle?

Update: Reading this gives some ideas, but the part about excluding cyan confused me more because of Adobe's RYB color wheel: Is this true RYB or is it CMY with hue angles shifted in the blue range?

enter image description here


I just discovered that Adobe color source includes HSV-RYB hue mapping functions (replicated in Ben Knight's Kuler-d3). Apparently Adobe uses uses piecewise linear gradients rather than the polynomial that I was trying to use (and technically it is a CMY wheel not a RBY one, I believe). Here are the relevant stops:

RYBstop HSVstop
60      35
122     60
165     120
218     180
275     240
330     300

Here is the graph of these showing the perceptual mapping:

enter image description here

So there'll be artifacts at the junctions where the mapping function is not smooth (which can be seen in the original Adobe image). And here is an imagemagick script for creating the color wheel.

#assemble gradient pieces (pre-caculated stops), then join them all
convert -size 600x300 gradient:#000000-#181818 -rotate -90 grad1.png
convert -size 600x310 gradient:#181818-#2A2A2A -rotate -90 grad2.png
convert -size 600x215 gradient:#2A2A2A-#555555 -rotate -90 grad3.png
convert -size 600x265 gradient:#555555-#7F7F7F -rotate -90 grad4.png
convert -size 600x285 gradient:#7F7F7F-#AAAAAA -rotate -90 grad5.png
convert -size 600x275 gradient:#AAAAAA-#D4D4D4 -rotate -90 grad6.png
convert -size 600x150 gradient:#D4D4D4-#FFFFFF -rotate -90 grad7.png
convert grad?.png +append grad.png
#create hue
convert grad.png -alpha set -virtual-pixel Transparent -rotate 180 -distort Arc '360 -90 300' +repage -gravity center -crop 600x600+0+0 +repage h.png
#create saturation
convert -size 600x600 -alpha on radial-gradient:white-none s.png
#create value
convert -size 600x600 -alpha on radial-gradient:none-white v.png
#combine h,s,v in hsv colorspace
convert h.png s.png v.png -combine -set colorspace HSV -colorspace sRGB ryb.png

enter image description here


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.