Puede usar la expresión regular para su problema. Escribo un ejemplo simple para su entrada.

 <input type="text" id="hex_code" name="hex_code" pattern="#[0-9a-fA-F]{3}([0-9a-fA-F]{3})?" title="in valid hex code"><br><br>

otra opción es el color de tipo de entrada como el comentario de @groov_guy, pero debe convertir los valores rgb a hexadecimales como esta publicación, por lo que debe establecer el valor predeterminado con formato hexadecimal y luego, cuando el cliente cambie de color, puede obtener un nuevo código hexadecimal. un código básico como se muestra a continuación

 <input type="color" onchange="printColor(event)" value="#ff0000"> function printColor(ev) { const color = ev.target.value; console.log(color) // you can get hex value }

enlace de muestra

https://css-tricks.com/color-inputs-a-deep-dive-into-cross-browser-differences/

Puede agregar el atributo de patrón a la entrada. Esto no evitará que el usuario escriba información no válida, pero al enviarla se mostrará un mensaje. Además, puede agregar algunos estilos para mostrar que algo está mal antes de enviarlo.

 <input type="text" class="form-control" tabindex="9" maxlength="2" pattern="[0-9a-fA-F]+"> <style> input:invalid { border: red solid 3px; } </style>

Prueba esto

 <input type="text" class="form-control" onchange="validate($event)" tabindex="9" maxlength="2">

Y en tu .js

 validate(event) { let regEx = "^[-+]?[0-9A-Fa-f]+\.?[0-9A-Fa-f]*?$"; let isHex = regEx.match(event.target.value); // Do things with isHex Boolean }

EDITAR : si necesita evitar, puede hacer algo como esto

 var input = document.getElementById('input'); input.addEventListener('keyup', (event) => { let regEx = /^[0-9a-fA-F]+$/; let isHex = regEx.test(event.target.value.toString()); if(!isHex) { input.value = input.value.slice(0, -1); } })

 <input type="text" class="form-control" id="input" tabindex="9" maxlength="2">