Short and sweet, it’d be great to have an input helper to pick a color. There doesn’t seem to be any (friendly) way to pick a color for anything in HA, unless it’s tied to the color of a light entity… And I’ve recently been finding myself working in some automations that I’d like to use a color, unrelated to the state of any particular light.
Is this possible? Could it happen? Does anybody else see any utility in this?
Where do you want to pick the colour from? When I’m looking for a colour for say a light so I can enter in an automation I generally set the light to a colour I like using the standard colour wheel and then go into the developer tools to grab the RGB value from the entity attributes.
Right, I’m hoping for something along the lines of the color wheel we get for lights, but just for an independent selection.
I’d basically be wanting to use it/them in a Lovelace card.
But what will that actually do? Can you explain the use case?
Yes, I’m attempting to create some automations (and probably blueprints) to change the secondary and tertiary colors of a WLED device, since the standard integration only affects the primary color.
I was attempting to do this via a template light, but WLED only reports colors as RGB, and not HS, as a template light requires.
My thinking is that if I could pick a color, independent of the current state of a light, then I could send that value directly.
I’m no developer so probably can’t help too much but maybe something like this card could be modified to do what you want?
Was looking for the same, and was not able to find something suitable.
ATM u can use an input_number. But thats not realy intuitive for selectig a color.
Usecase for is to select a certain number of colors for a light effect.
Yeah, that card is great… I use it for my lights already.
Basically, I’m thinking we need an entity type (I propose input_color) that can hold color attributes (bonus points for different color modes besides rgb_color, like hs_color or color temperature 
), but isn’t dependent on any particular device state.
EDIT: This would probably need a custom card for manipulation in Lovelace, but obviously it would be desirable to be able to edit it directly in the entity dialog, similarly to the way colors (for lights) work now.
I’m just trying to think of ideas here… How about creating a template_light so you have the colour wheel as your picker, then somehow code to link that to whatever light entity you want to control, dynamically through Lovelace. I’m not entirely sure how to do it, but thought that it could maybe be possible.
Thinking about it some more, given that any colour attributes you select for a ‘dummy’ light would be saved, you could surely use those in a script/automation to be given to any other light you want. Fairly certain that would be pretty straight forward.
I did attempt to do something similar:
I was attempting to do this via a template light, but WLED only reports colors as RGB, and not HS, as a template light requires.
So that doesn’t exactly work for my specific use case… I can’t set the color_template of my template light, because the color state reported by WLED isn’t in HS color.
Sorry, I knew I had read that in one of your posts but obviously glanced over it when checking before writing my last reply.
Now that Helpers have been better integrated into the UI… I think this feature request needs to be revisited. Right now I set an input_text to the RGB value I want by typing it in, but would like to just choose from a color picker.
+1 for an color picker helper
Still desire a color picker helper… would be great! +100!
I am also looking for a color picker helper. I want to avoid hard coding colors in my automations (in Node Red) and would like to use a color picker for this purpose, which I would use on an admin panel.
+1 for this
My use case would be using the input_color to control UI colors on an ESPHome Display component.
We can already pass booleans, text, and numbers back and forth between HomeAssistant and ESPHome with:
switch:
- platform: template
text:
- platform: template
number:
- platform: template
, so why can’t we do the same with
color:
- platform: template
Bonus points if the helper class could also include built in methods / helpers to interconnect between different color modes (8 bit RGB, 24 bit RGB, HSV, etc)
I think this could also simplify coordinating lights without integrating them into a light groups, and for rapidly re-coloring UI components.
For instance, you could have automations that set colors to day mode and night mode in the UI.
Maybe this is a niche use case? But I think it would be useful.
Also +1 for this
My use case is a simple Display with RGB-LEDs.
I want to have one place to set the color for all LEDs of the Display at once. And reference in the automation to this stored value. So the user has the choice which color the user like, and don’t have to change the automation.
I also want to set the brightness.
This would be a very useful feature to store color value in special helper.
I don’t know if this is directly applicable, but I found myself in a similar situation. I want to set my outdoor lights to a specific (default) color, but want to perhaps make them red during an alarm. So I need to select and store a default color. I was able to do this with 3 number helpers (0-255), and two sensors. One to convert them to hex values, and one to convert them to decimal RGB(0,0,0). So I can just use the state of either sensor to change my light back to default. Should be able to replicate easily for brightness. I used 3 bubble slider cards with some CSS, and two state bubble cards for the sensors, along with some CSS so I can choose my default color and see it in the dashboard. I will post everything here…
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 }}
@belch: This is a really great approach, and a really clever way to bring the color into the UI. Thanks for sharing!