[Custom Integration] input_color — store a color as an HA helper entity
A new HACS custom integration that adds an input_color helper to Home Assistant — a reusable color value, like input_number or input_boolean but the value is a color.
The two repos at a glance
Both are independent — the integration works without the card (just call services from automations/scripts/scenes); the card needs the integration to drive.
What it does
Each input_color is a config entry with its own canonical color state (CIE xyY chromaticity + kind + optional brightness). Set it via hex, RGB, HSV, CIE xy, Kelvin, or CSS color name, and apply it to one or more lights through an apply_to service that dispatches via Home Assistant's light.turn_on.
Why xyY
RGB is device-dependent — the same rgb(255, 0, 0) is a different physical red on a Hue Play, a LIFX A19, and a generic ESPHome strip. Storing CIE xyY (chromaticity) and letting each fixture gamut-clamp on its own end is the same approach Hue itself uses for stored favorites.
Services
input_color.set_color— acceptshex_value/rgb_color/hs_color/xy_color/color_temp_kelvin/color_name(exactly one)input_color.set_brightness— stores an optional brightnessinput_color.clear_brightness— clears itinput_color.apply_to— sends the color to one or more lights; supports explicit per-call brightness or push of the stored value
One footgun worth mentioning up front: the apply_to field is named lights:, not target:, because the top-level service target: block already exists. The README spells this out.
Scenes
scene.create snapshots the helper's full state (kind, xy, kelvin, brightness). scene.turn_on restores it. The helper is the named handle; the scene is the frozen moment that includes it. This composes with scenes rather than competing with them.
Companion Lovelace card
ha-color-ext-card — adds a swatch + color picker + Kelvin slider to dashboards. Separate HACS plugin, ~25 KB minified.
Install — both via HACS custom repository
Default-list PRs are filed at hacs/default (one for the integration, one for the plugin), so once they merge you'll be able to install from HACS search directly. Until then, both go in as custom repos.
Integration (backend):
- Open HACS → Integrations
- ⋮ menu (top-right) → Custom repositories
- URL:
https://github.com/kkilchrist/ha-color-ext - Type: Integration
- Click ADD
- Search for Input Color in the HACS list → Download → restart Home Assistant
- Settings → Devices & services → Add Integration → "Input Color"
- Walk the config flow: name, chromatic-or-white, initial color/kelvin, optional initial brightness
Each color is one config entry, so add the integration once per color you want (e.g. input_color.couch, input_color.evening_warm, etc).
Card (Lovelace UI):
- HACS → Frontend (called "Dashboard" in newer HACS versions)
- ⋮ menu → Custom repositories
- URL:
https://github.com/kkilchrist/ha-color-ext-card - Type: Dashboard
- Click ADD
- Search for Input Color Card in the HACS list → Download
- Modern HACS auto-registers the resource on UI dashboards. If you're on YAML mode, add
/hacsfiles/ha-color-ext-card/input-color-card.jsunderlovelace.resourcesmanually. - On any dashboard, add a card with:
type: custom:input-color-card
entity: input_color.your_color_here
Using it in scripts
Three patterns cover most use cases:
1. Push the color to lights — canonical:
- service: input_color.apply_to
target: { entity_id: input_color.couch }
data:
lights: [light.lamp_a, light.lamp_b] # note: `lights:`, not `target:`
# brightness: 200 # v0.2.0+ — explicit value wins over everything
# override_brightness: true # otherwise: push the helper's stored brightness
2. Read it inside a template — useful when brightness has to live on the light.turn_on call (workout intervals, scene-builders, animations):
- service: light.turn_on
target: { entity_id: light.lamp_a }
data:
rgb_color: "{{ state_attr('input_color.couch', 'rgb_color') }}"
brightness_pct: 60
Other useful attributes alongside rgb_color:
{{ state_attr('input_color.couch', 'source_hex') }} {# exact user input, v0.2.0+ #}
{{ state_attr('input_color.couch', 'color_temp_kelvin') }} {# int when kind=white, else null #}
{{ state_attr('input_color.couch', 'kind') }} {# "chromatic" | "white" #}
3. Update the helper from a script — button-driven presets, time-of-day automations:
- service: input_color.set_color
target: { entity_id: input_color.couch }
data: { hex_value: "#FF8000" } # or rgb_color / hs_color / xy_color / color_temp_kelvin / color_name
Putting the card on a dashboard
A single helper:
type: custom:input-color-card
entity: input_color.couch
A pair side-by-side (handy for work/rest, on/off scenes, warm/cool presets):
type: horizontal-stack
cards:
- { type: custom:input-color-card, entity: input_color.work_color }
- { type: custom:input-color-card, entity: input_color.rest_color }
Mental model: the card edits the value, scripts read it (pattern 2) or push it to lights (pattern 1). They're decoupled — either works alone.
v0.1.0 limitations worth knowing
- Card uses native HTML5
<input type="color">; will upgrade to HA's<ha-color-picker>after some real-install testing - No brightness slider in the card yet (use
set_brightnessservice) - Doesn't appear in Settings → Helpers (HA hardcodes that list in the frontend); add via Settings → Devices & services → Add Integration
Here's the page on my dashboard that uses this: a workout interval timer that changes the lights to specific colors to notify me that it's time to sprint (work) or rest in my home gym:
Please do let me know if this is useful to you!
Issues and feedback welcome on the respective repos.