Custom Button Card color always dark when using RGB

Configuration Frontend
1

I am using the custom:button-card and I am trying to change the color of the icon based on the state of an input boolean. This is the code:

show_name: true
show_icon: true
type: custom:button-card
entity: input_boolean.condo_occupied
show_state: false
state:
  - value: off
    color: rgb(27,45,62)
    name: Vacant
  - value: on
    color: red
    name: Occupied

This is working just fine for the name change and the color does change based on the state. The problem is that when using the RGB function, the rendered color is always darker than anticipated.

To show this, I screenshotted a page with a default button and put it into GIMP.
image
The top image is the HA default off state color. I color pick it and this is what is reported:
image
The second button in the screenshot above then uses the RGB function using those values identical to the code snippet. As seen in the screenshot, the rendered color is darker than what was intended.
It does not matter what values I put into the RGB function, it always renders darker than intended.
If I use a built in color then it renders as the color was intended/expected.

I am not sure what I am doing wrong. Any assistance would be greatly appreciated.

2

@portigui You may need to use RGBa. Unfortunately, I not seeing the same issue, is the card part of a larger card or do you have a theme installed?

type: custom:button-card
entity: input_boolean.condo_occupied
show_name: true
show_icon: true
show_state: false
state:
  - value: off
    color: rgba(0, 0, 255, 1)
    name: Vacant
  - value: on
    color: red
    name: Occupied

image
image924×508 16.8 KB

3

Thank you for the reply. I did not think about themes so I created a new dashboard with no themes and tried it there:

title: Test
views:
  - path: default_view
    title: Test
    cards:
      - type: custom:button-card
        entity: input_boolean.test
        show_name: true
        show_icon: true
        show_state: false
        state:
          - value: 'off'
            color: rgba(0, 0, 255, 1)
            name: Vacant
          - value: 'on'
            color: rgba(27,45,62,1)
            name: Occupied

With this test, the color that I used in the “off” value (the one that you tested with) showed up the same as your test, a vibrant blue. However clicking on the card to toggle the state to the other color showed the same darkened values as before.