jquery colors, RGB to HSL and back

I'm using jquery colors to transform a color from hex to hsl, modify it's hue by adding a number from 0 to 360 to it, then doing a mod 360 to get the new hue value that i'm actually interested in obtaining

Problem is I can't figur开发者_StackOverflow中文版e out how to transform it back to RGB correctly

Given the following example (you can test it on jsfiddle here), why does hslAfter have a different value than hsl?

From what I can see, I'm just transforming originalColor which is in HEX, to a HSL array of values, then trying to make a string from it, in hslAfter.

function testHue() {
    var originalColor = $.colors($("#originalColor").val());

    var hsl = $.colors(originalColor).model('HSL').get();
    var hslAfter = $.colors(hsl).toString('hsl');
    var hex = $.colors(hsl).toString('hex');
}

shouldn't hslAfter have the same values as hsl? (I'm not even mentioning the new hex value here, which of course in turn, should be the same as the original hex color)

Am I missing something here (anyway to fix this)?

You just missed some parameters as per the documentation...

$.colors( colorInput, [formatName], [modelName] )

Creates a color based on the arguments. Returns the color object.

colorInput A string or array representing a color

formatName The name of the format of the color

modelName The name of the color model of the color

Here's a DEMO, where the HEX output is now the same as the HEX input...

http://jsfiddle.net/uEUJq/9/

You can use the jscolor.js from jscolor.com. They have many examples.

See this jsfiddle for my example.

function testHue() {
    var originalColor = $.colors($("#originalColor").val());
    
    var rgb = $.colors(originalColor).model('RGB').get();
    var hsl = $.colors(originalColor).model('HSL').get();
    var hslAfter = $.colors(hsl,'array3Normalized', 'HSL').toString('hsl');
    var hex = $.colors(hsl,'array3Normalized', 'HSL').toString('hex');
  
    $("#rgbColor").html("<b>rgb: </b>" + rgb);
    $("#hslColor").html("<b>hsl: </b>" + hsl);
    $("#hslAfter").html("<b>hsl.toString('hsl'):</b> " + hslAfter);
    $("#hexColor").html("<b>hsl.toString('hex'): </b>" + hex);    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script
  src="https://code.jquery.com/color/jquery.color-2.1.2.min.js" ></script>
<script src="http://http://jscolor.com/release/2.0/jscolor-2.0.4/jscolor.js"></script>

<div style="width:500px; margin:5px;">
    <div id="rgbColor"><b>rfb: </b></div>
    <div id="hslColor"><b>hsl: </b></div>
    <div id="hslAfter"><b>hsl.toString('hsl'):</b></div>
    <div id="hexColor"><b>hsl.toString('hex'): </b></div>
    
<br/>

<input type="text" id="originalColor" 
class="jscolor {hash:true}" 
onchange="testHue();"
value="ab2567" />
</div>