如何使用 HTML CSS 和 JavaScript 创建十六进制颜色生成器？

十六进制颜色是一个六位数代码，表示构成颜色的红色、绿色和蓝色的数量。十六进制颜色生成器给出所选颜色的十六进制代码。

方法：

1. 要选择颜色，我们将使用 创建颜色选择器。
2. 获取颜色选择器返回的值。(颜色选择器返回十六进制值)
3. 将颜色设置为背景并显示十六进制代码。

HTML

  

    Hex color generator
  
    
        body {
            margin: 0;
            padding: 0;
            display: grid;
            place-items: center;
            height: 100vh;
            font-size: 20px;
        }
          
        .main {
            height: 400px;
            width: 250px;
            background: #3A3A38;
            border-radius: 10px;
            display: grid;
            place-items: center;
            color: #fff;
            font-family: verdana;
            border-radius: 15px;
        }
          
        #colorPicker {
            background-color: none;
            outline: none;
            border: none;
            height: 40px;
            width: 60px;
            cursor: pointer;
        }
          
        #box {
            outline: none;
            border: 2px solid #333;
            border-radius: 50px;
            height: 40px;
            width: 120px;
            padding: 0 10px;
        }
    

  

    Hex Color Generator
  
    
  
        
        Color Picker: 
  
        
        Hex Code: 
    
  
    
        function myColor() {
  
            // Get the value return by color picker
            var color = document.getElementById('colorPicker').value;
  
            // Set the color as background
            document.body.style.backgroundColor = color;
  
            // Take the hex code
            document.getElementById('box').value = color;
        }
  
        // When user clicks over color picker,
        // myColor() function is called
        document.getElementById('colorPicker')
            .addEventListener('input', myColor);
    

  

输出：