--- a/client/src/components/map/Map.vue	Tue Oct 08 18:22:51 2019 +0200
+++ b/client/src/components/map/Map.vue	Wed Oct 09 09:46:10 2019 +0200
@@ -201,23 +201,15 @@
     }
   },
   methods: {
-    colorLuminance(hex, lum) {
-      hex = String(hex).replace(/[^0-9a-f]/gi, "");
-      if (hex.length < 6) {
-        hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
-      }
-      lum = lum || 0;
-      let opacity = hex.substr(6, 2);
-      var rgb = "#",
-        c,
-        i;
-      for (i = 0; i < 3; i++) {
-        c = parseInt(hex.substr(i * 2, 2), 16);
-        c = Math.round(Math.min(Math.max(0, c + c * lum), 255)).toString(16);
-        rgb += ("00" + c).substr(c.length);
-      }
-
-      return rgb + opacity;
+    colorLuminance(color, lum) {
+      let [r, g, b, a] = color
+        .substring(5, color.length - 1)
+        .split(",")
+        .map(e => Number(e));
+      let [r1, g1, b1] = [r, g, b].map(e =>
+        Math.round(Math.min(Math.max(0, e + e * lum), 255))
+      );
+      return `rgba(${r1},${g1},${b1},${a})`;
     },
     updateBottleneckFilter(bottleneck_id, datestr) {
       if (!bottleneck_id) return;