Question

我正在使用jquery colors将颜色从十六进制转换为hsl，通过在其中添加0到360之间的数字来修改它的色调，然后执行mod 360来获取我的新色调值实际上有兴趣获得

问题是我无法弄清楚如何正确地将其转换回RGB

鉴于以下示例（您可以在jsfiddle here上进行测试），为什么hslAfter的值与hsl不同？

从我所看到的，我只是将HEX中的originalColor转换为HSL数组，然后尝试在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');
}

不应hslAfter与hsl具有相同的值吗？（我在这里甚至没有提到新的十六进制值，当然这应该与原始的十六进制颜色相同）

我在这里遗漏了什么（无论如何要解决这个问题）？

Answer 1

您刚刚错过了一些参数as per the documentation ...

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

根据参数创建颜色。返回颜色对象。

colorInput 表示颜色的字符串或数组

formatName 颜色格式的名称

modelName 颜色的颜色模型的名称

这是一个DEMO，其中HEX输出现在与HEX输入相同......

<强> http://jsfiddle.net/uEUJq/9/

Answer 2

您可以使用jscolor.js中的jscolor.com。他们有很多examples。

有关我的示例，请参阅此jsfiddle。

＆＃13;

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);    
}

＆＃13;

<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>

＆＃13;

jquery颜色，RGB到HSL和背面

2 个答案: