diff --git a/services/static-webserver/client/source/class/osparc/utils/Utils.js b/services/static-webserver/client/source/class/osparc/utils/Utils.js
index 93ccf8858a5..3b4b78061e0 100644
--- a/services/static-webserver/client/source/class/osparc/utils/Utils.js
+++ b/services/static-webserver/client/source/class/osparc/utils/Utils.js
@@ -679,6 +679,14 @@ qx.Class.define("osparc.utils.Utils", {
       return L > 0.35 ? "#FFF" : "#000";
     },
 
+    namedColorToHex: function(namedColor) {
+      if (qx.util.ExtendedColor.isExtendedColor(namedColor)) {
+        const rgb = qx.util.ExtendedColor.toRgb(namedColor);
+        return qx.util.ColorUtil.rgbToHexString(rgb);
+      }
+      return "#888888";
+    },
+
     bytesToSize: function(bytes, decimals = 2, isDecimalCollapsed = true) {
       if (!+bytes) {
         return "0 Bytes";
diff --git a/services/static-webserver/client/source/class/osparc/workbench/Annotation.js b/services/static-webserver/client/source/class/osparc/workbench/Annotation.js
index fb2bb848d2f..904b71125eb 100644
--- a/services/static-webserver/client/source/class/osparc/workbench/Annotation.js
+++ b/services/static-webserver/client/source/class/osparc/workbench/Annotation.js
@@ -33,10 +33,14 @@ qx.Class.define("osparc.workbench.Annotation", {
     if (id === undefined) {
       id = osparc.utils.Utils.uuidV4();
     }
+    let color = "color" in data ? data.color : this.getColor();
+    if (color && color[0] !== "#") {
+      color = osparc.utils.Utils.namedColorToHex(color);
+    }
     this.set({
       id,
       type: data.type,
-      color: "color" in data ? data.color : this.getColor(),
+      color,
       attributes: data.attributes
     });
   },