diff --git a/dist/vis.js b/dist/vis.js
index a1870d5f..c3d3d0ba 100644
--- a/dist/vis.js
+++ b/dist/vis.js
@@ -26104,9 +26104,6 @@ return /******/ (function(modules) { // webpackBootstrap
    */
   Groups.prototype.add = function (groupname, style) {
     this.groups[groupname] = style;
-    if (style.color) {
-      style.color = util.parseColor(style.color);
-    }
     return style;
   };
 
@@ -26343,12 +26340,9 @@ return /******/ (function(modules) { // webpackBootstrap
     // copy group properties
     if (typeof this.options.group === 'number' || (typeof this.options.group === 'string' && this.options.group != '')) {
       var groupObj = this.grouplist.get(this.options.group);
-      for (var prop in groupObj) {
-        if (groupObj.hasOwnProperty(prop)) {
-          this.options[prop] = groupObj[prop];
-        }
-      }
-      console.log(this.options)
+      util.deepExtend(this.options, groupObj);
+      // the color object needs to be completely defined. Since groups can partially overwrite the colors, we parse it again, just in case.
+      this.options.color = util.parseColor(this.options.color);
     }
     else if (properties.color === undefined) {
       this.options.color = constants.nodes.color;
diff --git a/examples/network/01_basic_usage.html b/examples/network/01_basic_usage.html
index e03e75fe..c81973cd 100644
--- a/examples/network/01_basic_usage.html
+++ b/examples/network/01_basic_usage.html
@@ -22,8 +22,8 @@
 <script type="text/javascript">
   // create an array with nodes
   var nodes = [
-    {id: 1, label: 'Node 1'},
-    {id: 2, label: 'Node 2'},
+    {id: 1, label: 'Node 1', group: 'mygroup1'},
+    {id: 2, label: 'Node 2', group: 'mygroup1'},
     {id: 3, label: 'Node 3'},
     {id: 4, label: 'Node 4'},
     {id: 5, label: 'Node 5'}
@@ -43,9 +43,27 @@
     nodes: nodes,
     edges: edges
   };
-  var options = {};
+  var options = {
+    width: '400px',
+    height: '400px',
+    hover: true,
+    groups: {
+      mygroup1: {
+        color: {
+          hover: {
+            background: 'red',
+            border: 'red'
+          },
+          highlight: 'green'
+        },
+        shape: 'box'
+      }
+    }
+
+  };
   var network = new vis.Network(container, data, options);
 </script>
 
 </body>
+
 </html>
diff --git a/lib/network/Groups.js b/lib/network/Groups.js
index 7eb6c957..dc45ae34 100644
--- a/lib/network/Groups.js
+++ b/lib/network/Groups.js
@@ -74,9 +74,6 @@ Groups.prototype.get = function (groupname) {
  */
 Groups.prototype.add = function (groupname, style) {
   this.groups[groupname] = style;
-  if (style.color) {
-    style.color = util.parseColor(style.color);
-  }
   return style;
 };
 
diff --git a/lib/network/Node.js b/lib/network/Node.js
index 254f93dd..d228395d 100644
--- a/lib/network/Node.js
+++ b/lib/network/Node.js
@@ -166,12 +166,9 @@ Node.prototype.setProperties = function(properties, constants) {
   // copy group properties
   if (typeof this.options.group === 'number' || (typeof this.options.group === 'string' && this.options.group != '')) {
     var groupObj = this.grouplist.get(this.options.group);
-    for (var prop in groupObj) {
-      if (groupObj.hasOwnProperty(prop)) {
-        this.options[prop] = groupObj[prop];
-      }
-    }
-    console.log(this.options)
+    util.deepExtend(this.options, groupObj);
+    // the color object needs to be completely defined. Since groups can partially overwrite the colors, we parse it again, just in case.
+    this.options.color = util.parseColor(this.options.color);
   }
   else if (properties.color === undefined) {
     this.options.color = constants.nodes.color;