Usage of Background color in hsl notation

Hello all,
is there a way to color a UI widget background dynamically?
Instead of passing a stairs of IFs, it would be more elegant to paint my battery SoC as a hue value, resulting in red at 0% and green at 100% with all possible values between.
If yes, I would like to see an example.
Also, the color saturation might be used to display the Charge/discharge power, but this will be the 2nd chapter.
I found syntax here:
https://www.w3schools.com/cssref/func_hsl.php, but I am not able to implement this in OH4.3.1.
Not even a fixed value is accepted. The 87 in my example should be replaced by the real value coming from the SoC percentage.

    - component: oh-label-item
      config:
        item: SOC
        title: SoC
        style:
          background-color: hsl (87 50% 50%)

You are on the right track. First you have a small error in your example: there must be no space between hsl and (87 50% 50%). If you try hsl(87 50% 50%) you should see a color change.

Second, to make it a dynamic value, you just need work with widget expressions:

In this case, the ultimate value that you want is just a string that reads something like "hsl(87 50% 50%)". With widget expressions, there are several ways to do this but the simplest is probably just:

background-color: ="hsl(" + (120 * items['Your_Item_Name'].numericState /  100) + " 50% 50%)"

With string values, the + just concatenates them together. The calculation in the middle assumes that your percentage value is actually held in an item with the actual numerical value between 0 and 100 and just converts that to 0 to 1 then multiplies that value times 120 (green in hsl). If your number items are different (e.g., already just 0 to 1) you’ll need to modify that a little.

(Also, quick note: the Tutorials and Examples category is for posting your own solutions, not for requesting help. I’ve moved this to a more appropriate category.)

1 Like

Hello Justin,
TNX for Your solution.
I believe, a lot of users will follow Your hint.
BR from Siemer