Set background color to match RGB color

Configuration Frontend
1

Hi there

Hope you can help.
I’m using a custom button card to have an overview of my lights and rollershutters. The background color changes with the state (off/on) but I don’t manage to add an extra feature: i would like my custom button card to have the same background color as the Philips Hue lamp color at that moment. I’m a yaml newbie, so this may be very obvious, but I don’t get it working and I don’t find it elsewhere in the community. Do you know a way out?

This is my button card:


        - entity: light.livingroom
          template: standard-button
          name: null
          show_name: false
          icon: null
          type: custom:button-card
          tap_action:
            action: toggle
        - entity: light.hue_office
          template: standard-button
          name: null
          show_name: false
          icon: mdi:desk
          type: custom:button-card
         styles:
            background-color: [rgb-color]
          tap_action:
            action: call-service
            service: light.toggle
            service_data:
              entity_id: light.switch_office

Thanks!

2

was this ever solved? i’m facing a similar issue and also new to YAML
AFAIK, background-color can recieve rgb in this format only:
background-color: rgb(255,0,0)
i try something like this:
background-color: rgb( {{ states.light.somelight.attributes.rgb_color[0] | int }} , {{ states.light.somelight.attributes.rgb_color[1] | int }} , {{ states.light.somelight.attributes.rgb_color[2] | int }} )
but with no success…

3

This seems to be about a custom:button-card.
Suggest to ask all questions related to this card in the dedicated thread.
People there will help to solve this particular problem - as well as fixing errors.

In short:

  1. Indentation:
  1. This value:
            background-color: [rgb-color]

should be either a color explicitly like

            background-color: red
            background-color: rgb(255,0,0)
            background-color: rgba(255,0,0,0.5)
            background-color: '#ff0000'
            background-color: var(--some-var)

or defined in a js template like

            background-color: >-
              [[[
                return ........;
              ]]]
  1. Jinja cannot be used here:
4

hi! thanks for the reply!
so how would you insert rgb variables (more like attributes from the light entity) as background-color?

5

Have you read the documentation? There is an auto color option.
custom-cards/button-card: :sparkle: Lovelace button-card for home assistant (github.com)

color: auto
color_type: card

Or post in the dedicated thread.

6

I will post in the dedicated thread, thanks!
But to be more clear, it’s not the background of the button-card itself that im trying to change but a notification inside the button-card so AFAIK “color: auto” wont help me
I just need the right JS template to enter attributes so it will be seen as correct background-color syntax