HA-CSS-Color-Selector

The HA CSS Color Selector was created to allow a preview of color schemes for a card. Icon, IconBackground, Brackground, Primary, and Secondary can be selected for preview. The Hex value and CSS Color Name value is also displayed. Select the item you want to preview the color and then select the color from the Color Grid. You can select Icon, Background, Primary, Secondary from the Dropdown menu or you can optional create a Radio Button card. Both are displayed below.

INSTALLATION
Installation is accomplished using the card-mod, mushroom repositories from HACS, Helpers, and Manual Cards. You need to be familiar with adding repositories from HACS, creating Helpers, and creating Manual Cards. If you are not familiar with any of these requirements, there are excellent guides in Home Assistant and online videos available.

The following resources must be installed from HACS
If you do not have HACS installed or are not familiar with HACS there are some good guides available. Both card-mod and mushroom have instructions for installation. They both can be installed using HACS.
- card-mod
- mushroom

If installed, they will show in your resources

Add the following Helpers
They are case and text-sensitive, enter exactly as shown

• input_text.selected_color (Get color selected from Color Grid)
• input_text.icon_c (Contains color value for Icon)
• input_text.icon_background_c (Contains color value for Icon Background)
• input_text.background_c (Contains color value for Background0
• input_text.primary_c (Contains color value for Primary text)
• input_text.secondary_c (Contains color value for Secondary text)
• Use the Text Helper for input_text

Example for input_text.selected_color

• input_select.card_configuration (Contains options to select to preview color Icon, Background, Primary, Secondary)
  • Add the following Options to the input_select.card_configuration entity
    • Icon
    • IconBackground
    • Background
    • Primary
    • Secondary

Use the Dropdown Helper for input_select

Example for input_select.card_configurationr

Create Automation or NodeRed Flow Some prefer Automations or NodeRed I have provide code for both. Install only one.
Create Automation
Paste Card_Color_Configuration_Automation.yml into a new Automation
Create NodeRed Flow (don't create if you created the automation)
Import flows.json into NodeRed

CREATING CARDS
All cards are created using the Manual Card

Tip Be sure to delete or paste over the type:"" before pasting the code in.

It should look like this before pasting in the code.

If you have pasted the code correctly, you should see a preview of the card.

Create Color Grid Card
Paste grid_card_configuration.yml into new Manual Card to create

Create Preview Card
Paste preview_card.yml into new Manual Card to create

Create Card Color Information Card
Paste card_color_information.yml into new Manual Card to create

Create Card Item Options Card with Dropdown Menu There is a Dropdown card and Radio Button card. You can create either one or both. Paste select_item_option.yml in new Manual Card to create

Create Card Options Card with Radio Buttons
Paste select_item_option_radiobutton.yml in new Manual Card to create