css漸變：計算第二站顏色

我希望能夠根據第一個（見下面的示例）計算按鈕背景漸變的第二個十六進制顏色。css漸變：計算第二站顏色

所以我會通過用戶的顏色選擇器得到第一個顏色，並使用Javascript（例如下面示例中的#ededed）。基於第一種顏色，我想用JS來計算產生第二種顏色和漸變效果的偏移量（下面示例中的#dfdfdf）。色彩偏移總是相同的，只是輸入和輸出十六進制顏色會有所不同。

有沒有我可以使用的公式或函數？謝謝！

background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf));

來源

2013-01-18 dutchman711

我們需要更多的細節，你只提供了非常模糊的細節。 – Dai

不支持CSS，不支持。 – Shmiddty

看看這個鏈接 - 酷http://gradients.glrzad.com/也許你可以暱一些代碼;） –

就這麼你知道，你使用-webkit-gradient的「舊」格式。您應該更新到使用這個來代替：現在

-webkit-linear-gradient(top, #ededed 5%, #dfdfdf)

，在實際的問題，你有沒有指定的第二顏色應如何計算。考慮到你給的例子，我會說你想讓它變得更輕。在這種情況下，你可以這樣做：

var color = "#ededed"; 
var components = [ 
    (255-(255-parseInt(color.substr(1,2),16))/2).toString(16), 
    (255-(255-parseInt(color.substr(3,2),16))/2).toString(16), 
    (255-(255-parseInt(color.substr(5,2),16))/2).toString(16) 
]; 
if(components[0].length < 2) components[0] = "0"+components[0]; 
if(components[1].length < 2) components[1] = "0"+components[1]; 
if(components[2].length < 2) components[2] = "0"+components[2]; 
var out = "#"+components[0]+components[1]+components[2];

這會給你的顏色，介於源顏色和純白色（有效覆蓋50％的-opacity白了它）之間。要獲得較暗的陰影，只需刪除255-(255-位和相應的)。

編輯：關於第二個想法，只是用了堅實的背景與透明的漸變：

background:#ededed -webkit-linear-gradient(top,rgba(255,255,255,0),rgba(255,255,255,1));

來源

2013-01-18 19:40:14

太棒了，謝謝！這就是我一直在尋找的。 – dutchman711

我還沒有測試過，但我的方法是使用RGB值而不是十六進制。然後使用變量來保存你的兩個顏色值。第二個變量可以根據第一個變量的值來計算（例如，@ color2 = @ color1 + 2）或其他。

來源

2013-01-18 19:36:19 N1tr0

css漸變：計算第二站顏色

回答

相關問題