jquery顏色，RGB到HSL和後退

我使用jquery colors將顏色從十六進制轉換爲hsl，通過將0到360之間的數字添加到hsl中，然後執行mod 360以獲取新的色調值，我在獲得jquery顏色，RGB到HSL和後退

問題真正感興趣的是我無法弄清楚如何轉化回RGB正確

考慮下面的例子（你可以測試它jsfiddle here），爲什麼hslAfter有與hsl不同的值？

從我所看到的，我只是將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相同的值？（我甚至沒有提到新的十六進制值，這當然反過來，應該是原來的十六進制顏色相同）

我在這裏丟失的東西（無論如何解決這個問題）？

來源

2011-09-26 Andrei S

我對你們的小提琴迷茫...如果我把'＃ffffff'，是我們期待的最後一個項目是'＃ffffff'？ – Sparky

好吧，至少我是 –

我也是。但是你的問題始於談論改變色調。 – Sparky

你只是錯過了一些參數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

這裏有一個DEMO，其中HEX輸出現在是一樣的HEX輸入...

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

來源

2011-09-26 21:23:23 Sparky

你試過把＃FF0000作爲源顏色嗎？它將它轉換爲＃000000，我不知道爲什麼 –

@AndreiS，這很奇怪......它與'00FF00'和然後'0000FF'一樣，最後是'FFFFFF'...其他組合如' ＃FF0100'正常工作。我會說這必須是插件中的一個bug，開發者應該和JSFiddles一起通知這個線程。 – Sparky

@ayjay，[發佈的演示]（http://jsfiddle.net/uEUJq/9/）仍然與創建日一樣工作。 – Sparky

您可以從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>

來源

2017-11-10 11:58:32 stomtech

jquery顏色，RGB到HSL和後退

回答

相關問題