A Lovelace custom card for RGB lights
If you have HACS, you can install the RGB Light Card from there and jump to the "Configuration" step
Otherwise, follow these simple steps:
In your home assistant, go to the /config/lovelace/resources
page, or navigate to Configuration > Lovelace Dashboards > Resources tab
Click the + button
Set the URL to https://cdn.jsdelivr.net/npm/rgb-light-card
and keep "JavaScript Module" as the resource type
Click "Create"
Note: The RGB Light Card will upgrade automatically a few days after every new release (once your browser cache expires)
However, you can enforce a specific version by adding @X.X.X
at the end of the URL (e.g: https://[...]/rgb-light-card@1.8.0
)
The rgb-light-card
is meant to be included in the Lovelace Entities Card
You can start with a sample configuration by choosing "Custom: RGB Light Card" in the Lovelace card picker
Example configuration:
type: entities
show_header_toggle: false
entities:
# Displays the light entity. It's optional
- entity: light.example_light
# Card configuration starts here
- type: 'custom:rgb-light-card'
entity: light.example_light
colors:
# Any option of the light.turn_on service can be used in each color
- rgb_color:
- 255
- 127
- 255
brightness: 220
transition: 1
- hs_color:
- 60
- 30
icon_color: '#fff8b0' # Override icon color
Pro tip
You can test all the colors options in the Developer Tools > Service page of your Home Assistant.
Choose the
light.turn_on
service, change the service data, and call the service to see the result
Name | Type | Requirement | Default | Description |
---|---|---|---|---|
type |
string | Required | custom:rgb-light-card |
|
entity |
string | Optional | Entity to control. Must be a light or a light group. If you don't define it, entity_id must be defined in each color |
|
colors |
array | Required | Colors to display. Check out color options below | |
justify |
string | Optional | left |
How to distribute free space between icons. Possible values are left ,right ,center ,between and around . Check out examples below |
size |
number | Optional | 32 |
Diameter of the icons, in pixels |
label_size |
number | Optional | 12 |
Size of the labels font, in pixels |
hide_when_off |
boolean | Optional | false |
Hide all the icons if the entity state is off or unavailable |
Name | Type | Requirement | Default | Description |
---|---|---|---|---|
rgb_color , hs_color , brightness , transition etc... |
any | Optional | When you click on a color, it will call the service light.turn_on with all the options you put here as service dataClick here for the full list of options |
|
icon_color |
string | Optional | Override icon color. Check out examples below | |
label |
string | Optional | Optional color label. Check out examples below | |
entity_id |
string | Optional | Override the entity option for this specific color |
|
type |
string | Optional | light |
Can be set to light (default), or call-service to change the click action. Read the explanation just below |
service |
string | Optional | Used with the call-service type to specify the service to call for the click action |
|
service_data |
array | Optional | Used with the call-service type to specify the data to be passed to the service |
By default, clicking an icon calls the light.turn_on
service with the options you defined.
If you want more flexibility, you can use type: call-service
to call a different service, with optional data in a service_data
object.
You can find more information about service calls in the Home Assistant documentation
Example configuration:
type: entities
entities:
- type: 'custom:rgb-light-card'
colors:
# First icon calls a script
- type: call-service
service: script.turn_on
service_data:
entity_id: script.night_mode
icon_color: '#90b2ec'
# Second icon calls a scene
- type: call-service
service: scene.turn_on
service_data:
entity_id: scene.romantic
icon_color: '#f1a5cb'
# Third icon sends an Alexa TTS notification
- type: call-service
service: notify.alexa_media_office
service_data:
data:
type: tts
message: Hello world!
icon_color: '#77e28a'
Note that you can mix lights and service calls in the same card
The icon_color
is still optional, but will be grey by default
The icon_color
option accepts the same values as the CSS background property.
This means your icon_color
can be:
icon_color: gold
icon_color: '#FBB48C'
icon_color: rgba(42, 204, 77, 0.5)
icon_color: 'linear-gradient(15deg, #0250c5, #d43f8d)'
icon_color: center/120% url('https://www.home-assistant.io/images/favicon-192x192.png')
The 5 examples above will render like this:
⚠️ You must wrap your value between quotes if it contains the #
character
As explained above, the icon_color
option accepts any valid CSS value
If you want icons in your colors, you can use the icon tool to convert material design icons into CSS
Small labels can be added below color icons, using the label
option of each color.
Their size can be customized with the label_size
option (default to 12 pixels).
Labels can be just a text, but also accept HTML, which means you can be really creative:
label: Red
label: <b>Orange</b>
label: '<span style="color: #609fc6">Blue</span>'
There are 5 possible values for the justify
option: left
,right
,center
,between
and around
. The default value is left
.
Here are how the different values are handled:
MIT © Boris K