Skip to content
Related Articles

Related Articles

How to create Hex color generator using HTML CSS and JavaScript ?

Improve Article
Save Article
  • Last Updated : 03 Feb, 2021
Improve Article
Save Article

Hex color is a six-digit code representing the amount of red, green, and blue that makes up the color. Hex color generator gives the hex code of selected color.


  1. To select a color, we will use <input type=”color”> which creates a color picker.
  2. Get the value returned by color picker.(Color picker returns hex value)
  3. Set the color as background and display the hex code.


<!DOCTYPE html>
    <title>Hex color generator</title>
        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;
    <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">
        function myColor() {
            // Get the value return by color picker
            var color = document.getElementById('colorPicker').value;
            // Set the color as background
   = color;
            // Take the hex code
            document.getElementById('box').value = color;
        // When user clicks over color picker,
        // myColor() function is called
            .addEventListener('input', myColor);


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!