Try this :
[{"id":"ef8314d8.430358","type":"debug","z":"c5966c3d.677f3","name":"","active":true,"tosidebar":true,"console":false,"tostatus":true,"complete":"true","targetType":"full","statusVal":"payload","statusType":"auto","x":610,"y":1090,"wires":[]},{"id":"47462941.153fe8","type":"inject","z":"c5966c3d.677f3","name":"on","props":[{"p":"bulb","v":"on","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":210,"y":1240,"wires":[["440a6a15.f3a5c4"]]},{"id":"440a6a15.f3a5c4","type":"switch","z":"c5966c3d.677f3","name":"","property":"bulb","propertyType":"msg","rules":[{"t":"eq","v":"on","vt":"str"},{"t":"eq","v":"off","vt":"str"}],"checkall":"true","repair":false,"outputs":2,"x":350,"y":1260,"wires":[["1172ac25.6c6ad4"],["93c6ad8d.e8bb5"]]},{"id":"1172ac25.6c6ad4","type":"function","z":"c5966c3d.677f3","name":"on","func":"msg.color = \"#e6d00b\";\nmsg.background = \"#454545\";\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":490,"y":1240,"wires":[["70e99c79.cc27c4"]]},{"id":"93c6ad8d.e8bb5","type":"function","z":"c5966c3d.677f3","name":"off","func":"msg.color = \"grey\";\nmsg.background = \"#454545\";\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":490,"y":1280,"wires":[["70e99c79.cc27c4"]]},{"id":"66fbbdbf.fc8bd4","type":"inject","z":"c5966c3d.677f3","name":"off","props":[{"p":"bulb","v":"off","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":210,"y":1280,"wires":[["440a6a15.f3a5c4"]]},{"id":"70e99c79.cc27c4","type":"ui_button","z":"c5966c3d.677f3","name":"","group":"f90f3cdb.aa35b","order":37,"width":"2","height":"1","passthru":false,"label":"","tooltip":"","color":"{{msg.color}}","bgcolor":"{{msg.background}}","icon":"fa-3x fa-lightbulb-o","payload":"","payloadType":"str","topic":"","x":630,"y":1260,"wires":[[]]},{"id":"bb3f92ba.469b1","type":"function","z":"c5966c3d.677f3","name":"Gate","func":"let oncolor = msg.oncolor;\nmsg.ui_control = {onicon:\"fa-3x fa-lightbulb-o\",oncolor:oncolor,officon:\"fa-3x fa-lightbulb-o\",offcolor:\"grey\"}\nreturn msg;\n\n\n","outputs":1,"noerr":0,"initialize":"","finalize":"","x":370,"y":1090,"wires":[["c749f1f9.5a5ca"]]},{"id":"c749f1f9.5a5ca","type":"ui_switch","z":"c5966c3d.677f3","name":"","label":"","tooltip":"","group":"f90f3cdb.aa35b","order":1,"width":"2","height":1,"passthru":true,"decouple":"false","topic":"","style":"","onvalue":"true","onvalueType":"bool","onicon":"onicon","oncolor":"oncolor","offvalue":"false","offvalueType":"bool","officon":"officon","offcolor":"offcolor","x":490,"y":1090,"wires":[["ef8314d8.430358"]]},{"id":"3a0a9cc3.a3b8b4","type":"inject","z":"c5966c3d.677f3","name":"#e6d00b","props":[{"p":"oncolor","v":"#e6d00b","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","x":210,"y":1060,"wires":[["bb3f92ba.469b1"]]},{"id":"1970e6e5.2e5219","type":"inject","z":"c5966c3d.677f3","name":"#33ccff","props":[{"p":"oncolor","v":"#33ccff","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","x":210,"y":1110,"wires":[["bb3f92ba.469b1"]]},{"id":"ac154135.26ec8","type":"inject","z":"c5966c3d.677f3","name":"on","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"true","payloadType":"bool","x":360,"y":1010,"wires":[["c749f1f9.5a5ca"]]},{"id":"ce31ec5a.ad80a","type":"inject","z":"c5966c3d.677f3","name":"off","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"false","payloadType":"bool","x":360,"y":1050,"wires":[["c749f1f9.5a5ca"]]},{"id":"295af012.d358b","type":"comment","z":"c5966c3d.677f3","name":"========== push button ==========","info":"","x":360,"y":1320,"wires":[]},{"id":"5788a357.bc37ac","type":"comment","z":"c5966c3d.677f3","name":"inject color first","info":"","x":190,"y":1030,"wires":[]},{"id":"969fd1b0.45332","type":"comment","z":"c5966c3d.677f3","name":"play on or off","info":"","x":350,"y":980,"wires":[]},{"id":"4612bd83.7e3134","type":"comment","z":"c5966c3d.677f3","name":"color and background color here","info":"","x":500,"y":1210,"wires":[]},{"id":"4f80caf3.b87a14","type":"comment","z":"c5966c3d.677f3","name":"play on or off","info":"","x":200,"y":1210,"wires":[]},{"id":"7ccd2793.b1b528","type":"comment","z":"c5966c3d.677f3","name":"========== switch button ==========","info":"","x":370,"y":1140,"wires":[]},{"id":"f90f3cdb.aa35b","type":"ui_group","z":"","name":"forrage","tab":"f1dcd1e8.54e1","order":1,"disp":true,"width":"10","collapse":true},{"id":"f1dcd1e8.54e1","type":"ui_tab","z":"","name":"ESP12","icon":"home","order":17,"disabled":false,"hidden":false}]
here are 2 examples:
- at the top using a ui-switch: first inject the color, then play with on and off or click on the icon to see the color change from on to off
- at the bottom the ui-button : the color is defined in the on , off Functions nodes. Play with on and off to see it turn on and off