<input id="color" style="font-family:monospace" /> <script> color.oninput = function(e) { var input = this.value; if (/^[0-9a-f]{6}$/.test(input)) { this.style.backgroundColor = '#' + input; this.style.borderColor = ''; } else { this.style.borderColor = 'red'; this.style.backgroundColor = ''; } } </script>