diff --git a/edit/edit.css b/edit/edit.css
index 19f3c4b7..a550a8e5 100644
--- a/edit/edit.css
+++ b/edit/edit.css
@@ -103,6 +103,10 @@ h2 .svg-icon, label .svg-icon {
 .svg-icon.settings:hover {
   fill: #000;
 }
+input:invalid {
+  background-color: rgba(255, 0, 0, 0.1);
+  color: darkred;
+}
 #enabled {
   margin-left: 0;
   vertical-align: middle;
diff --git a/edit/edit.js b/edit/edit.js
index 2307f395..577d4c93 100644
--- a/edit/edit.js
+++ b/edit/edit.js
@@ -2144,12 +2144,17 @@ function configureColorpicker() {
     onkeydown(event) {
       const key = CodeMirror.keyName(event);
       // ignore: [Shift?] characters, modifiers-only, [Shift?] Esc, Enter, [Shift?] Tab
-      if (/^(Enter|(Shift-)?(Esc|Tab|[!-~])|(Shift-?|Ctrl-?|Alt-?|Cmd-?)*)$/.test(key)) {
+      if (/^(Enter|(Shift-)?(Esc|Tab))$/.test(key)) {
+        this.setCustomValidity('');
         return;
+      } else if (/^((Shift-)?[!-~]|(Shift-?|Ctrl-?|Alt-?|Cmd-?)*)$/.test(key)) {
+        this.setCustomValidity('Not allowed');
+      } else {
+        this.setCustomValidity('');
+        prefs.set('editor.colorpicker.hotkey', key);
       }
       event.preventDefault();
       event.stopPropagation();
-      prefs.set('editor.colorpicker.hotkey', key);
       this.value = key;
     },
     oninput() {