diff --git a/bin/web/js/audio.js b/bin/web/js/audio.js
index 60b332a..4f4250d 100644
--- a/bin/web/js/audio.js
+++ b/bin/web/js/audio.js
@@ -94,21 +94,7 @@ const Audio = function(tp, record) {
         return true;
     }
 
-    const addAudioOptions = (layer, propTitle) => {
-        if (!started) {
-            // audioOptions need a started init
-            init();
-        }
-        const panelPropTitle = tp.getPanelPropTitle(propTitle);
-        if (panelPropTitle === null) {
-            console.log('Audio::addAudioOptions::error',`cannot find panelPropTitle "${propTitle}"`);
-            return;
-        }
-        if (tp.getPanel().querySelector(toCssClass(`audioOptions${propTitle}`, '.')) !== null) {
-            //console.log('Audio::addAudioOptions::error',`audioOptions already exist for "${propTitle}"`);
-            return;
-        }
-        const container = panelPropTitle.parentNode.parentNode;
+    const createAudioOptions = (layer, propTitle, container) => {
         const mappingOptions = mapping[layer.id()][propTitle];
         const panel = tp.getPanel();
         const audioOptions = document.createElement('div');
@@ -233,16 +219,41 @@ const Audio = function(tp, record) {
             freq_down = mapValue(e.clientX, bb.x, bb.x + bb.width, 0, config.audio.fftBandsUsed, true);
         });
 
-        //removeAudioOptions();
         container.after(audioOptions);
 
-        const audioButton = container.querySelector('.audioButton');
-        audioButton.classList.add('active');
-
         canvass.push(fft_imgDom);
         canvasCtxs.push(fft_imgDom.getContext("2d"));
-
         updateMappingOptions();
+        return audioOptions;
+    };
+
+    const addAudioOptions = (layer, propTitle) => {
+        if (!started) {
+            // audioOptions need a started init
+            init();
+        }
+        const panelPropTitle = tp.getPanelPropTitle(propTitle);
+        if (panelPropTitle === null) {
+            console.log('Audio::addAudioOptions::error',`cannot find panelPropTitle "${propTitle}"`);
+            return;
+        }
+        if (tp.getPanel().querySelector(toCssClass(`audioOptions${propTitle}`, '.')) !== null) {
+            //console.log('Audio::addAudioOptions::error',`audioOptions already exist for "${propTitle}"`);
+            return;
+        }
+        const container = panelPropTitle.parentNode.parentNode;
+
+        if (propTitle === 'color') {
+            createAudioOptions(layer, `${propTitle}.r`, container).classList.add(toCssClass(`audioOptions${propTitle}`));
+            createAudioOptions(layer, `${propTitle}.g`, container).classList.add(toCssClass(`audioOptions${propTitle}`));
+            createAudioOptions(layer, `${propTitle}.b`, container).classList.add(toCssClass(`audioOptions${propTitle}`));
+            createAudioOptions(layer, `${propTitle}.a`, container).classList.add(toCssClass(`audioOptions${propTitle}`));
+        } else {
+            createAudioOptions(layer, propTitle, container);
+        }
+
+        const audioButton = container.querySelector('.audioButton');
+        audioButton.classList.add('active');
     };
 
     const removeAudioOptions = (layer = false, propTitle = false) => {
@@ -261,9 +272,9 @@ const Audio = function(tp, record) {
             // only selected layers have options
             // otherwise the ui is not there
             if (layer.isSelected()) {
-                const audioOptions = panel.querySelector(toCssClass(`audioOptions${propTitle}`,'.'));
-                if (audioOptions !== null) {
-                    audioOptions.remove();
+                const audioOptions = panel.querySelectorAll(toCssClass(`audioOptions${propTitle}`,'.'));
+                if (audioOptions.length > 0) {
+                    audioOptions.forEach((e) => { e.remove(); });
                 }
                 const audioButton = panel.querySelector(toCssClass(`audioButton${propTitle}`,'.'));
                 if (audioButton !== null) {