PitPik/colorPicker

Convert Color

Closed this issue · 2 comments

How can I make a simple conversion? Say from HSV to HSL?

I tried the following:

var myColor = new Colors();
var hslColor = myColor.convertColor({
    h: 100,
    s: 100,
    v: 100
},'hsv2hsl')
console.log(hslColor);

And I get the folloinwg output:

Object {h: 100, s: -1.0204081632653061, l: -4900}

How can I get regular output?

Hi @Horray ,
I saw your post yesterday already... so I guess you found out yourself.
The only thing you have to be aware: hslis not the same as HSL(the same for all others). So your code would be then:

var myColor = new Colors();
var hslColor = myColor.convertColor({
    h: 100,
    s: 100,
    v: 100
},'HSV2HSL')
console.log(hslColor);

You'll then get:

Object {h: 100, s: 100, l: 50}

So you have a huge span of conversion possibilities (all in all it's 182 different possibilities):
hsv2HSV, hsv2hsl, hsv2HSL, HSV2hsl, HSV2HSL, HSV2hsv, ...
The capital letters are representative for values you're talking about (0-360, 0-100, 0-100) (rounded) and small letters mean normalized values, so 0-1 (float).
It might be a little confusing that you have to write the object {h: 100, ..} in small letters, but with the following string 'HSV2HSL' you then actually describe from where to where it should convert.
HEX and XYZ don't follow this rule and the difference between LAB and Lab is that LAB is rounded to integers.

If you need to covert from HEX then you don't need an object as input, you just pass a string:

var hslColor = myColor.convertColor('223344', 'HEX2HSL');

gets you:

Object {h: 210, s: 33, l: 20}

In the file _website/index.js you'll find a line conversionTest(); that, if you remove the comment slashes, will show you a test in your console after refreshing the page.

I hope this helped you a bit.
Good luck and Cheers

Thank you! Yes it did indeed help a lot!

Wooooow!! 182 different possibilities!!! Amazing!