What is the algorithm to create colors for a heatmap?

后端 未结 6 1597
你的背包
你的背包 2021-01-30 10:31

Assuming values are normalized from 0 to 1, what is the algoritm to get a color to create a heatmap like this?

1 is red, .5 is green, 0 is dark blue.

Working in

6条回答
  •  渐次进展
    2021-01-30 11:14

    Here is a JavaScript code snippet to generate CSS hsl color code from [0, 1] value

    function heatMapColorforValue(value){
      var h = (1.0 - value) * 240
      return "hsl(" + h + ", 100%, 50%)";
    }
    

    This algorithm is based on the 5 color heatmap,

    In this algorithm, the colors corresponding with values are

    0    : blue   (hsl(240, 100%, 50%))
    0.25 : cyan   (hsl(180, 100%, 50%))
    0.5  : green  (hsl(120, 100%, 50%))
    0.75 : yellow (hsl(60, 100%, 50%))
    1    : red    (hsl(0, 100%, 50%))
    

    So simple!

提交回复
热议问题