custom-cards / button-card

❇️ Lovelace button-card for home assistant
MIT License
1.97k stars 242 forks source link

background color is incorrect according to the digital color picker #782

Open Mariusthvdb opened 1 year ago

Mariusthvdb commented 1 year ago

Checklist

Describe the bug A clear and concise description of what the bug is.

Version of the card Version:

To Reproduce This is the configuration I used:

  - type: custom:button-card
    template: button_default_title
    styles:
      card:
        - background: rgb(33,100,194) #'#2164c2' 

Screenshots If applicable, add screenshots to help explain your problem.

main view section, clearlyy showing the discrepancy between the button card header card, and the contained solar panel cards:

Scherm­afbeelding 2023-10-05 om 10 17 52

a bit difficult to screenshot the color picker while selecting the area.... but here goes, selecting the actual color of the image I want to get the color from

Scherm­afbeelding 2023-10-05 om 10 13 54

but is shows this in the button card, when using that exact same rgb value, or hex value, doesnt matter

Scherm­afbeelding 2023-10-05 om 10 14 27

Expected behavior A clear and concise description of what you expected to happen.

use the color code set in the config

Desktop (please complete the following information):

Smartphone (please complete the following information):

Additional context Add any other context about the problem here.

must confess this is a first for me, never encountered the issue before. SO maybe I am not doing it right, and it's a user error. I figured it couldnt be the calibration of the monitor because its all in one single view, card even.

for reference this is the file used in the grid:

solarpanel2

changing the header button card to use the image as background

  - type: custom:button-card
    template: button_default_title
    styles:
      card:
        - background-image: |
            [[[ return  `url("/local/images/solarpanel2.png")`; ]]]
        - background-size: contain
#         - background: rgb(33,100,194) #'#2164c2' #rgb(33,100,194)

does make it show correctly:

Scherm­afbeelding 2023-10-05 om 10 32 33 Scherm­afbeelding 2023-10-05 om 10 32 57

this is actually a cool config, so maybe Ill end up with this, I would love to understand/fix the original issue though