diff --git a/app/Resources/public/css/base.css b/app/Resources/public/css/base.css
index abccbde690..3291c7c793 100644
--- a/app/Resources/public/css/base.css
+++ b/app/Resources/public/css/base.css
@@ -6424,3 +6424,8 @@ ul#toolnavbox-two li a.btn{
     width: 21.33333px;
     height: 14.22222px;
 }
+
+input.form-control[type="color"] {
+    padding: 2px;
+}
+
diff --git a/main/inc/lib/formvalidator/Element/Color.php b/main/inc/lib/formvalidator/Element/Color.php
new file mode 100644
index 0000000000..b3bd78400e
--- /dev/null
+++ b/main/inc/lib/formvalidator/Element/Color.php
@@ -0,0 +1,52 @@
+<?php
+/* For licensing terms, see /license.txt */
+
+/**
+ * Input Color element
+ *
+ * Class Color
+ */
+class Color extends HTML_QuickForm_text
+{
+    /**
+     * @param string $elementName
+     * @param string $elementLabel
+     * @param array  $attributes
+     */
+    public function __construct($elementName = null, $elementLabel = null, $attributes = null)
+    {
+        if (!isset($attributes['id'])) {
+            $attributes['id'] = $elementName;
+        }
+
+        $attributes['type'] = 'color';
+        $attributes['class'] = 'form-control';
+        $attributes['cols-size'] = isset($attributes['cols-size']) ? $attributes['cols-size'] : [2, 1, 9];
+
+        parent::__construct($elementName, $elementLabel, $attributes);
+
+        $this->_appendName = true;
+        $this->setType('color');
+    }
+
+    /**
+     * @return string
+     */
+    public function toHtml()
+    {
+        return parent::toHtml() . <<<JS
+            <script>
+                $(document).on('ready', function () {
+                    var txtColor = $('#{$this->getAttribute('id')}'),
+                        lblColor = txtColor.parent().next();
+
+                    lblColor.text(txtColor.val());
+
+                    txtColor.on('change', function () {
+                        lblColor.text(txtColor.val());
+                    })
+                });
+            </script>
+JS;
+    }
+}