HTML十六进制颜色与数值互转异常问题及可行代码

我之前试过不少相关帖子里的解决方案都没效果，最后自己写了一套能完成HTML十六进制颜色与数值互相转换的可行代码，直接就能用：

<!DOCTYPE html>
<html>
<head>
    <style>
        .color1 { 
            border-radius: 50%; 
            width: 21px; 
            height: 21px; 
            border: 3px solid; 
            box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .13); 
            border-color: #00FF7B; 
            background-color: #00FF7B; 
        }
        .color2 { 
            border-radius: 50%; 
            width: 21px; 
            height: 21px; 
            border: 3px solid; 
            box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .13); 
        }
    </style>
</head>
<body>
    <div class='color1'></div>
    <br/>
    <button onclick="hexToNum()">Get Numeric Value </button>
    <input type='text' id='num'>
    <br/><br/><br/>
    <div class='color2'></div>
    <br/><br/>
    <input type='text' id='str'>
    <button onclick="NumToHex()">Set Color From Numeric Value </button>

    <script>
        function hexToNum() { 
            const orignalColor = '#00FF7B'; 
            const newStr = orignalColor.replace('#', ''); 
            document.querySelector('#num').value = parseInt(newStr, 16);
        }
        function NumToHex() { 
            const el = document.querySelector('#str'); 
            const num = el.value; 
            const str1 = num.toString(16); 
            console.log(str1); 
            el.style.borderColor = '#' + str1; 
            el.style.backgroundColor = '#' + str1; 
        }
    </script>
</body>
</html>

关键功能说明： #

• hexToNum函数：把预设的十六进制颜色#00FF7B去掉#前缀后，通过parseInt(newStr, 16)转换为十进制数值，直接显示在对应输入框中。
• NumToHex函数：读取输入框中的十进制数值，用num.toString(16)转回十六进制字符串，同时将这个颜色设置到输入框的边框和背景上，还会在控制台打印转换结果方便调试。
• 两个圆形色块分别作为初始颜色预览和转换后的效果展示，直观呈现颜色变化。

内容的提问来源于stack exchange，提问作者dota2pro