diff --git a/bin/em/variabletime/web/js/audio.js b/bin/em/variabletime/web/js/audio.js
index a4a079e..9f07259 100644
--- a/bin/em/variabletime/web/js/audio.js
+++ b/bin/em/variabletime/web/js/audio.js
@@ -131,14 +131,39 @@ const Audio = function(tp, record) {
         }
     };
 
+    const fixColor = (color) => {
+        if (typeof color === 'object') {
+            const channels = Object.keys(color);
+            channels.forEach((channel) => {
+                if (typeof color[channel] !== 'number') {
+                    console.log('Audio::fixColor', `fixing color.${channel} => 1`);
+                    color[channel] = 1;
+                }
+            });
+        }
+    };
+
     const getAudioMappingOptions = (layer, propTitle) => {
         if (savedMapping.hasOwnProperty(layer.id()) && savedMapping[layer.id()].hasOwnProperty(propTitle)) {
             if (tp.isSequenced(propTitle, layer)) {
                 const m = clone(savedMapping[layer.id()][propTitle]);
                 delete m.letterDelay;
+                if (propTitle.toLowerCase().indexOf('color') >= 0) {
+                    // fix missing alpha in color
+                    fixColor(m.min_out);
+                    fixColor(m.max_out);
+                    fixColor(m.value);
+                }
                 return m;
             }
-            return savedMapping[layer.id()][propTitle];
+            const m = savedMapping[layer.id()][propTitle];
+            if (propTitle.toLowerCase().indexOf('color') >= 0) {
+                // fix missing alpha in color
+                fixColor(m.min_out);
+                fixColor(m.max_out);
+                fixColor(m.value);
+            }
+            return m;
         } else {
             const o = new AudioMappingOptions();
             const mm = getDefaultRange(layer, propTitle);
@@ -390,7 +415,7 @@ const Audio = function(tp, record) {
             });
             picker.onChange = (color) => {
                 min_preview.style.background = color.rgbaString;
-                min_inputDom.value = color.hex;
+                min_inputDom.value = color.hex.padEnd(9, 'f');
                 updateMappingOptions();
                 //mappingOptions.min_out = {
                     //r: color.rgba[0] / 255,
diff --git a/bin/em/variabletime/web/js/utils.js b/bin/em/variabletime/web/js/utils.js
index 2816a47..e26f0e1 100644
--- a/bin/em/variabletime/web/js/utils.js
+++ b/bin/em/variabletime/web/js/utils.js
@@ -515,8 +515,10 @@ const rgbaToHexa = (rgba) => {
 };
 
 // NOTE: all output values are range 0-1
-const hexaToRgba = (hexa) => {
-    const o = hexa[0] === '#' ? 1 : 0;
+const hexaToRgba = (hex_a) => {
+    const o = hex_a[0] === '#' ? 1 : 0;
+    // if it is hex, we need to add alpha
+    const hexa = hex_a.padEnd(8 + o, 'F'); 
     return {
         r: parseInt(hexa.slice(o + 0, o + 2), 16) / 255,
         g: parseInt(hexa.slice(o + 2, o + 4), 16) / 255,