確定的規則：涉及整數值顏色#RGB

我想確定背景顏色C取決於一個整數X（一些積極的票）確定的規則：涉及整數值顏色#RGB

OK，我可以做

if(x==0) c = '#000'; 
else if(x > 0 && x < 5) c = '#001' 
else if(X<=5 <= 20) c = '#002'; 
//and so on...

但是，我怎麼能做到這一點，使其漸進？我的意思是從0到500票 - > 500個藍色的色調？（如果我沒有錯，它的可能性兩位數爲十六進制（如果沒有，15 * 15 xD））

任何想法？

來源

2011-04-01 Toni Michel Caubet

既然你只是在尋找想法，這裏是其他人不會建議的。首先，查看「Catmull-Rom樣條」公式。它歸結爲一個非常簡單的矩陣乘法技巧，給出了給定一組控制點的計算曲線的公式。

好的，現在你已經知道所有關於Catmull-Rom樣條曲線的知識，你可以編寫一些代碼在3維空間中做曲線。那麼，如果不是三維空間，什麼是RGB？因此，您可以選擇一些好的顏色控制點（RGB顏色），然後使用方便的Catmull-Rom實現，通過所有這些顏色生成參數曲線，並根據需要沿着曲線生成許多顏色。

關於色彩漸變的一件很酷的事情是，它們在轉換過程中真的很「流暢」。

來源

2011-04-01 23:56:17 Pointy

感謝upvotes - 誠實，這是更容易了一大堆比它的聲音，ESP。如果你還記得一點點高中代數。我非常愚蠢，在過去的20年裏，我已經實施並重新實施了這麼多次。 – Pointy 2011-04-02 00:00:07

哦，如果不清楚：「整數」將映射到公式中的參數係數（「* t *」）。換句話說，這個值「沿着曲線移動」，可以這麼說。控制點是四個一組，所以你一次只能通過四個點生成點。 – Pointy 2011-04-02 00:07:29

非常非常敏捷！我會看看;） – 2011-04-02 00:11:15

我可能會使用類似：

var blueness = x/2; 
if (blueness > 255) blueness = 255; 
rgb(0, 0, blueness);

但你可以使用this sprintf implementation並使用它，就像您在任何其他語言轉換爲十六進制。

來源

2011-04-01 23:56:55 tster

在您的頁面上包含raphaeljs，並在您的代碼的某處粘貼功能estimateColorForValue()和toHex()。 estimateColorForValue(hue, value, darkestValue, brightestValue)計算某個值的顏色，通過查看範圍[darkestValue-brightestValue]value的位置來插補顏色。 hue的範圍是[0-1]：0.1用於橙棕色，0.4用於綠色，0.8用於粉紅色，以及更多顏色之間。色調的微小變化徹底改變了視覺色彩。

例如：estimateColorForValue(.1, 15, 1, 20)，可以解釋爲，對於範圍從1到20的數據，在橙色空間中計算值爲15的顏色。

toHex(estimateColorForValue(.1, 15, 1, 20)) ==> "#cf8415"

代碼：

<script src="https://raw.github.com/DmitryBaranovskiy/raphael/master/raphael.js"></script> 

<script> 

function toHex(hsb) { 
    return Raphael.hsb2rgb(hsb.h, hsb.s, hsb.b).hex; 
} 

function estimateColorForValue(hue, value, darkestValue, brightestValue) { 
    // Constants to determine saturation and brightness 
    var darkBrightness = 0.6; 
    var brightBrightness = 1; 
    var darkSaturation = 0.3; 
    var brightSaturation = 1; 

    // Compute saturation and brightness: 
    var gradient = (value - darkestValue)/(brightestValue - darkestValue); 
    var saturation = darkSaturation + gradient * (brightSaturation - darkSaturation); 
    var brightness = darkBrightness + gradient * (brightBrightness - darkBrightness); 

    return {h: hue, s:saturation, b:brightness}; 
} 
</script>

來源

2011-08-20 12:20:42

確定的規則：涉及整數值顏色#RGB

回答

相關問題