CODEWITHSUNDEEP
javascriptcolorscolor-schemecolor-pickerhsl
lomas09
lomas09

Reputation: 1104

HSL Colors to Pigmentation

I have recently been working on a color picker application which allows an user to pick a hue, a saturation and the lightness of a color. After the user has decided on a color I give the user different color schemes that go with the chosen color. Some of the color schemes given are complimentary, split complimentary, triad, analogous and so on.
For example: if the user chooses red as the color, hsl(0, 100%, 50%), to determine the complimentary color then 180 degrees are added to the hue in a resulting (180, 100%, 50%) which would be cyan. For an analogous scheme I add 30 and subtract 30, and so on. It all works great until I realized that this are web colors!
I will still keep this functionality but now I want to create color schemes that resemble pigmentation. For example in real life, the complimentary color of red would be green instead of cyan as in the colors of light. Can someone point me to resources on how to convert hsl to pigmentation? How can I adjust the hues so that green would be the opposite of red.

Upvotes: 3

Views: 369

Answers (1)

Derek 朕會功夫
Derek 朕會功夫

Reputation: 94319

I found a script on the web that is able to convert RYB to/from RGB. Here's a link to the script.

With that, it is very easy to calculate complement colors by subtracting components from 255:

var color = [255, 0, 0],     //red in RYB
    complement = color.map(function(n){ return 255 - n; });  //green in RYB

ryb2rgb(complement);         //[0, 169, 51], which is green in RGB

Demo: http://jsfiddle.net/DerekL/3m53wbsc/

With RYB, one can easily see that brown is the only color with no complement color. To convert HSL to RGB, see this answer: https://stackoverflow.com/a/9493060/283863

Upvotes: 1

Related Questions