How to use rgb values in markdown

Configuration Frontend
1

setting colors in markdown can easily be done with color names, and # hex codes, but I cant get it done with rgb(1,2,3) colors.

      <font color = {{{% set count = states('sensor.family_home') %}
                    {%- set mapper = {'0':'grey','1':'purple','2':'#2196f3','3':'orange','4':'green','5':'rgb(255, 15, 0)'} %}
                    {{- mapper[count] if count  in mapper else 'red'}} }} > - {{state_attr('sensor.home_badge','desc')}} </font>

works fine except when 5 are home. the template is fine but the rgb value isnt excepted.

Please have a look?

thanks

2

bro, it’s the same issue as before, rgb needs to be in quotes.

just change to

'"rgb(255, 15, 0)"'
1 Like
3

yes, I thought so too, and did try that. but look what happens:

49
49711×284 31.7 KB

resulting in the desired color alright. which is:

58

and the markdown card shows green …

50

I have also tried it with the state_attr icon_color of my sensor.family_home, which is

30
30723×225 21.7 KB

but it doesnt matter, it simply wont load the correct color, or even worse, shows the markdown code itself.

to be complete, this is the markdown card:

  - type: markdown
    style: |
      ha-card {
      background: 'var(--paper-card-background-color)';
      }
    content: >
      # <font color= grey> Home Summary</font>

      ___

      **Overview**

      <font color = {% set count = states('sensor.family_home') %}
                    {%- set mapper = {'0':'grey','1':'purple','2':'#2196f3','3':'orange','4':'green','5':"'rgb(255, 15, 0)'"} %}
                    {{- mapper[count] if count  in mapper else 'red'}} > - {{state_attr('sensor.home_badge','desc')}} </font>

etc
etc

4

then just swap it to the hex code

#FF9C00

5

haha, of course, thats what I could endup using indeed…
still, it itches not being able to find the way to use rgb values in markdown.

it can be done in all other places:

      - type: custom:button-card
        template: button_summary
        entity: sensor.home_badge
        name: Home
        hold_action:
          action: navigate
          navigation_path: /lovelace/phones_tablets
        icon: >
          [[[
          if (entity.state == '0') return 'mdi:account-off';
          if (entity.state == '1') return 'mdi:account';
          if (entity.state == '2') return 'mdi:account-multiple';
          if (entity.state == '3') return 'mdi:account-multiple-check';
          return 'mdi:account-group';
          ]]]
        styles:
          icon:
            - color: >
                [[[return states['sensor.family_home'].attributes.icon_color;]]]
#                [[[
#                if (entity.state == '0') return 'rgb(128, 128, 128)'; 
#                if (entity.state == '1') return 'rgb(128, 205, 128)';
#                if (entity.state == '2') return 'rgb(0, 0, 255)';
#                if (entity.state == '3') return 'rgb(251, 210, 41)';
#                if (entity.state == '4') return 'rgb(255, 135, 0)';
#                if (entity.state == '5') return 'rgb(255, 15, 0)';
#                if (entity.state == '6') return 'rgb(0, 137, 0)';
#                ]]]
6

Becvause they are not the same. One is html, the other is a custom field that has nothing to do with html.

7

this would most likely work

      <font color = "{%- set count = states('sensor.family_home') -%}
                     {%- set mapper = {'0':'grey','1':'purple','2':'#2196f3','3':'orange','4':'green','5':'rgb(255,15,0)'} -%}
                     {{- mapper[count] if count  in mapper else 'red' -}}" > - {{ state_attr('sensor.home_badge','desc')}}</font>
8

no, it doesnt… cant even use a single rgb color, with or without quotes…

      <font color = rgb(0,0,255) > - {{ state_attr('sensor.home_badge','desc')}}</font>

or

      <font color = 'rgb(0,0,255)' > - {{ state_attr('sensor.home_badge','desc')}}</font>

don’t see errors. either green or black is displayed. or the full code.

this must be something else going on? tried to adhere to this Markdown card with template won't format correctly - #17 by Mariusthvdb but it seems different somehow.

9

I am out of my depth here. please let me ask you and @thomasloven why this could be happening:

using:

  - type: markdown
    content: >
      <h1><font color="rgb(128, 0, 128)">This text should be purple</font></h1>

this is what is in the frontend card:

48

and

  - type: markdown
    content: >
      <h1><font color="rgb(128,0,128)">This text should be purple</font></h1>

shows as:

02
I have tried all you said here and in the other linked thread above, rgb() colors simply don’t show at all.
Why this is green I cant explain either, maybe that is a default color somewhere in the system? But even in the ‘default’ HA setting, this is showing green…could this be a bug in the ha markdown card?

10

are you clearing cache and reloading your page? F12 your elements and see where it’s inheriting the colors too. It’s been far too long at this point. You need to dive into the deepend and take time to understand all these languages you play with so often. I think this is the 4th or 5th time i’ve said this in the last 2 years?

11

yes, of course I do. (clear cache , reload, etc etc.) I always test in 3 different browsers adding to that.

agree with you here. Dont have the answer yet though.

I don’t think this has anything to do with me playing with the languages, I think this is a bug…

why else would the simplest of cards I posted above not show correctly. A native card in Lovelace without any customization, mixing of languages or other possible conflicting techniques.

havent found any documentation on using colors in Markdown for that matter, so maybe it simply isn’t possible in the markdown implementation HA is using.

tried to follow this, but no results unfortunately.

32

53

12

Besides the fact that <font> is deprecated and shouldn’t be used (though unless you’re using e.g. card-mod you are short on alternatives for the markdown card), it never officially supported rgb().
You can try <font color="#800080"> instead.

13

ok thanks for confirming… I use hex and color names successfully already, and now was simply trying to follow up on your example from the other thread, which, as I have been experiencing, is indeed not supported…

I do use the card-mod card though, so if you would know how to do that, would still be very interested to learn how to do so on the markdown card even the simple text above.

what I can’t grasp is why the inspector shows the correct rgb color, and in the font card above shows #008012.

when you say font is deprecated, is that so in the Markdown HA card, or in other libraries we depend on? was it a breaking change in HA somehow?
I’d love to know what is supported, but don’t know where to find that. Would appreciate pointers to read up on that.

thanks! for chiming in.

14

No, I mean deprecated from HTML since HTML5 (2014).
It’s up to the browser what to do when they encounter it.
https://html.spec.whatwg.org/multipage/obsolete.html#non-conforming-features