JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="hexTextField" spellcheck="false" maxlength="6">

JavaScript

document.getElementById('hexTextField').addEventListener('keyup', function(e) {
    // Allow: tab, home, end, left, up, right, down
    if ([9, 36, 35, 37, 38, 39, 40].indexOf(e.keyCode) !== -1 ||
        // Allow: Ctrl || Command && a, c, x and v
        (!0 === e.ctrlKey || !0 === e.metaKey) && /65|67|88|86/.test(e.keyCode)) {
        if (e.keyCode === 86 && /(^[0-9A-F]{6}$)|(^[0-9A-F]{3}$)/i.test(e.target.value)) {
            //myColor.setColor(e.target.value, 'hex');
        }
        return;
    }

    console.log(/^[0-9A-F]{6}$/i.test(e.target.value));
    if (/^[0-9A-F]{6}$/i.test(e.target.value)) {
        //myColor.setColor(e.target.value, 'hex');
    } else {
        e.preventDefault();
    }
});