diff --git a/docs-web/src/main/webapp/src/locale/en.json b/docs-web/src/main/webapp/src/locale/en.json
index efc52757..590fef80 100644
--- a/docs-web/src/main/webapp/src/locale/en.json
+++ b/docs-web/src/main/webapp/src/locale/en.json
@@ -562,7 +562,7 @@
     "email": "Must be a valid e-mail",
     "password_confirm": "Password and password confirmation must match",
     "number": "Number required",
-    "no_space": "Spaces are not allowed"
+    "no_space": "Spaces and colons are not allowed"
   },
   "action_type": {
     "ADD_TAG": "Add a tag",
diff --git a/docs-web/src/main/webapp/src/partial/docs/document.add.tag.html b/docs-web/src/main/webapp/src/partial/docs/document.add.tag.html
index 993c9724..c36eb53c 100644
--- a/docs-web/src/main/webapp/src/partial/docs/document.add.tag.html
+++ b/docs-web/src/main/webapp/src/partial/docs/document.add.tag.html
@@ -1,14 +1,18 @@
 <div class="modal-header">
   <h3>{{ 'tag.new_tag' | translate }}</h3>
 </div>
-<form name="tagForm" novalidate>
+<form name="tagForm" class="form-inline text-center" novalidate>
   <div class="modal-body">
-      <p class="input-group" ng-class="{ 'has-error': !tagForm.name.$valid && tagForm.$dirty }">
-        <span colorpicker class="input-group-addon btn btn-default" data-color="#3a87ad" ng-model="tag.color" ng-style="{ 'background': tag.color }">&nbsp;</span>
-        <input type="text" name="name" ng-attr-placeholder="{{ 'tag.new_tag' | translate }}" class="form-control"
-               ng-maxlength="36" required ng-model="tag.name" ui-validate="{ space: '!$value || $value.indexOf(\' \') == -1' }">
-      </p>
-      <span class="text-danger" ng-show="tagForm.name.$error.space && tagForm.$dirty">{{ 'validation.no_space' | translate }}</span>
+      <div class="input-group" ng-class="{ 'has-error': !tagForm.color.$valid && tagForm.$dirty }">
+          <span colorpicker class="input-group-addon btn btn-default" data-color="#3a87ad" ng-model="tag.color" ng-style="{ 'background': tag.color }">&nbsp;</span>
+          <input type="text" name="color" class="form-control" ng-maxlength="7" ng-model="tag.color" ng-show="hexaField">
+          <button class="btn btn-default" ng-click="hexaField = true" ng-show="!hexaField"><span class="fas fa-microchip"></span></button>
+      </div>
+      <div class="form-group" ng-class="{ 'has-error': !tagForm.name.$valid && tagForm.$dirty }">
+          <input type="text" name="name" ng-attr-placeholder="{{ 'tag.new_tag' | translate }}" class="form-control"
+                 ng-maxlength="36" required ng-model="tag.name" ui-validate="{ space: '!$value || $value.indexOf(\' \') == -1 && $value.indexOf(\':\') == -1' }">
+      </div>
+      <p class="text-danger" ng-show="tagForm.name.$error.space && tagForm.$dirty">{{ 'validation.no_space' | translate }}</p>
   </div>
   <div class="modal-footer">
     <button ng-click="close(tag)" ng-disabled="!tagForm.$valid" class="btn btn-primary">
diff --git a/docs-web/src/main/webapp/src/partial/docs/tag.edit.html b/docs-web/src/main/webapp/src/partial/docs/tag.edit.html
index 513dd8d7..626b2056 100644
--- a/docs-web/src/main/webapp/src/partial/docs/tag.edit.html
+++ b/docs-web/src/main/webapp/src/partial/docs/tag.edit.html
@@ -13,16 +13,19 @@
 
       <div class="col-sm-6">
         <input type="text" name="name" class="form-control" id="inputName"
-          ng-maxlength="36" required ng-model="tag.name" ui-validate="{ space: '!$value || $value.indexOf(\' \') == -1' }">
+          ng-maxlength="36" required ng-model="tag.name" ui-validate="{ space: '!$value || $value.indexOf(\' \') == -1 && $value.indexOf(\':\') == -1' }">
       </div>
     </div>
 
-    <div class="form-group">
+    <div class="form-group" ng-class="{ 'has-error': !editTagForm.color.$valid, success: editTagForm.color.$valid }">
       <label class="col-sm-2 control-label" for="inputColor">{{ 'tag.edit.color' | translate }}</label>
 
       <div class="col-sm-2">
-        <span colorpicker class="btn" data-color="" id="inputColor"
-          ng-model="tag.color" ng-style="{ 'background': tag.color }">&nbsp;</span>
+        <div class="input-group" id="inputColor" ng-class="{ 'has-error': !editTagForm.color.$valid && tagForm.$dirty }">
+          <span colorpicker class="input-group-addon btn btn-default" data-color="#3a87ad" ng-model="tag.color" ng-style="{ 'background': tag.color }">&nbsp;</span>
+          <button class="btn btn-default" ng-click="hexaField = true" ng-show="!hexaField"><span class="fas fa-microchip"></span></button>
+          <input type="text" name="color" class="form-control" ng-maxlength="7" ng-model="tag.color" ng-show="hexaField">
+        </div>
       </div>
     </div>
 
diff --git a/docs-web/src/main/webapp/src/partial/docs/tag.html b/docs-web/src/main/webapp/src/partial/docs/tag.html
index a2f3e2dc..bb1fd7c7 100644
--- a/docs-web/src/main/webapp/src/partial/docs/tag.html
+++ b/docs-web/src/main/webapp/src/partial/docs/tag.html
@@ -13,13 +13,17 @@
 <div class="row">
   <div class="col-md-4">
     <div class="well well-3d">
-      <form name="tagForm" novalidate>
-        <p class="input-group" ng-class="{ 'has-error': !tagForm.name.$valid && tagForm.$dirty }">
+      <form class="form-inline text-center" name="tagForm" novalidate>
+        <div class="input-group" ng-class="{ 'has-error': !tagForm.color.$valid && tagForm.$dirty }">
           <span colorpicker class="input-group-addon btn btn-default" data-color="#3a87ad" ng-model="tag.color" ng-style="{ 'background': tag.color }">&nbsp;</span>
+          <input type="text" name="color" class="form-control" ng-maxlength="7" ng-model="tag.color" ng-show="hexaField">
+          <button class="btn btn-default" ng-click="hexaField = true" ng-show="!hexaField"><span class="fas fa-microchip"></span></button>
+        </div>
+        <div class="form-group" ng-class="{ 'has-error': !tagForm.name.$valid && tagForm.$dirty }">
           <input type="text" name="name" ng-attr-placeholder="{{ 'tag.new_tag' | translate }}" class="form-control"
-            ng-maxlength="36" required ng-model="tag.name" ui-validate="{ space: '!$value || $value.indexOf(\' \') == -1' }">
-          <span class="input-group-addon btn btn-primary" ng-disabled="!tagForm.$valid" ng-click="addTag()">{{ 'add' | translate }}</span>
-        </p>
+                 ng-maxlength="36" required ng-model="tag.name" ui-validate="{ space: '!$value || $value.indexOf(\' \') == -1 && $value.indexOf(\':\') == -1' }">
+        </div>
+        <span class="btn btn-primary" ng-disabled="!tagForm.$valid" ng-click="addTag()">{{ 'add' | translate }}</span>
         <span class="text-danger" ng-show="tagForm.name.$error.space && tagForm.$dirty">{{ 'validation.no_space' | translate }}</span>
       </form>