5

I can't seem to get this figured out. I have a scaled set of values (0...1) that I need to associate colors with. The highest (1) being red and the lowest (0) being green.

I cannot seem to find how to get an RGB color between red and green for a value that is between 0 and 1.

Here is my scaling function I am going to use to scale the values:

function scale_value($value, $srcmin, $srcmax, $destmin = 0, $destmax = 1)
{
    # How Far In Source Range Are We
    $pos = (($value - $srcmin) / ($srcmax - $srcmin));
    return ($pos * ($destmax - $destmin)) + $destmin;
}

I figured scaling them from 0 to 1 will make the next part I am struggling with much easier.

Here is one very crummy attempt at doing this I came up with, failed pretty badly.

function make_color($value)
{
    $red = $value > 0.5
       ? (1 - 2 * ($value - 0.5) / 1)
       : 1;
    $green = $value > 0.5
        ? 1
        : 2 * ($value / 1);
    $blue = 0;
    return "rgb($red,$green,$blue)";
}

Does anyone have any experience using PHP to determine the color to use for a value that falls between 1 and 0?

4
  • and what values do you want to get ? just something like $red = $value * 255; $green = (1-$value) * 255 ? Mar 7, 2016 at 15:55
  • Possible duplicate of What is the algorithm to create colors for a heatmap?
    – Matheno
    Mar 7, 2016 at 15:56
  • Right, If I can get a RGB value from the passed $value, that would be great. How do I determine what color from green to red a 0 through 1 value gets? Mar 7, 2016 at 15:58
  • Possibly a duplicate, but the solution in that is for Ruby using HSL Mar 7, 2016 at 16:00

4 Answers 4

6

Found a solution, converting the JS implemented solution posted here to PHP and reversing the Red to Green polarity so Red was high, Green was low.

It looks like this:

/**
 * @param $value
 * @param integer|float $min
 * @param integer|float $max
 * @return string
 */
function make_color($value, $min = 0, $max = .5)
{
    $ratio = $value;
    if ($min > 0 || $max < 1) {
        if ($value < $min) {
            $ratio = 1;
        } else if ($value > $max) {
            $ratio = 0;
        } else {
            $range = $min - $max;
            $ratio = ($value - $max) / $range;
        }
    }

    $hue = ($ratio * 1.2) / 3.60;
    $rgb = hsl_to_rgb($hue, 1, .5);

    $r = round($rgb['r'], 0);
    $g = round($rgb['g'], 0);
    $b = round($rgb['b'], 0);

    return "rgb($r,$g,$b)";
}

This also relies on an HSL to RGB translator, which I found on this post. This ends up giving me a pretty nice result:

Red to green heatmap using PHP

Thanks for the help.

2
  • hsl_to_rgb is not a function of my version of php. Jul 10, 2017 at 3:39
  • On the linked page he mentions, just rename the function "ColorHSLToRGB" to "hsl_to_rgb" and it'll work.
    – vr_driver
    Jul 13, 2017 at 13:02
5

Thanks to Matthew Brown for the link to his source. And the link inside that one with a JSFiddle that worked in Javascript. But Matthew's version contained a function that failed in my PHP, so I converted the JSFiddle, including all functions, and the result is:

<html>
    <head>
        <style>
    li {
    display: block;
    float: left;
    width: 50px;
    height: 50px;
    margin: 2px;
}
hr {
    clear: both;
}
</style>
<title>hi</title>
    </head>
    <body>
        <?PHP 

function hslToRgb($h, $s, $l){
#    var r, g, b;
    if($s == 0){
        $r = $g = $b = $l; // achromatic
    }else{
        if($l < 0.5){
            $q =$l * (1 + $s);
        } else {
            $q =$l + $s - $l * $s;
        }
        $p = 2 * $l - $q;
        $r = hue2rgb($p, $q, $h + 1/3);
        $g = hue2rgb($p, $q, $h);
        $b = hue2rgb($p, $q, $h - 1/3);
    }
    $return=array(floor($r * 255), floor($g * 255), floor($b * 255));
    return $return;
}

function hue2rgb($p, $q, $t){
    if($t < 0) { $t++; }
    if($t > 1) { $t--; }
    if($t < 1/6) { return $p + ($q - $p) * 6 * $t; }
    if($t < 1/2) { return $q; }
    if($t < 2/3) { return $p + ($q - $p) * (2/3 - $t) * 6; }
    return $p;
}
/**
 * Convert a number to a color using hsl, with range definition.
 * Example: if min/max are 0/1, and i is 0.75, the color is closer to green.
 * Example: if min/max are 0.5/1, and i is 0.75, the color is in the middle between red and green.
 * @param i (floating point, range 0 to 1)
 * param min (floating point, range 0 to 1, all i at and below this is red)
 * param max (floating point, range 0 to 1, all i at and above this is green)
 */
function numberToColorHsl($i, $min, $max) {
    $ratio = $i;
    if ($min> 0 || $max < 1) {
        if ($i < $min) {
            $ratio = 0;
        } elseif ($i > $max) {
            $ratio = 1;
        } else {
            $range = $max - $min;
            $ratio = ($i-$min) / $range;
        }
    }
    // as the function expects a value between 0 and 1, and red = 0° and green = 120°
    // we convert the input to the appropriate hue value
    $hue = $ratio * 1.2 / 3.60;
    //if (minMaxFactor!=1) hue /= minMaxFactor;
    //console.log(hue);

    // we convert hsl to rgb (saturation 100%, lightness 50%)
    $rgb = hslToRgb($hue, 1, .5);
    // we format to css value and return
    return 'rgb('.$rgb[0].','.$rgb[1].','.$rgb[2].')'; 
}

// build the color sample lists
for ($i=0; $i<=100; $i++) {
    $list1.='<li style="background-color:'. numberToColorHsl($i/100, 0, 1) .'">'.$i."</li>\n";
    $list2.='<li style="background-color:'. numberToColorHsl($i/100, 0.5, 1). '">'.$i."</li>\n";
    $list3.='<li style="background-color:'. numberToColorHsl($i/100, 0, 0.6).'">' . $i . "</li>\n";
    $list4.='<li style="background-color:'. numberToColorHsl($i/100, 0.3, 0.8).'">' . $i . "</li>\n";
}
echo "<br><hr>\n\n"; ?>
<hr>
full range
<ul id='list-1'></ul>
    <?PHP echo $list1; ?>
<hr>
all below 0.5 is bad
<ul id='list-2'></ul>
<?PHP echo $list2; ?>
<hr>
all above 0.6 is ok
<ul id='list-3'></ul>
<?PHP echo $list3; ?>
<hr>
all below 0.3 is red, all above 0.8 is green
<ul id='list-4'></ul>
<?PHP echo $list4; 

PHP Red to Green through Yellow four examples with different ceilings and floors

2
  • Yea, you'll notice I also linked to the hsl_to_rgb custom function in my post as well. Glad you figured it out as well though. Jul 13, 2017 at 14:40
  • Thanks, Matthew Brown. With your links I was able to make a client happy. A bit of work, but no brain involved. So it worked nicely. Jul 14, 2017 at 5:58
0

This will allow you to choose your own color gradient scale.

enter image description here

function Gradient($HexFrom, $HexTo, $ColorSteps) {
    // credit: Hailwood (stackoverflow)
    $FromRGB['r'] = hexdec(substr($HexFrom, 0, 2));
    $FromRGB['g'] = hexdec(substr($HexFrom, 2, 2));
    $FromRGB['b'] = hexdec(substr($HexFrom, 4, 2));

    $ToRGB['r'] = hexdec(substr($HexTo, 0, 2));
    $ToRGB['g'] = hexdec(substr($HexTo, 2, 2));
    $ToRGB['b'] = hexdec(substr($HexTo, 4, 2));

    $StepRGB['r'] = ($FromRGB['r'] - $ToRGB['r']) / ($ColorSteps - 1);
    $StepRGB['g'] = ($FromRGB['g'] - $ToRGB['g']) / ($ColorSteps - 1);
    $StepRGB['b'] = ($FromRGB['b'] - $ToRGB['b']) / ($ColorSteps - 1);

    $GradientColors = array();

    for($i = 0; $i <= $ColorSteps; $i++) {
        $RGB['r'] = floor($FromRGB['r'] - ($StepRGB['r'] * $i));
        $RGB['g'] = floor($FromRGB['g'] - ($StepRGB['g'] * $i));
        $RGB['b'] = floor($FromRGB['b'] - ($StepRGB['b'] * $i));

        $HexRGB['r'] = sprintf('%02x', ($RGB['r']));
        $HexRGB['g'] = sprintf('%02x', ($RGB['g']));
        $HexRGB['b'] = sprintf('%02x', ($RGB['b']));

        $GradientColors[] = implode(NULL, $HexRGB);
    }
    $GradientColors = array_filter($GradientColors, function($val){
        return (strlen($val) == 6 ? true : false );
    });
    return $GradientColors;
}

function ColorFromGradient($n, $min, $max, $colors)
{
    $tablecolors = [];
    $prevcolor = array_shift($colors);
    foreach ($colors as $color) {
        $tablecolors = array_merge($tablecolors, Gradient($prevcolor, $color, 10));
        $prevcolor = $color;
    }
    $max = $max-$min;
    $n-= $min;
    if ($n > $max) $n = $max;
    
    $ncolor = round(count($tablecolors)/$max * $n)-1;
    
    return $tablecolors[$ncolor];
}


// USAGE: Generate the Gradient Table
echo ColorFromGradient(25, 0, 100, ['FFFFFF', 'FFFF00', 'FF0000']); // WHITE -> YELLOW -> RED
0
   //this makes very good colors between red and green
   //return green value between 0 - 255
   //$red = 255 * ($percentage*0.01); //between 0 - 1
    $red = 255 * 0.5;
    $green = getredgreen($red);
    echo "rgb(".$red.",".$green.",0)";
    
    function getredgreen($hodnota){
      $odpich = 120;
      $maxrozdil = 100;
      if ($hodnota > ($odpich - $maxrozdil) 
       && $hodnota < ($odpich + $maxrozdil))
      {
      $rozdilek = abs($hodnota - $odpich);
      $okolik = $maxrozdil - $rozdilek;
      $hodnota = $hodnota + $okolik;
      } 
      return $hodnota;
    }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.