diff --git a/ui/src/core/forms.js b/ui/src/core/forms.js
index dc26cd2ab7..255c8752c1 100644
--- a/ui/src/core/forms.js
+++ b/ui/src/core/forms.js
@@ -1758,6 +1758,9 @@ window.forms = {
       $(el).colorpicker({
         container: $(el).find('.picker-container'),
         align: 'left',
+        format: ($(el).data('colorFormat') !== undefined) ?
+          $(el).data('colorFormat') :
+          false,
       });
 
       const $inputElement = $(el).find('input');
diff --git a/ui/src/templates/forms/inputs/color.hbs b/ui/src/templates/forms/inputs/color.hbs
index 48fd7a341c..8292633402 100644
--- a/ui/src/templates/forms/inputs/color.hbs
+++ b/ui/src/templates/forms/inputs/color.hbs
@@ -3,6 +3,7 @@
     {{#if visibility}}data-visibility="{{visibility}}"{{/if}}
     {{#if dependsOn}}data-depends-on="{{dependsOn}}"{{/if}}
     {{#if isRequired}}data-is-required="{{isRequired}}"{{/if}}
+    {{#if colorFormat}}data-color-format="{{colorFormat}}"{{/if}}
 >
     {{#if title}}
         <label for="input_{{id}}" class="control-label"><strong>{{title}}</strong></label>
diff --git a/ui/src/templates/forms/layout.hbs b/ui/src/templates/forms/layout.hbs
index 8f41d3d838..2116c4d992 100644
--- a/ui/src/templates/forms/layout.hbs
+++ b/ui/src/templates/forms/layout.hbs
@@ -6,7 +6,7 @@
         <form id="layoutFormEdit" class="XiboForm">
             <div class="tab-content">
                 <div class="tab-pane active" id="generalTab">
-                    {{> inputs/color value=layout.backgroundColor id="backgroundColor" title=trans.layout.backgroundColor helpText=trans.layout.backgroundColorHelpText }}
+                    {{> inputs/color value=layout.backgroundColor id="backgroundColor" colorFormat="rgb" title=trans.layout.backgroundColor helpText=trans.layout.backgroundColorHelpText }}
                     
                     <div class="form-group">
                         <label class="control-label">