diff --git a/package-lock.json b/package-lock.json
index 0f4ba67..aa96b4a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1179,6 +1179,11 @@
         "@hapi/hoek": "^8.3.0"
       }
     },
+    "@icons/material": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/@icons/material/-/material-0.2.4.tgz",
+      "integrity": "sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw=="
+    },
     "@jest/console": {
       "version": "24.9.0",
       "resolved": "https://registry.npmjs.org/@jest/console/-/console-24.9.0.tgz",
@@ -8510,6 +8515,11 @@
         "object-visit": "^1.0.0"
       }
     },
+    "material-colors": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz",
+      "integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg=="
+    },
     "md5.js": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
@@ -11316,6 +11326,19 @@
       "resolved": "https://registry.npmjs.org/react-collapse/-/react-collapse-5.0.1.tgz",
       "integrity": "sha512-cN2tkxBWizhPQ2JHfe0aUSJtmMthKA17NZkTElpiQ2snQAAi1hssXZ2fv88rAPNNvG5ss4t0PbOZT0TIl9Lk3Q=="
     },
+    "react-color": {
+      "version": "2.18.1",
+      "resolved": "https://registry.npmjs.org/react-color/-/react-color-2.18.1.tgz",
+      "integrity": "sha512-X5XpyJS6ncplZs74ak0JJoqPi+33Nzpv5RYWWxn17bslih+X7OlgmfpmGC1fNvdkK7/SGWYf1JJdn7D2n5gSuQ==",
+      "requires": {
+        "@icons/material": "^0.2.4",
+        "lodash": "^4.17.11",
+        "material-colors": "^1.2.1",
+        "prop-types": "^15.5.10",
+        "reactcss": "^1.2.0",
+        "tinycolor2": "^1.4.1"
+      }
+    },
     "react-contexify": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/react-contexify/-/react-contexify-4.1.1.tgz",
@@ -11847,6 +11870,14 @@
         "prop-types": "^15.6.2"
       }
     },
+    "reactcss": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/reactcss/-/reactcss-1.2.3.tgz",
+      "integrity": "sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==",
+      "requires": {
+        "lodash": "^4.0.1"
+      }
+    },
     "read-pkg": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
@@ -13796,6 +13827,11 @@
       "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
       "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
     },
+    "tinycolor2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.1.tgz",
+      "integrity": "sha1-9PrTM0R7wLB9TcjpIJ2POaisd+g="
+    },
     "tmp": {
       "version": "0.0.33",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
diff --git a/package.json b/package.json
index acf1e4a..c0546c5 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "react": "^16.13.1",
     "react-bootstrap": "^1.2.2",
     "react-collapse": "^5.0.1",
+    "react-color": "^2.18.1",
     "react-contexify": "^4.1.1",
     "react-d3": "^0.4.0",
     "react-dnd": "^10.0.2",
diff --git a/src/widget/edit-widget/color-picker.js b/src/widget/edit-widget/color-picker.js
new file mode 100644
index 0000000..a4b84a1
--- /dev/null
+++ b/src/widget/edit-widget/color-picker.js
@@ -0,0 +1,79 @@
+/**
+ * This file is part of VILLASweb.
+ *
+ * VILLASweb is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * VILLASweb is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
+ ******************************************************************************/
+
+import React from 'react';
+import { SketchPicker } from 'react-color';
+import Dialog from '../../common/dialogs/dialog';
+
+
+class ColorPicker extends React.Component {
+  valid = true;
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      color: null
+    };
+  }
+
+  static getDerivedStateFromProps(props, state){
+    let parts = props.controlId.split('.');
+    let isCustomProperty = true;
+    if (parts.length === 1){
+      isCustomProperty = false;
+    }
+    let color = (isCustomProperty ? props.widget[parts[0]][parts[1]] : props.widget[props.controlId]);
+
+    return {
+      color: color
+    };
+  }
+
+  handleChangeComplete = (color) => {
+    this.setState({ color: color.hex });
+  };
+
+  onClose = canceled => {
+    if (canceled) {
+      if (this.props.onClose != null) {
+        this.props.onClose();
+      }
+
+      return;
+    }
+
+    if (this.valid && this.props.onClose != null) {
+      this.props.onClose(this.state.color);
+    }
+  };
+
+  render() {
+      return <Dialog show={this.props.show} title='Color Picker' buttonTitle='Save' onClose={(c) => this.onClose(c)} valid={true}>
+          <form>
+              <SketchPicker
+                  color={this.state.color}
+                  onChangeComplete={ this.handleChangeComplete }
+                  width={"300"}
+              />
+
+          </form>
+      </Dialog>;
+  }
+}
+
+export default ColorPicker;
diff --git a/src/widget/edit-widget/edit-widget-color-control.js b/src/widget/edit-widget/edit-widget-color-control.js
index 2158a55..f5039d2 100644
--- a/src/widget/edit-widget/edit-widget-color-control.js
+++ b/src/widget/edit-widget/edit-widget-color-control.js
@@ -16,10 +16,12 @@
  ******************************************************************************/
 
 import React, { Component } from 'react';
-import { FormGroup, Col, Row, FormCheck, FormLabel } from 'react-bootstrap';
-import classNames from 'classnames';
+import { FormGroup, OverlayTrigger, Tooltip , FormLabel, Button } from 'react-bootstrap';
 import { scaleOrdinal } from 'd3-scale';
-import {schemeCategory10} from 'd3-scale-chromatic'
+import {schemeCategory10} from 'd3-scale-chromatic';
+import ColorPicker from './color-picker'
+import Icon from "../../common/icon";
+
 // schemeCategory20 no longer available in d3
 
 class EditWidgetColorControl extends Component {
@@ -38,9 +40,8 @@ class EditWidgetColorControl extends Component {
     super(props);
 
     this.state = {
-      widget: {
-
-      }
+      widget: {},
+      showColorPicker: false
     };
   }
 
@@ -50,47 +51,36 @@ class EditWidgetColorControl extends Component {
     };
   }
 
-  render() {
+  openColorPicker = () =>{
+    this.setState({showColorPicker: true})
+  }
 
-    let parts = this.props.controlId.split('.');
-    let isCustomProperty = true;
-    if (parts.length === 1){
-      isCustomProperty = false;
+  closeEditModal = (data) => {
+    this.setState({showColorPicker: false})
+    if(data){
+    this.props.handleChange({target: { id: this.props.controlId, value: data}});
     }
+  }
+
+  render() {
+    const currentColor = this.state.widget[this.props.controlId];
+   
     return (
-      <FormGroup bsclass="color-control">
-        <Row>
-          <Col className={FormLabel} style={{whiteSpace: 'nowrap' }} sm={3}>
-            { this.props.label }
-          </Col>
-          <Col sm={10} bsclass='colors-column'>
-          {
-            EditWidgetColorControl.ColorPalette.map( (color, idx ) => {
-                let colorStyle = {
-                  background: color,
-                  borderColor: color
-                };
+      <FormGroup>
+        <FormLabel>{this.props.label}</FormLabel>
 
-                let checkedClass = classNames({
-                  'checked': idx === (isCustomProperty ? this.state.widget[parts[0]][parts[1]] : this.state.widget[this.props.controlId])
-                });
+        <div className='section-buttons-group-right'>
+        <OverlayTrigger key={0} placement={'right'} overlay={<Tooltip id={`tooltip-${"color"}`}> Change color </Tooltip>} >
+        <Button key={2} style={{ width: '260px', height: '40px', color:{currentColor} }} onClick={this.openColorPicker.bind(this)}  >
+          <Icon icon="paint-brush"/>
+        </Button>
+        </OverlayTrigger>
+        </div>
 
-                return (<FormCheck
-                  type='radio'
-                  key={idx}
-                  name={this.props.label}
-                  style={colorStyle}
-                  className={checkedClass}
-                  value={idx}
-                  inline
-                  defaultChecked={isCustomProperty ? this.state.widget[parts[0]][parts[1]] ===idx: this.state.widget[this.props.controlId] === idx}
-                  onChange={(e) => this.props.handleChange({target: { id: this.props.controlId, value: idx}})} />)
-              }
-            )
-          }
-          </Col>
-        </Row>
-      </FormGroup> )
+        <ColorPicker show={this.state.showColorPicker} onClose={(data) => this.closeEditModal(data)} widget={this.state.widget} controlId={this.props.controlId} />
+      </FormGroup>
+
+    )
   }
 }