diff --git a/pages/options/options.css b/pages/options/options.css
index 7ba26f1c..cfbe5231 100644
--- a/pages/options/options.css
+++ b/pages/options/options.css
@@ -79,7 +79,7 @@ body {
 .div-selected-icon {
     margin-top: 10px;
     padding-right: 25px;
-    min-width: 140px;
+    min-width: 113px;
 }
 
 .div-selected-icon > label {
@@ -214,7 +214,7 @@ body {
 
 .div-badge {
     margin-top: 10px;
-    padding-left: 25px;
+    padding-left: 30px;
     border-left: 1px solid #bbb;
 }
 
@@ -236,13 +236,33 @@ body {
 
 #pre-badged-background-color, #pre-badged-text-color {
     width: 30px;
-    height: auto;
-    margin: 10px 5px 0px 0px;
+    height: 30px;
+    margin-right: 5px;
 }
 
 .colorpicker {
     display: flex;
     padding-bottom: 5px;
+    margin-top: 10px;
+    align-items: center;
+}
+
+.colorpicker > input {
+    margin-top: 0px !important;
+}
+
+.color-error {
+    color: red;
+}
+
+#badged-background-color, #badged-text-color {
+    max-width: 150px;
+}
+
+.img-restore-color {
+    margin-left: 5px;
+    height: 15px;
+    cursor: pointer;
 }
 
 .import-export > input[type="button"] {
diff --git a/pages/options/options.html b/pages/options/options.html
index 2b331f26..a2a894d5 100644
--- a/pages/options/options.html
+++ b/pages/options/options.html
@@ -230,11 +230,11 @@
                             <div id="badge-preview-bottom">
                                 <div class="colorpicker">
                                     <div id="pre-badged-background-color"></div>
-                                    <input id="badged-background-color" class="input-text"><br>
+                                    <input id="badged-background-color" class="input-text" maxlength="7"><img id="restore-background-color" class="img-restore-color" src="../../icons/restore.svg"><br>
                                 </div>
                                 <div class="colorpicker">
                                     <div id="pre-badged-text-color"></div>
-                                    <input id="badged-text-color" class="input-text">
+                                    <input id="badged-text-color" class="input-text" maxlength="7"><img id="restore-text-color" class="img-restore-color" src="../../icons/restore.svg">
                                 </div>
                             </div>
                         </div>
diff --git a/pages/options/options.js b/pages/options/options.js
index 1c104139..e8cb3b48 100644
--- a/pages/options/options.js
+++ b/pages/options/options.js
@@ -140,6 +140,9 @@ options._renderOptionsPanel = function () {
     document.getElementById('import-data').addEventListener('click', storageManager.startImportFilePicker);
     document.getElementById('import-file-picker').addEventListener('change', storageManager.handleImportFilePicker);
     
+    document.getElementById('badged-background-color').addEventListener('keyup', options._onChangedHexColor);
+    document.getElementById('badged-text-color').addEventListener('keyup', options._onChangedHexColor);
+    
     document.getElementById('restore-background-color').addEventListener('click', options._setDefaultColor);
     document.getElementById('restore-text-color').addEventListener('click', options._setDefaultColor);
 };
@@ -509,6 +512,25 @@ options._changeTab = function ({ target }) {
     }
 };
 
+options._onChangedHexColor = function ({ target }) {
+    if (/#([a-f0-9]{3}){1,2}\b/i.test(target.value)) {
+        target.classList.remove('color-error');
+        if (target.id === 'badged-text-color') {
+            options._textColor = target.value;
+            wrappers.setBadgeTextColor({color: options._textColor});
+            document.getElementById('counter-preview-badge').style.color = options._textColor;
+            document.getElementById('pre-badged-text-color').style.backgroundColor = options._textColor;
+        } else {
+            options._backgroundColor = target.value;
+            wrappers.setBadgeBackgroundColor({color: options._backgroundColor});
+            document.getElementById('counter-preview-badge').style.backgroundColor = options._backgroundColor;
+            document.getElementById('pre-badged-background-color').style.backgroundColor = options._backgroundColor;
+        }
+    } else {
+        target.classList.add('color-error');
+    }
+};
+
 /**
  *  Updates the domain lists if the options page has no focus.
  *  document.hasFocus() prevents problems with keyboard input.