Hex color is a six-digit code representing the amount of red, green, and blue that makes up the color. The hex color generator gives the hex code of the selected color.
Approach:
- To select a color, we will use <input type=”color”> which creates a color picker.
- Get the value returned by the color picker. (Color picker returns hex value)
- Set the color as the background and display the hex code.
Example: In this example, we will use the above approach for generating hex color.
HTML
<!DOCTYPE html><html><head> <title>Hex color generator</title> <style> 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; } </style></head><body> <h1>Hex Color Generator</h1> <div class="main"> <!-- To select the color --> Color Picker: <input type="color" id="colorPicker" value="#6a5acd"> <!-- To display hex code of the color --> Hex Code: <input type="text" id="box"> </div> <script> 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); </script></body></html> |
Output:
