2011-04-03 88 views
8

编码我想显示红色,黄色,绿色视1之间的数之间的颜色为100。颜色基于数

1为绿色,100是红色,50是黄色。我想基本上创建之间的梯度。

到目前为止,我想:

$r = floor(255 * ($number/100)); 
$g = 255 - $r; 

它有些做的,但给我的褐色&暗的颜色,&没有黄色的。

+2

可能重复(http://stackoverflow.com/questions/11849308/generate-colors-between-red-and-green-for-an-输入范围) – Neal 2012-12-12 13:50:54

回答

11

那是因为你不应该一次更改两个通道,但上升的R上半年较低的G第二。

尝试这样的功能:

function GreenYellowRed($number) { 
    $number--; // working with 0-99 will be easier 

    if ($number < 50) { 
    // green to yellow 
    $r = floor(255 * ($number/50)); 
    $g = 255; 

    } else { 
    // yellow to red 
    $r = 255; 
    $g = floor(255 * ((50-$number%50)/50)); 
    } 
    $b = 0; 

    return "$r,$g,$b"; 
} 

为了测试它:

$output = ""; 
for ($i = 1; $i <= 100; $i++) { 
    $rgb = GreenYellowRed($i); 
    $output .= "<div style='background-color: rgb($rgb)'>$rgb</div>"; 
} 
echo $output; 
+1

随着一些小的调整,这里是一个小提琴测试... http://jsfiddle.net/amackay11/xtb51wed/883/ – amackay11 2016-04-28 14:57:04

+0

它也是我一会儿找到这样的解决方案。有了这样的结果。现在创建一个永久的CSS文件。 TA! – 2017-04-05 14:28:53

+0

@Olivier Pons:不知道你为什么要在这里发布,它只是遵循OP的约定。 – Czechnology 2017-07-15 12:51:05

2

我不知道,通过指定的RGB颜色值通过“颜色曲线”的数学模型(例如,您所描述的为绿色/黄色/红色),这将允许您计算该曲线中的任何中间色。在任何情况下,函数模型(就是这样)只与它需要的数据点一样好,所以你必须比绿色/黄色/红色更具体才能获得不错的结果即使有人指出数学。

请记住,我们不感兴趣的数学这里插值,而是在“色彩空间插值”(我只是做了一个学期) - 换句话说,会是什么样子“自然”插值到人类

对于我们这些没有必要的色彩理论知识并且我认为是的人来说,更简单的解决方案是用颜色选择器工具预先选择多种颜色,将0-100范围分成与您选择的颜色一样多的乐队,并使用简单的整数除法从0-100投影到彩色乐队。

思考的问题:确实,SO如何决定评论的upvote计数颜色?

更新:我只是asked以上在元。让我们来看...

+4

'如何决定评论的最佳点数颜色?魔术! – Czechnology 2011-04-03 23:57:03

0

经过一番研究,没有一个解决方案看起来令人愉快。如上所述,HSV可能是一种可行的方式,因为现代浏览器可以很好地渲染颜色。

为了让您正在使用的颜色是个好主意,看看这个色轮:

http://www.colorspire.com/rgb-color-wheel/

我要开始与蓝色的,所以我用255正常化。的[生成的输入范围的红色和绿色之间颜色]

function temp_color($temp){ 

    $start = 40; 
    $end = 85; 

    $normal = round(255-((($temp - $start)/($end-$start))*255)); 

    $color = "hsl($normal, 100%, 30%);"; 
    $span = "<span style=\"color: $color\">$temp</span>"; 

    return $span; 
}