如何更改jquery中的顏色亮度

我已經創建了一個顏色色板和一個滑塊，用於控制顏色的黑暗度&。我想根據滑塊值改變顏色亮度。我的嘗試：如何更改jquery中的顏色亮度

$("#darklight").slider({ 
     range: "min", 
     value: 0, 
     min: -0.5, 
     max: 0.5, 
     step: 0.1, 
     slide: function (event, ui) { 
      $("#swatches").children("div").each(function (i, v) { 
       var color = $(v).attr("title"); 
       var rgb = HEXtoRGB(color); 
       var hsl = rgbToHsl(rgb[0], rgb[1], rgb[2]); 
       hsl[2] += ui.value; //what formula should i use here to change the lightness of color ? 
       rgb = hslToRgb(hsl[0], hsl[1], hsl[2]); 
       color = RGBtoHEX("rgb(" + rgb[0] + "," + rgb[1] + "," + rgb[2] + ")"); 
       $(v).attr("title", color).css("backgroundColor", color); 
      }); 
     } 
    });

我在這裏轉換顏色HSL和試圖操縱升價值，但沒有得到正確的公式來操作。任何人都可以請幫我嗎？

來源

2012-12-13 gaurav

可以定義亮度？你的意思是「不透明」或「阿爾法」？ –

alpha和不透明度是相同的。這聽起來像你的意思是'L'組件？ – Alnitak

@Alnitak WHUT？！？！ alpha和opacity不是同一個傢伙。 '當我們將不透明度值應用於元素時，不透明度值將由其所有子元素繼承。假設我們將不透明度值應用於DIV（div {opacity：0.5;}），該特定DIV中的文本，圖像和所有其他元素將繼承不透明度值，並且它們將在轉彎中變爲透明。另一方面，RGBa設置該特定元素的顏色值的不透明度，並且透明度不會由其子元素繼承。換句話說，RGBA僅爲單個聲明設置不透明度值。「＃ –

您正在修改HSL顏色的L屬性 - 這是正確的。

該錯誤在L的範圍內。它的標稱值應爲0.5，範圍爲0到1.0。

因此要加入你的滑塊價值L應該從-1運行+1，但你需要在範圍0 .. 1夾緊結果值，e.g：

hsl[2] += ui.value; 
hsl[2] = Math.min(hsl[2], 1); 
hsl[2] = Math.max(hsl[2], 0);

來源

2012-12-13 11:53:37 Alnitak

可以請你給我一個想法，我應該如何鉗位的價值？ – gaurav

謝謝alnitak，但我只是試過你的邏輯，但根本不工作 – gaurav

它應該工作 - 請嘗試創建一個測試用例（即jsfiddle.net），演示它如何工作。 – Alnitak

如何更改jquery中的顏色亮度

回答

相關問題