jquery 颜色，RGB 到 HSL 并返回答案

【问题标题】：jquery colors, RGB to HSL and backjquery 颜色，RGB 到 HSL 并返回
【发布时间】：2011-09-26 20:49:03
【问题描述】：

我正在使用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 具有相同的值吗？（这里我什至没有提到新的十六进制值，这当然应该与原来的十六进制颜色相同）

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

【问题讨论】：

我被你的小提琴弄糊涂了...如果我输入#ffffff，我们是否期望最后一项是#ffffff？
我也是。但你的问题首先是谈论改变色调。
我正在解释我想到使用的算法（转换为 hsl，修改色调，返回 rgb）并给出一个明显的例子来说明我的问题是什么（如果我要实际改变颜色在小提琴中，我不会看到它那么明显）。也许我的做法有问题，也许还有另一种（更好的）方法（只是把所有的事实都放进去）

标签： jquery colors

【解决方案1】：

你只是漏掉了一些参数as per the documentation...

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

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

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

formatName颜色的格式名称

modelName颜色的颜色模型名称

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

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

【讨论】：

您是否尝试过将#FF0000 作为源颜色？它将它转换为#000000，我不知道为什么
@AndreiS，这很奇怪......它与00FF00 相同，然后与0000FF 它最终成为FFFFFF......其他组合如#FF0100 工作正常。我会说这必须是插件中的一个错误，并且应该将这个线程与 JSFiddles 一起通知开发人员。
@ayjay, the posted demo 仍然像创建那天一样工作。
@Sparky，我在控制台日志中收到此错误：Uncaught TypeError: $.colors is not a function
@ayjay，我在那个 jsFiddle 上没有收到任何控制台错误。听起来您的浏览器在加载插件时出现问题。

【解决方案2】：

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

我的例子见jsfiddle。

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>

【讨论】：