diff --git a/api/js/etemplate/et2_widget_color.js b/api/js/etemplate/et2_widget_color.js
index 193d07e303..443b30e9bf 100644
--- a/api/js/etemplate/et2_widget_color.js
+++ b/api/js/etemplate/et2_widget_color.js
@@ -46,23 +46,44 @@ var et2_color = /** @class */ (function (_super) {
         var _this = 
         // Call the inherited constructor
         _super.call(this, _parent, _attrs, et2_core_inheritance_1.ClassWithAttributes.extendAttributes(et2_color._attributes, _child || {})) || this;
+        _this.cleared = true;
         // included via etemplate2.css
         //this.egw().includeCSS("phpgwapi/js/jquery/jpicker/css/jPicker-1.1.6.min.css");
-        _this.input = jQuery("<input type='color' class='et2_color'/>");
-        _this.setDOMNode(_this.input[0]);
+        _this.span = jQuery("<span class='et2_color'/>");
+        _this.image = jQuery("<img src='" + _this.egw().image("non_loaded_bg") + "'/>")
+            .appendTo(_this.span)
+            .on("click", function () {
+            this.input.trigger('click');
+        }.bind(_this));
+        _this.input = jQuery("<input type='color'/>").appendTo(_this.span)
+            .on('change', function () {
+            this.cleared = false;
+            this.image.hide();
+        }.bind(_this));
+        if (!_this.options.readonly && !_this.options.needed) {
+            _this.clear = jQuery("<span class='ui-icon clear'/>")
+                .appendTo(_this.span)
+                .on("click", function () {
+                this.set_value('');
+                return false;
+            }.bind(_this));
+        }
+        _this.setDOMNode(_this.span[0]);
         return _this;
     }
     et2_color.prototype.getValue = function () {
         var value = this.input.val();
-        if (value === '#FFFFFF' || value === '#ffffff') {
+        if (this.cleared || value === '#FFFFFF' || value === '#ffffff') {
             return '';
         }
         return value;
     };
     et2_color.prototype.set_value = function (color) {
         if (!color) {
-            color = '#ffffff';
+            color = '';
         }
+        this.cleared = !color;
+        this.image.toggle(!color);
         this.input.val(color);
     };
     return et2_color;
diff --git a/api/js/etemplate/et2_widget_color.ts b/api/js/etemplate/et2_widget_color.ts
index 70df271e0c..3c8a53872f 100644
--- a/api/js/etemplate/et2_widget_color.ts
+++ b/api/js/etemplate/et2_widget_color.ts
@@ -28,6 +28,10 @@ import {ClassWithAttributes} from "./et2_core_inheritance";
 export class et2_color extends et2_inputWidget
 {
 	private input: JQuery;
+	private span: JQuery<HTMLElement>;
+	private clear: JQuery<HTMLElement>;
+	private image: JQuery<HTMLImageElement>;
+	private cleared: boolean = true;
 	/**
 	 * Constructor
 	 */
@@ -37,15 +41,35 @@ export class et2_color extends et2_inputWidget
 		super(_parent, _attrs, ClassWithAttributes.extendAttributes(et2_color._attributes, _child || {}));
 		// included via etemplate2.css
 		//this.egw().includeCSS("phpgwapi/js/jquery/jpicker/css/jPicker-1.1.6.min.css");
-		this.input = jQuery("<input type='color' class='et2_color'/>");
-
-		this.setDOMNode(this.input[0]);
+		this.span = jQuery("<span class='et2_color'/>");
+		this.image = <JQuery<HTMLImageElement>>jQuery("<img src='" + this.egw().image("non_loaded_bg") + "'/>")
+			.appendTo(this.span)
+			.on("click", function() {
+				this.input.trigger('click')
+			}.bind(this));
+		this.input = jQuery("<input type='color'/>").appendTo(this.span)
+			.on('change', function() {
+				this.cleared = false;
+				this.image.hide();
+			}.bind(this));
+		if (!this.options.readonly && !this.options.needed)
+		{
+			this.clear = jQuery("<span class='ui-icon clear'/>")
+				.appendTo(this.span)
+				.on("click", function()
+			         {
+				         this.set_value('');
+				         return false;
+			         }.bind(this)
+				);
+		}
+		this.setDOMNode(this.span[0]);
 	}
 
 	getValue( )
 	{
 		var value = this.input.val();
-		if(value === '#FFFFFF' || value === '#ffffff')
+		if(this.cleared || value === '#FFFFFF' || value === '#ffffff')
 		{
 			return '';
 		}
@@ -56,8 +80,11 @@ export class et2_color extends et2_inputWidget
 	{
 		if(!color)
 		{
-			color = '#ffffff';
+			color = '';
 		}
+		this.cleared = !color;
+		this.image.toggle(!color);
+
 		this.input.val(color);
 	}
 }
diff --git a/api/templates/default/etemplate2.css b/api/templates/default/etemplate2.css
index 28bf544cf4..e40fd20f5f 100644
--- a/api/templates/default/etemplate2.css
+++ b/api/templates/default/etemplate2.css
@@ -323,11 +323,30 @@ button#cancel {
  * Color picker widget
  */
 .et2_color {
+	width: 40px;
+	display:inline-block;
+	position:relative;
+}
+.et2_color input {
   padding: 0px;
   height: 20px;
   width: 20px;
   border: 1px solid silver;
 }
+span.et2_color img[src] {
+	/* Extra-specific to make sure we work in grids & preference popup */
+	height: 24px;
+	position: absolute;
+	top: 0px;
+	left: 0px;
+}
+.et2_color .clear {
+	background-position: -95px -126px;
+	display:none;
+}
+.et2_color:hover .clear {
+	display: inline-block;
+}
 /**
  * Text box
  */