# Temperature into a color

**URL:** <https://discourse.nodered.org/t/temperature-into-a-color/81810>\
**Category:** General\
**Created:** [5 October 2023 18:10 UTC](https://discourse.nodered.org/t/temperature-into-a-color/81810 "2023-10-05T18:10:07Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![madmax](https://avatars.discourse-cdn.com/v4/letter/m/8baadc/32.png) [@madmax](https://discourse.nodered.org/u/madmax)\
**Post date:** [5 October 2023 18:10 UTC](https://discourse.nodered.org/t/temperature-into-a-color/81810/1 "2023-10-05T18:10:07Z")

</div>

Hello!  
Is it possible to convert a temperature into a color?

That kind of thing.

I hope someone can help me.  
 ![tempcolor2-2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/4/544c11c61536186b707ead69f9105ff76e9e882e.png)

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [5 October 2023 18:18 UTC](https://discourse.nodered.org/t/temperature-into-a-color/81810/2 "2023-10-05T18:18:41Z")

</div>

Create an array of colours, scale your temperature from 0 to colours.length, then pick the item from the array based on your scaled temperature.

---

<div class="post-metadata">

**Author:** ![madmax](https://avatars.discourse-cdn.com/v4/letter/m/8baadc/32.png) [@madmax](https://discourse.nodered.org/u/madmax)\
**Post date:** [5 October 2023 18:21 UTC](https://discourse.nodered.org/t/temperature-into-a-color/81810/3 "2023-10-05T18:21:44Z")

</div>

[quote="Steve-Mcl, post:2, topic:81810, full:true"]  
Create an array of colours, scale your temperature from 0 to colours.length, then pick the item from the array based on your scaled temperature.  
[/quote]Hello!

Thanks for the answer.

OK. I thought there was a node there.

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [5 October 2023 18:41 UTC](https://discourse.nodered.org/t/temperature-into-a-color/81810/4 "2023-10-05T18:41:45Z")

</div>

There is an example at [https://discourse.nodered.org/t/warp-speed-indicator-changing-background-colour-according-to-payload-value-css-only/57256](https://discourse.nodered.org/t/warp-speed-indicator-changing-background-colour-according-to-payload-value-css-only/57256) showing one way to change the background of a dashboard template according to the input payload.

It's not very straightforward, surely it could be done more easily!

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [5 October 2023 19:38 UTC](https://discourse.nodered.org/t/temperature-into-a-color/81810/5 "2023-10-05T19:38:13Z")

</div>

Sure , you do not specify what for though.  
Here is a simple example of changing background of a ui-widget using hsl colour using the class and getElementByClassName.  
You can alter the colurs by adjusting the range from 0 to 360.

```auto
[{"id":"3831f2b421e734d8","type":"ui_slider","z":"c31640d81bf733c7","name":"","label":"input","tooltip":"","group":"8b5cde76.edd58","order":2,"width":0,"height":0,"passthru":false,"outs":"end","topic":"","topicType":"str","min":"-10","max":"40","step":1,"className":"colour_target","x":70,"y":140,"wires":[["ebaf88cb55883a99"]]},{"id":"ebaf88cb55883a99","type":"range","z":"c31640d81bf733c7","minin":"-4","maxin":"40","minout":"270","maxout":"0","action":"scale","round":true,"property":"payload","name":"","x":190,"y":140,"wires":[["a7913e49fe94e06e"]]},{"id":"a7913e49fe94e06e","type":"ui_template","z":"c31640d81bf733c7","group":"8b5cde76.edd58","name":"","order":7,"width":3,"height":"6","format":" <script>\n(function(scope) {\n scope.$watch('msg', function(msg) {\n if (msg) {\n var elements = document.getElementsByClassName(\"colour_target\");\n \n elements[0].style[\"background\"] = \"hsl(\" + msg.payload + \", 100%, 50%)\";\n \n }\n });\n})(scope);\n</script>","storeOutMessages":false,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":320,"y":140,"wires":[["7cc94c056a9f41aa"]]},{"id":"7cc94c056a9f41aa","type":"ui_text","z":"c31640d81bf733c7","group":"8b5cde76.edd58","order":2,"width":0,"height":0,"name":"","label":"text","format":"{{msg.payload}}","layout":"row-spread","className":"","style":false,"font":"","fontSize":16,"color":"#000000","x":530,"y":140,"wires":[]},{"id":"8b5cde76.edd58","type":"ui_group","name":"default","tab":"8f03e639.85956","order":1,"disp":false,"width":"12","collapse":false},{"id":"8f03e639.85956","type":"ui_tab","name":"Home","icon":"dashboard","order":3,"disabled":false,"hidden":false}]

```

 ![chrome_screenshot_1696534789619](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/e/6e42f8b206c5259abb95bccfd448aa20e8f04335.png)  
 ![chrome_screenshot_1696534834038](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/9/492c2aca69696bea463ce8432eb6b3c82f7ba09c.png)

> **[Colors HSL and HSLA](https://www.w3schools.com/colors/colors_hsl.asp)**
>
> W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

> **[HTML DOM Element getElementsByClassName() Method](https://www.w3schools.com/jsref/met_element_getelementsbyclassname.asp)**
>
> W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

[edit] updated flow that handles multiple class elements with same name.

```auto
[{"id":"3831f2b421e734d8","type":"ui_slider","z":"c31640d81bf733c7","name":"","label":"input","tooltip":"","group":"8b5cde76.edd58","order":2,"width":0,"height":0,"passthru":false,"outs":"end","topic":"","topicType":"str","min":"-10","max":"40","step":1,"className":"colour_target","x":70,"y":140,"wires":[["ebaf88cb55883a99"]]},{"id":"ebaf88cb55883a99","type":"range","z":"c31640d81bf733c7","minin":"-4","maxin":"40","minout":"270","maxout":"0","action":"scale","round":true,"property":"payload","name":"","x":190,"y":140,"wires":[["a7913e49fe94e06e"]]},{"id":"a7913e49fe94e06e","type":"ui_template","z":"c31640d81bf733c7","group":"8b5cde76.edd58","name":"","order":7,"width":3,"height":"6","format":" <script>\n(function(scope) {\n scope.$watch('msg', function(msg) {\n if (msg) {\n var elements = document.getElementsByClassName(\"colour_target\");\n for(let obj of elements){\n obj.style[\"background\"] = \"hsl(\" + msg.payload + \", 100%, 50%)\";\n }\n }\n });\n})(scope);\n</script>","storeOutMessages":false,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":320,"y":140,"wires":[["7cc94c056a9f41aa"]]},{"id":"7cc94c056a9f41aa","type":"ui_text","z":"c31640d81bf733c7","group":"8b5cde76.edd58","order":2,"width":0,"height":0,"name":"","label":"text","format":"{{msg.payload}}","layout":"row-spread","className":"colour_target","style":false,"font":"","fontSize":16,"color":"#000000","x":530,"y":140,"wires":[]},{"id":"8b5cde76.edd58","type":"ui_group","name":"default","tab":"8f03e639.85956","order":1,"disp":false,"width":"12","collapse":false},{"id":"8f03e639.85956","type":"ui_tab","name":"Home","icon":"dashboard","order":3,"disabled":false,"hidden":false}]

```

 ![chrome_screenshot_1696572211379](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/2/32bcb9adf5aa254883ec4a08759ebc133d9f0acb.png)

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [4 December 2023 19:38 UTC](https://discourse.nodered.org/t/temperature-into-a-color/81810/6 "2023-12-04T19:38:35Z")

</div>

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.