💡 Lovelace: RGB light card

telashton · June 24, 2021, 2:49pm

Is it possible to combine a linear gradient background with the MDI icons?

bokub · July 7, 2021, 8:43am

Of course!

In my icon tool, replace the Background color with a linear gradient.

For example, here is the result with linear-gradient(45deg, #ff64b6, #ffda82 ):

telashton · July 8, 2021, 12:30pm

Perfect - I missed the comma in my attempts! Thanks.

Dujith · August 23, 2021, 8:20pm

Let me start by thanking you for this card. Been in use for the girls bedrooms and they love it.
Now either i’m overlooking it or its not possible (for now). But how would an end user set the colors for the buttons? Right now i have to do it in the code editor but thats not something i’m willing to let them do it.

Something like a long press on the color would set it to the current RGBW values?

bokub · September 1, 2021, 8:37am

Sorry but I don’t think a Lovelace card can store data or change its own configuration…

If I’m wrong, please correct me and I’ll be happy to implement this feature!

RichardU · September 7, 2021, 3:02pm

My Shelly RGBW2 runs an RGBW strip. If I specify an RGB color, the icon shows the correct color. If I specify an RGBW color, the icon is always medium gray, no matter what color I set.

                  - label: Shows correct color
                    rgb_color:
                      - 255
                      - 85
                      - 0
                    effect: 0
                    transition: 1
                  - label: Shows medium gray
                    rgbw_color:
                      - 255
                      - 85
                      - 0
                      - 150
                    effect: 0
                    transition: 1

FWIW, when I choose an RGBW color, the lightbulb icon for the entity shows the correct color, so I can always grab that color from the screen and set it manually if I need to.

Fabry · September 21, 2021, 8:31pm

hello I really like this card, does the HA code go into the yaml configuration?
Regards

BebeMischa · September 29, 2021, 9:43pm

Just installed your card in all my rooms and want to say: thank you very much! This is just fabulous…

Dynamix72 · November 10, 2021, 3:23pm

Is it possible to set a group of lights, where every light in the set gets its own color, brightness etc.? Such as HUE scenes?

Regards

bokub · November 10, 2021, 3:45pm

You can create a Home Assistant scene, then turn on this scene using the RGB Light Card, like this:

type: entities
entities:
- type: custom:rgb-light-card
  colors:
  - type: call-service
    service: scene.turn_on
    service_data:
      entity_id: scene.your_scene # <- id of your scene here

Dynamix72 · November 10, 2021, 4:09pm

Thank you for your help!

DomoSnk · February 18, 2022, 5:41pm

Is there a way to create a scenario/effect with rgb_colors like “wave” from left to right on the led strip from one color to another one?

kim1138 · February 24, 2022, 7:51am

HI! I can’t get kelvin or color_temp to work with below config, throws error below:

Failed to call service light/turn_on. two or more values in the same group of exclusion 'Color descriptors' @ data[<Color descriptors>]

type: entities
show_header_toggle: false
state_color: true
entities:
  - type: custom:slider-entity-row
    entity: light.axels_vagglampa
    name: Vägglampa
    toggle: true
    icon: mdi:wall-sconce
  - type: custom:rgb-light-card
    entity: light.axels_vagglampa
    hide_when_off: false
    justify: around
    colors:
      - rgb_color:
          - 251
          - 180
          - 139
        brightness: 200
        color_temp: 359
        transition: 1
      - rgb_color:
          - 255
          - 0
          - 0
        brightness: 255
        transition: 1
      - rgb_color:
          - 183
          - 225
          - 238
        brightness: 200
        transition: 1
      - rgb_color:
          - 0
          - 0
          - 255
        brightness: 200
        transition: 1
      - rgb_color:
          - 0
          - 255
          - 0
        brightness: 200
        transition: 1
      - rgb_color:
          - 255
          - 0
          - 255
        brightness: 200
        transition: 1

dproffer · February 24, 2022, 8:00am

I’m a noob on this card, but I’m not sure it is okay to have two different color setting commands in the same section.

kim1138 · February 24, 2022, 8:23am

Correct, figured that out the moment your posting was made Thx! Thought I could combine temp with color.

hopperjef · July 17, 2022, 1:14pm

Is there a way to get the colors button to pop up a color wheel or go the color selector in more-info? I know I can do it by clicking on the icon then clicking the color tab but it would be nice if I could do it in a single click.

OzStone · August 14, 2022, 7:12pm

Does RGB Light Card work with variables? I want to use a variable for the brightness of the light (and ideally variables for more values). Any way to make this work? Or is this a current limitation of the card?

This doesn’t work:

type: entities
show_header_toggle: false
entities:
  - type: custom:rgb-light-card
    entity: light.inside
    size: 50
    colors:
      - hs_color:
          - 1
          - 100
        brightness: {{ states("input_number.light_scene_brightness") | int }}
        transition: 1

This doesn’t work either:

{{ states.input_number.light_scene_brightness.state | int }}

Either way, cool card. Thank you for making it.

Worst case I could setup a script for each color and put the variables in there.

bokub · August 14, 2022, 9:01pm

Hello,

No, the card doesn’t support templates, you’ll have to write scripts

Have a great day!

OzStone · August 16, 2022, 6:41am

Thank you for the answer, @bokub

Ended up using a script:

When you select a color, it passes a named color variable (called ‘colorname’) to a script called ‘Inside Color’. This script sets a helper called input_text.light_scene to the name of the color. A final activate script then uses this and other settings to actually change the light. This final script can be called again to set the lights to the last selected color.

type: entities
show_header_toggle: false
entities:
  - type: custom:rgb-light-card
    entity: light.inside
    size: 50
    colors:
      - type: call-service
        service: script.inside_color
        service_data:
          colorname: red
        icon_color: red
      - type: call-service
        service: script.inside_color
        service_data:
          colorname: orange
        icon_color: orange
      - type: call-service
        service: script.inside_color
        service_data:
          colorname: yellow
        icon_color: yellow
      - type: call-service
        service: script.inside_color
        service_data:
          colorname: green
        icon_color: green
      - type: call-service
        service: script.inside_color
        service_data:
          colorname: blue
        icon_color: blue
      - type: call-service
        service: script.inside_color
        service_data:
          colorname: indigo
        icon_color: indigo

And the script called by the RGB light card that sets the variables.

alias: Inside Color
sequence:
  - service: input_text.set_value
    data:
      value: "{{ colorname }}"
    target:
      entity_id: input_text.light_scene
  - service: input_select.select_option
    data:
      option: colornametype
    target:
      entity_id: input_select.light_scene_type
  - service: script.inside_scene_activate
    data: {}
mode: single
icon: mdi:palette-outline

Inside Scene Activate script

alias: Inside Scene Activate
sequence:
  - choose:
      - conditions:
          - condition: state
            entity_id: input_select.light_scene_type
            state: colornametype
        sequence:
          - service: light.turn_on
            data:
              color_name: "{{ states.input_text.light_scene.state }}"
              brightness: "{{ states.input_number.light_scene_brightness.state }}"
              transition: 1
            target:
              entity_id: light.inside
mode: single
icon: mdi:lamps

itsboo · September 3, 2022, 11:38pm

Fixed for now by removing the brightness part from rgb_color:…if their is somthing I’m missing help me outout
Hi can somone help me what’s wrong with this code:
On click it’s not changing any color

type: custom:rgb-light-card
entity: light.bedroom_lamp
justify: center
size: 26
colors:
  - rgb_color:
      - 255
      - 170
      - 0
    brightness: 255
    icon_color: linear-gradient(15deg, rgb(255,170,0), rgb(255,225,165)
  - rgb_color:
      - 255
      - 0
      - 0
    brightness: 255
    icon_color: linear-gradient(15deg, red, rgb(255,100,100))
  - rgb_color:
      - 244
      - 38
      - 255
    brightness: 255
    icon_color: linear-gradient(15deg, rgb(244,38,255), rgb(255,138,255))
  - rgb_color:
      - 0
      - 222
      - 255
    brightness: 255
    icon_color: linear-gradient(15deg, rgb(0,222,255), rgb(140,240,255))
  - rgb_color:
      - 0
      - 0
      - 255
    brightness: 255
    icon_color: linear-gradient(15deg, blue, rgb(100,100,255))