Skip to content
💡 A Lovelace custom card for RGB lights
JavaScript HTML
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore Render less often, fix issures with light.turn_on service Oct 17, 2019
.travis.yml
LICENSE Initial commit Oct 15, 2019
README.md Add documentation and publish 1.3 Nov 18, 2019
card.js Support scenes and scripts (WIP) Nov 18, 2019
hacs.json Add hacs configuration file Oct 22, 2019
package.json
playground.html Add a playground for local tests Nov 18, 2019

README.md

RGB Light Card

Version HACS: Default LGTM Hits per month code style: prettier

A Lovelace custom card for RGB lights

Light Dark

Installation

You can either install this card through HACS, or follow these simple steps:

1. Open the Raw Config Editor

(Click to expand)
  1. Go to your Lovelace view

  2. Click on the three dots menu (top-right) and click on Configure UI.

  3. Click in the three dots menu again and click on Raw config editor.

2. Add the rgb-light-card to the resources

Add the following resource to your Lovelace configuration (typically at the top) :

resources:
    - url: https://cdn.jsdelivr.net/npm/rgb-light-card
      type: js

Updating

The RGB Light Card will auto-update 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: - url: ...@1.2.0)

Configuration

The rbg-light-card is meant to be included in the Lovelace Entities Card

Example configuration:

type: entities
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

Options

Name Type Requirement Default Description
type string Required custom:rgb-light-card
entity string Optional Light entity to control. If not set here, entity_id must be set 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

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
type string Optional light Can be set to light, script or scene to change the click action. Read the explanation just below
entity_id string Optional Override the entity option for this specific color

Calling scripts and scenes

By default, clicking an icon calls the service light.turn_on with the defined options, but you can also call a script or a scene instead. That's what the type option is made for.

Scripts and scenes are good ways to set multiple lights at once, as well as other entities

Example configuration:

type: entities
entities:
    - type: 'custom:rgb-light-card'
      colors:
          # First icon calls a script
          - type: script
            entity_id: script.night_mode
            icon_color: 'linear-gradient(#777777, #151515)'
          # Second icon calls a scene
          - type: scene
            entity_id: scene.romantic
            icon_color: 'linear-gradient(25deg, #ba71ff, #ff53b9)'

As you can see, an entity_id must be set for each script or scene

The icon_color is still optional, but will be grey by default

Note that you can mix lights, scripts and scenes in the same card

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:

Icon color examples

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

Justify

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:

Justify examples

License

MIT © Boris K

You can’t perform that action at this time.