I have a need to store a default color value for my lights. I have quite a few outdoor color lights, and I normally set them to one color. That color may change throughout the year. But I also want to occasionally change them with an automation. Red during an alarm trigger for instance. I need to store the value, so I can revert them after. Easily done with a text helper, but not easily done in the dashboard to pick the color… Of course there are a lot of ways to accomplish. I was able to use 3 number helpers (0-255), and two sensors. One to convert and format to hex, and one to provide the RGB decimal values. Then with 3 bubble slider cards for the numbers, and two bubble state cards, I have a little custom slider color picker for the default value. I can reference either of the sensors to revert my lights in automations. I have seen quite a few requests for a color helper - thought this may help some.
My card code:
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: separator
name: Hue Color Picker
styles: |
.bubble-line {
background: rgb(${hass.states['input_number.hue_red'].state},${hass.states['input_number.hue_green'].state},${hass.states['input_number.hue_blue'].state});
opacity: 1;
}
- type: custom:bubble-card
card_type: button
button_type: slider
entity: input_number.hue_red
styles: |
.bubble-icon {
color: rgb(255,0,0) !important;
}
.bubble-range-fill {
background: rgb(${state}, 0, 0) !important;
opacity: 1 !important;
}
- type: custom:bubble-card
card_type: button
button_type: slider
entity: input_number.hue_green
styles: |
.bubble-icon {
color: rgb(0,255,0) !important;
}
.bubble-range-fill {
background: rgb(0, ${state}, 0) !important;
opacity: 1 !important;
}
- type: custom:bubble-card
card_type: button
button_type: slider
entity: input_number.hue_blue
styles: |
.bubble-icon {
color: rgb(0,0,255) !important;
}
.bubble-range-fill {
background: rgb(0, 0, ${state}) !important;
opacity: 1 !important;
}
- type: custom:bubble-card
card_type: empty-column
- type: custom:bubble-card
card_type: separator
name: Hue Default Color
card_layout: normal
styles: |
.bubble-line {
background: rgb(${hass.states['input_number.hue_red'].state},${hass.states['input_number.hue_green'].state},${hass.states['input_number.hue_blue'].state});
opacity: 1;
}
- type: custom:bubble-card
card_type: button
button_type: state
entity: sensor.hue_default_state_hex
styles: |
.bubble-icon {
color: #${state} !important;
}
.bubble-button-card-container {
background: #${state} !important;
}
.bubble-state {
text-transform: uppercase;
}
name: Hex Value
show_state: true
- type: custom:bubble-card
card_type: button
button_type: state
entity: sensor.hue_default_state_decimal
styles: |
.bubble-icon {
color: rgb(${state}) !important;
}
.bubble-button-card-container {
background: rgb(${state}) !important;
}
.bubble-state {
text-transform: uppercase;
}
name: RGB Value
show_state: true
My sensor code:
- platform: template
sensors:
# Hue Default State Hex
hue_default_state_hex:
friendly_name: 'Hue Default State Hex'
value_template: >-
{{ '%02x' % states('input_number.hue_red') |int }}{{ '%02x' % states('input_number.hue_green') |int }}{{ '%02x' % states('input_number.hue_blue') |int }}
- platform: template
sensors:
# Hue Default State Decimal
hue_default_state_decimal:
friendly_name: 'Hue Default State Decimal'
value_template: >-
{{ states('input_number.hue_red') |int }},{{ states('input_number.hue_green') |int }},{{ states('input_number.hue_blue') |int }}