Question

I’m trying to visualize a data on a grid with cell values actually represented by color. Red means high and blue means low. I was so naive in thinking that PHP‘s dechex() will help me by simply getting the hexadecimal equivalent of the int and using it as background-color in CSS (I did apply the necessary padding of zeros for small values).

But it doesn’t quite get me what I want. Is there an algorithm that will let me visualize this properly? Red means high, blue means low.

My current code is this:

<?php
    $dec = (int) $map[$y][$x]["total_score"];
    $hex = dechex($dec);
    $color = ($dec <= 65535) ? (($dec) ? "00$hex" : "ffffff") : 
                               (($dec <= 1048575) ? ("0$hex") : $hex);
?>

Notice what it does:

ff0000 in decimal is smaller than ff00ff but on color, the first will show red and the latter violet. I want red to represent very high decimals and blue very low decimals.

Answer 1

I think RGB is not the very best color model here. I’d go with HSL – supported by modern browsers: color: hsl(0.5, 0.5, 0.5) and easily to convert to RGB.

HSL let’s you define saturation and lightness of the color and the color itself quite easily. Blue is 240 deg, red is 360 deg so all you have to do is to map “low” to 240, “high” to 360 and all mid-value to 240-360 range.