diff --git a/modules/backend/formwidgets/ColorPicker.php b/modules/backend/formwidgets/ColorPicker.php
index e7efb76bc1..92d167b75d 100644
--- a/modules/backend/formwidgets/ColorPicker.php
+++ b/modules/backend/formwidgets/ColorPicker.php
@@ -38,6 +38,11 @@ class ColorPicker extends FormWidgetBase
      */
     public $allowEmpty = false;
 
+    /**
+     * @var string Preferred color format [rgb|prgb|hex|hsv|hsl]
+     */
+    public $format = 'hex';
+
     /**
      * @var bool Show opacity slider
      */
@@ -68,6 +73,7 @@ class ColorPicker extends FormWidgetBase
     public function init()
     {
         $this->fillFromConfig([
+            'format',
             'availableColors',
             'allowEmpty',
             'showAlpha',
@@ -93,6 +99,7 @@ public function prepareVars()
         $this->vars['name'] = $this->getFieldName();
         $this->vars['value'] = $value = $this->getLoadValue();
         $this->vars['availableColors'] = $availableColors = $this->getAvailableColors();
+        $this->vars['format'] = $this->format;
         $this->vars['allowEmpty'] = $this->allowEmpty;
         $this->vars['showAlpha'] = $this->showAlpha;
         $this->vars['readOnly'] = $this->readOnly;
diff --git a/modules/backend/formwidgets/colorpicker/assets/js/colorpicker.js b/modules/backend/formwidgets/colorpicker/assets/js/colorpicker.js
index 90f2b3c3eb..7437b8fd4f 100644
--- a/modules/backend/formwidgets/colorpicker/assets/js/colorpicker.js
+++ b/modules/backend/formwidgets/colorpicker/assets/js/colorpicker.js
@@ -26,6 +26,7 @@
     }
 
     ColorPicker.DEFAULTS = {
+        preferredFormat: 'hex',
         showAlpha: false,
         allowEmpty: false,
         dataLocker: null,
@@ -33,7 +34,49 @@
     }
 
     ColorPicker.prototype.init = function() {
+
         var self = this
+
+        var retriveColorFormat = function() {
+            var format = (
+                    (
+                        self.options.showAlpha &&
+                        self.options.preferredFormat != 'hex'
+                    ) ||
+                    (
+                        !self.options.showAlpha &&
+                        self.options.preferredFormat == 'hex'
+                    )
+            ) ? self.options.preferredFormat : 'rgb'
+            return format
+        }
+
+        var getColorStringFormat = function(color, format) {
+            var colorFormat = ''
+            if (color) {
+               switch(format) {
+                   case 'rgb':
+                     colorFormat = color.toRgbString()
+                     break;
+                   case 'prgb':
+                     colorFormat = color.toPercentageRgbString()
+                     break;
+                   case 'hsv':
+                     colorFormat = color.toHsvString()
+                     break;
+                   case 'hsl':
+                     colorFormat = color.toHslString()
+                     break;
+                   case 'hex':
+                   default:
+                     colorFormat = color.toHexString()
+                     break;
+               }
+            }
+            return colorFormat;
+       }
+
+        this.$preferredFormat = retriveColorFormat()
         this.$dataLocker  = $(this.options.dataLocker, this.$el)
         this.$colorList = $('>ul', this.$el)
         this.$customColor = $('[data-custom-color]', this.$el)
@@ -52,9 +95,9 @@
          */
         if (this.$customColor.length) {
             this.$customColor.spectrum({
-                preferredFormat: 'hex',
                 showInput: true,
                 showAlpha: this.options.showAlpha,
+                preferredFormat: this.$preferredFormat,
                 allowEmpty: this.options.allowEmpty,
                 color: this.$customColor.data('hexColor'),
                 chooseText: $.wn.lang.get('colorpicker.choose', 'Ok'),
@@ -62,19 +105,20 @@
                 appendTo: 'parent',
                 disabled: this.options.disabled,
                 hide: function(color) {
-                    var hex = color ? color.toHexString() : ''
-                    self.$customColorSpan.css('background', hex)
+                    var colorStringFormat = getColorStringFormat(color, self.$preferredFormat)
+                    self.$customColorSpan.css('background', colorStringFormat)
                 },
                 show: function(color) {
                     self.selectColor(self.$customColor)
                 },
                 move: function(color) {
-                    var hex = color ? color.toHexString() : ''
-                    self.$customColorSpan.css('background', hex)
+                    var colorStringFormat = getColorStringFormat(color, self.$preferredFormat)
+                    self.$customColorSpan.css('background', colorStringFormat)
                 },
                 change: function(color) {
-                    var hex = color ? color.toHexString() : ''
-                    self.setCustomColor(hex)
+                    var colorStringFormat = getColorStringFormat(color, self.$preferredFormat)
+                    self.$customColorSpan.css('background', colorStringFormat)
+                    self.setCustomColor(colorFormat)
                 }
             })
         }
diff --git a/modules/backend/formwidgets/colorpicker/partials/_colorpicker.htm b/modules/backend/formwidgets/colorpicker/partials/_colorpicker.htm
index d48211471d..3ec94ce231 100644
--- a/modules/backend/formwidgets/colorpicker/partials/_colorpicker.htm
+++ b/modules/backend/formwidgets/colorpicker/partials/_colorpicker.htm
@@ -5,6 +5,7 @@
         id="<?= $this->getId() ?>"
         class="field-colorpicker <?php if($readOnly || $disabled): ?>disabled<?php endif; ?>"
         data-control="colorpicker"
+        data-preferred-format="<?= $format ?>"
         <?php if ($showAlpha): ?>data-show-alpha="<?= $showAlpha ?>"<?php endif ?>
         <?php if ($allowEmpty): ?>data-allow-empty="<?= $allowEmpty ?>"<?php endif ?>
         data-data-locker="#<?= $this->getId('input') ?>"