diff --git a/bi/case.js b/bi/case.js
index 4ea3bd985..feda5e08b 100644
--- a/bi/case.js
+++ b/bi/case.js
@@ -3940,7 +3940,7 @@ BI.ColorChooserTrigger = BI.inherit(BI.Trigger, {
     _defaultConfig: function () {
         var conf = BI.ColorChooserTrigger.superclass._defaultConfig.apply(this, arguments);
         return BI.extend(conf, {
-            baseCls: (conf.baseCls || "") + " bi-color-chooser-trigger bi-card",
+            baseCls: (conf.baseCls || "") + " bi-color-chooser-trigger",
             height: 30
         })
     },
@@ -3948,7 +3948,8 @@ BI.ColorChooserTrigger = BI.inherit(BI.Trigger, {
     _init: function () {
         BI.ColorChooserTrigger.superclass._init.apply(this, arguments);
         this.colorContainer = BI.createWidget({
-            type: "bi.layout"
+            type: "bi.layout",
+            cls: "bi-card"
         });
 
         var down = BI.createWidget({
@@ -4274,7 +4275,7 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, {
             errorText: BI.i18nText("BI-Color_Picker_Error_Text"),
             allowBlank: true,
             value: 255,
-            width: 35,
+            width: 32,
             height: 20
         });
         BI.each(Ws, function (i, w) {
@@ -4290,7 +4291,8 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, {
         this.B = Ws[2];
 
         this.none = BI.createWidget({
-            type: "bi.checkbox"
+            type: "bi.checkbox",
+            title: BI.i18nText("BI-Basic_Auto")
         });
         this.none.on(BI.Checkbox.EVENT_CHANGE, function () {
             if (this.isSelected()) {
@@ -4305,6 +4307,23 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, {
             }
         });
 
+        this.transparent = BI.createWidget({
+            type: "bi.checkbox",
+            title: BI.i18nText("BI-Transparent_Color")
+        });
+        this.transparent.on(BI.Checkbox.EVENT_CHANGE, function () {
+            if (this.isSelected()) {
+                self.lastColor = self.getValue();
+                self.setValue("transparent");
+            } else {
+                self.setValue(self.lastColor || "#000000");
+            }
+            if (self.R.isValid() && self.G.isValid() && self.B.isValid()) {
+                self.colorShow.element.css("background-color", self.getValue());
+                self.fireEvent(BI.ColorPickerEditor.EVENT_CHANGE);
+            }
+        });
+
         BI.createWidget({
             type: "bi.htape",
             element: this,
@@ -4314,21 +4333,21 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, {
             }, {
                 el: RGB[0],
                 lgap: 10,
-                width: 20
+                width: 16
             }, {
                 el: this.R,
                 width: 32
             }, {
                 el: RGB[1],
                 lgap: 10,
-                width: 20
+                width: 16
             }, {
                 el: this.G,
                 width: 32
             }, {
                 el: RGB[2],
                 lgap: 10,
-                width: 20
+                width: 16
             }, {
                 el: this.B,
                 width: 32
@@ -4337,18 +4356,33 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, {
                     type: "bi.center_adapt",
                     items: [this.none]
                 },
-                width: 20
+                width: 18
+            }, {
+                el: {
+                    type: "bi.center_adapt",
+                    items: [this.transparent]
+                },
+                width: 18
             }]
         })
     },
 
     setValue: function (color) {
+        if (color === "transparent") {
+            this.transparent.setSelected(true);
+            this.none.setSelected(false);
+            this.R.setValue("");
+            this.G.setValue("");
+            this.B.setValue("");
+            return;
+        }
         if (!color) {
             color = "";
             this.none.setSelected(true);
         } else {
             this.none.setSelected(false);
         }
+        this.transparent.setSelected(false);
         this.colorShow.element.css("background-color", color);
         var json = BI.DOM.rgb2json(BI.DOM.hex2rgb(color));
         this.R.setValue(BI.isNull(json.r) ? "" : json.r);
@@ -4357,6 +4391,9 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, {
     },
 
     getValue: function () {
+        if (this.transparent.isSelected()) {
+            return "transparent";
+        }
         return BI.DOM.rgb2hex(BI.DOM.json2rgb({
             r: this.R.getValue(),
             g: this.G.getValue(),
diff --git a/bi/core.js b/bi/core.js
index ece344eed..8cb222b3d 100644
--- a/bi/core.js
+++ b/bi/core.js
@@ -16840,7 +16840,7 @@ BI.extend(BI.DOM, {
     },
 
     isDarkColor: function (hex) {
-        if (!hex) {
+        if (!hex || !this.isHexColor(hex)) {
             return false;
         }
         var rgb = this.rgb2json(this.hex2rgb(hex));
@@ -16880,6 +16880,9 @@ BI.extend(BI.DOM, {
         if (!rgbColour) {
             return {};
         }
+        if (!this.isRGBColor(rgbColour)) {
+            return {};
+        }
         var rgbValues = rgbColour.match(/\d+(\.\d+)?/g);
         return {
             r: BI.parseInt(rgbValues[0]),
@@ -16925,6 +16928,9 @@ BI.extend(BI.DOM, {
         if (!color) {
             return "";
         }
+        if (!this.isHexColor(color)) {
+            return color;
+        }
         var tempValue = "rgb(", colorArray;
 
         if (color.length === 7) {
diff --git a/docs/case.js b/docs/case.js
index 4ea3bd985..feda5e08b 100644
--- a/docs/case.js
+++ b/docs/case.js
@@ -3940,7 +3940,7 @@ BI.ColorChooserTrigger = BI.inherit(BI.Trigger, {
     _defaultConfig: function () {
         var conf = BI.ColorChooserTrigger.superclass._defaultConfig.apply(this, arguments);
         return BI.extend(conf, {
-            baseCls: (conf.baseCls || "") + " bi-color-chooser-trigger bi-card",
+            baseCls: (conf.baseCls || "") + " bi-color-chooser-trigger",
             height: 30
         })
     },
@@ -3948,7 +3948,8 @@ BI.ColorChooserTrigger = BI.inherit(BI.Trigger, {
     _init: function () {
         BI.ColorChooserTrigger.superclass._init.apply(this, arguments);
         this.colorContainer = BI.createWidget({
-            type: "bi.layout"
+            type: "bi.layout",
+            cls: "bi-card"
         });
 
         var down = BI.createWidget({
@@ -4274,7 +4275,7 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, {
             errorText: BI.i18nText("BI-Color_Picker_Error_Text"),
             allowBlank: true,
             value: 255,
-            width: 35,
+            width: 32,
             height: 20
         });
         BI.each(Ws, function (i, w) {
@@ -4290,7 +4291,8 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, {
         this.B = Ws[2];
 
         this.none = BI.createWidget({
-            type: "bi.checkbox"
+            type: "bi.checkbox",
+            title: BI.i18nText("BI-Basic_Auto")
         });
         this.none.on(BI.Checkbox.EVENT_CHANGE, function () {
             if (this.isSelected()) {
@@ -4305,6 +4307,23 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, {
             }
         });
 
+        this.transparent = BI.createWidget({
+            type: "bi.checkbox",
+            title: BI.i18nText("BI-Transparent_Color")
+        });
+        this.transparent.on(BI.Checkbox.EVENT_CHANGE, function () {
+            if (this.isSelected()) {
+                self.lastColor = self.getValue();
+                self.setValue("transparent");
+            } else {
+                self.setValue(self.lastColor || "#000000");
+            }
+            if (self.R.isValid() && self.G.isValid() && self.B.isValid()) {
+                self.colorShow.element.css("background-color", self.getValue());
+                self.fireEvent(BI.ColorPickerEditor.EVENT_CHANGE);
+            }
+        });
+
         BI.createWidget({
             type: "bi.htape",
             element: this,
@@ -4314,21 +4333,21 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, {
             }, {
                 el: RGB[0],
                 lgap: 10,
-                width: 20
+                width: 16
             }, {
                 el: this.R,
                 width: 32
             }, {
                 el: RGB[1],
                 lgap: 10,
-                width: 20
+                width: 16
             }, {
                 el: this.G,
                 width: 32
             }, {
                 el: RGB[2],
                 lgap: 10,
-                width: 20
+                width: 16
             }, {
                 el: this.B,
                 width: 32
@@ -4337,18 +4356,33 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, {
                     type: "bi.center_adapt",
                     items: [this.none]
                 },
-                width: 20
+                width: 18
+            }, {
+                el: {
+                    type: "bi.center_adapt",
+                    items: [this.transparent]
+                },
+                width: 18
             }]
         })
     },
 
     setValue: function (color) {
+        if (color === "transparent") {
+            this.transparent.setSelected(true);
+            this.none.setSelected(false);
+            this.R.setValue("");
+            this.G.setValue("");
+            this.B.setValue("");
+            return;
+        }
         if (!color) {
             color = "";
             this.none.setSelected(true);
         } else {
             this.none.setSelected(false);
         }
+        this.transparent.setSelected(false);
         this.colorShow.element.css("background-color", color);
         var json = BI.DOM.rgb2json(BI.DOM.hex2rgb(color));
         this.R.setValue(BI.isNull(json.r) ? "" : json.r);
@@ -4357,6 +4391,9 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, {
     },
 
     getValue: function () {
+        if (this.transparent.isSelected()) {
+            return "transparent";
+        }
         return BI.DOM.rgb2hex(BI.DOM.json2rgb({
             r: this.R.getValue(),
             g: this.G.getValue(),
diff --git a/docs/core.js b/docs/core.js
index be104363d..0c3403acc 100644
--- a/docs/core.js
+++ b/docs/core.js
@@ -22858,7 +22858,7 @@ BI.extend(BI.DOM, {
     },
 
     isDarkColor: function (hex) {
-        if (!hex) {
+        if (!hex || !this.isHexColor(hex)) {
             return false;
         }
         var rgb = this.rgb2json(this.hex2rgb(hex));
@@ -22898,6 +22898,9 @@ BI.extend(BI.DOM, {
         if (!rgbColour) {
             return {};
         }
+        if (!this.isRGBColor(rgbColour)) {
+            return {};
+        }
         var rgbValues = rgbColour.match(/\d+(\.\d+)?/g);
         return {
             r: BI.parseInt(rgbValues[0]),
@@ -22943,6 +22946,9 @@ BI.extend(BI.DOM, {
         if (!color) {
             return "";
         }
+        if (!this.isHexColor(color)) {
+            return color;
+        }
         var tempValue = "rgb(", colorArray;
 
         if (color.length === 7) {
diff --git a/src/case/colorchooser/colorchooser.trigger.js b/src/case/colorchooser/colorchooser.trigger.js
index af4de6b9e..93e1c3583 100644
--- a/src/case/colorchooser/colorchooser.trigger.js
+++ b/src/case/colorchooser/colorchooser.trigger.js
@@ -10,7 +10,7 @@ BI.ColorChooserTrigger = BI.inherit(BI.Trigger, {
     _defaultConfig: function () {
         var conf = BI.ColorChooserTrigger.superclass._defaultConfig.apply(this, arguments);
         return BI.extend(conf, {
-            baseCls: (conf.baseCls || "") + " bi-color-chooser-trigger bi-card",
+            baseCls: (conf.baseCls || "") + " bi-color-chooser-trigger",
             height: 30
         })
     },
@@ -18,7 +18,8 @@ BI.ColorChooserTrigger = BI.inherit(BI.Trigger, {
     _init: function () {
         BI.ColorChooserTrigger.superclass._init.apply(this, arguments);
         this.colorContainer = BI.createWidget({
-            type: "bi.layout"
+            type: "bi.layout",
+            cls: "bi-card"
         });
 
         var down = BI.createWidget({
diff --git a/src/case/colorchooser/colorpicker/editor.colorpicker.js b/src/case/colorchooser/colorpicker/editor.colorpicker.js
index 27c07f34b..adca241d6 100644
--- a/src/case/colorchooser/colorpicker/editor.colorpicker.js
+++ b/src/case/colorchooser/colorpicker/editor.colorpicker.js
@@ -40,7 +40,7 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, {
             errorText: BI.i18nText("BI-Color_Picker_Error_Text"),
             allowBlank: true,
             value: 255,
-            width: 35,
+            width: 32,
             height: 20
         });
         BI.each(Ws, function (i, w) {
@@ -56,7 +56,8 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, {
         this.B = Ws[2];
 
         this.none = BI.createWidget({
-            type: "bi.checkbox"
+            type: "bi.checkbox",
+            title: BI.i18nText("BI-Basic_Auto")
         });
         this.none.on(BI.Checkbox.EVENT_CHANGE, function () {
             if (this.isSelected()) {
@@ -71,6 +72,23 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, {
             }
         });
 
+        this.transparent = BI.createWidget({
+            type: "bi.checkbox",
+            title: BI.i18nText("BI-Transparent_Color")
+        });
+        this.transparent.on(BI.Checkbox.EVENT_CHANGE, function () {
+            if (this.isSelected()) {
+                self.lastColor = self.getValue();
+                self.setValue("transparent");
+            } else {
+                self.setValue(self.lastColor || "#000000");
+            }
+            if (self.R.isValid() && self.G.isValid() && self.B.isValid()) {
+                self.colorShow.element.css("background-color", self.getValue());
+                self.fireEvent(BI.ColorPickerEditor.EVENT_CHANGE);
+            }
+        });
+
         BI.createWidget({
             type: "bi.htape",
             element: this,
@@ -80,21 +98,21 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, {
             }, {
                 el: RGB[0],
                 lgap: 10,
-                width: 20
+                width: 16
             }, {
                 el: this.R,
                 width: 32
             }, {
                 el: RGB[1],
                 lgap: 10,
-                width: 20
+                width: 16
             }, {
                 el: this.G,
                 width: 32
             }, {
                 el: RGB[2],
                 lgap: 10,
-                width: 20
+                width: 16
             }, {
                 el: this.B,
                 width: 32
@@ -103,18 +121,33 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, {
                     type: "bi.center_adapt",
                     items: [this.none]
                 },
-                width: 20
+                width: 18
+            }, {
+                el: {
+                    type: "bi.center_adapt",
+                    items: [this.transparent]
+                },
+                width: 18
             }]
         })
     },
 
     setValue: function (color) {
+        if (color === "transparent") {
+            this.transparent.setSelected(true);
+            this.none.setSelected(false);
+            this.R.setValue("");
+            this.G.setValue("");
+            this.B.setValue("");
+            return;
+        }
         if (!color) {
             color = "";
             this.none.setSelected(true);
         } else {
             this.none.setSelected(false);
         }
+        this.transparent.setSelected(false);
         this.colorShow.element.css("background-color", color);
         var json = BI.DOM.rgb2json(BI.DOM.hex2rgb(color));
         this.R.setValue(BI.isNull(json.r) ? "" : json.r);
@@ -123,6 +156,9 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, {
     },
 
     getValue: function () {
+        if (this.transparent.isSelected()) {
+            return "transparent";
+        }
         return BI.DOM.rgb2hex(BI.DOM.json2rgb({
             r: this.R.getValue(),
             g: this.G.getValue(),
diff --git a/src/core/func/function.js b/src/core/func/function.js
index dee83d9db..b26cb99df 100644
--- a/src/core/func/function.js
+++ b/src/core/func/function.js
@@ -122,7 +122,7 @@ BI.extend(BI.DOM, {
     },
 
     isDarkColor: function (hex) {
-        if (!hex) {
+        if (!hex || !this.isHexColor(hex)) {
             return false;
         }
         var rgb = this.rgb2json(this.hex2rgb(hex));
@@ -162,6 +162,9 @@ BI.extend(BI.DOM, {
         if (!rgbColour) {
             return {};
         }
+        if (!this.isRGBColor(rgbColour)) {
+            return {};
+        }
         var rgbValues = rgbColour.match(/\d+(\.\d+)?/g);
         return {
             r: BI.parseInt(rgbValues[0]),
@@ -207,6 +210,9 @@ BI.extend(BI.DOM, {
         if (!color) {
             return "";
         }
+        if (!this.isHexColor(color)) {
+            return color;
+        }
         var tempValue = "rgb(", colorArray;
 
         if (color.length === 7) {