Change icon color

[khalil]

This will work both 4 and 6 byte RGBW as well as RGB (use rgb class for it):

Code:

12345678910111213141516171819202122232425262728293031323334353637383940414243444546

$(function(){   $('.rgbw').each(function(index, el) {     var $el = $(el);     var addr = $el.data('status-object');         $el.find('img').css('visibility', 'hidden');         grp.listen(addr, function(object) {       var value = object.value;       var r, g, b, w;             if (typeof value == 'object') {         r = (value.red || 0) / 255;         g = (value.green || 0) / 255;         b = (value.blue || 0) / 255;         w = (value.white || 0) / 255;       }       else {           r = ((value >> 24) & 0xFF) / 255;           g = ((value >> 16) & 0xFF) / 255;           b = ((value >> 8) & 0xFF) / 255;           w = (value & 0xFF) / 255;        }                 var a = 0.6 * (1 - (1 - w) * (1 - w));       var rgb = [         Math.round(((1 - a) * r + a) * 255),         Math.round(((1 - a) * g + a) * 255),         Math.round(((1 - a) * b + a) * 255)       ];       $el.css('background', 'rgb(' + rgb.join(',') + ')');     });   });   $('.rgb').each(function(index, el) {     var $el = $(el);     var addr = $el.data('status-object');         $el.find('img').css('visibility', 'hidden');         grp.listen(addr, function(object) {       $el.css('background', Scada.getRgbHex(object.value));     });   }); });

Shape can be changed via CSS (this will produce a circle):

Code:

123

.rgbw {   border-radius: 50%; }

A more complex shape can be done via clip-path: https://developer.mozilla.org/en-US/docs.../clip-path

Hello Admin 
I try to add box-shadow to make the color glow, but how to make it right (depend on the color feedback)?