Rgb-light-card NPM

RGB Light Card

A Lovelace custom card for RGB lights

Light Dark

Installation

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)

Configuration

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

Options

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`

Colors options

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 data Click 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

Calling Services

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 the data you want.

You can find more information about service 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

Customization examples

Icon color

The icon_color option accepts the same values as the CSS background property.

This means your icon_color can be:

A HTML color name: icon_color: gold
A hexadecimal code: icon_color: '#FBB48C'
Any other color compatible with background-color: icon_color: rgba(42, 204, 77, 0.5)
A color gradient: icon_color: 'linear-gradient(15deg, #0250c5, #d43f8d)'
Or even an image: icon_color: center/120% url('https://www.home-assistant.io/images/favicon-192x192.png')

The 5 examples above will render like this:

Light icon color examples Dark icon color examples

⚠️ You must wrap your value between quotes if it contains the # character

Material design icons

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

Light icons examples Dark icons examples

Labels

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: