How To Make Color Pickers Using HTML, CSS And JavaScript | RGB | HEX

Color Pickers Using HTML, CSS And JavaScript

Color Pickers in HTML allow the user to select and input a color. Once you click on color picker, the browser converts the input color into a string that represents it. The HTML color picker is used to select colors of different shades which we usually can’t remember because they are very large in quantity.

You can easily generate color schemes , or you can create your own color palette from scratch by using the RGB color picker. Lastly, you can type HEX color values directly into the tool, and you can manually adjust HSL and RGB values in order to fine-tune your color selection.

This HTML color picker gives the code of the shades of colors in terms of RGB, HEX, HSL colors code.

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Color Picker - Sagar Developer</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <label for="colorPicker" class="lableclass">
            CHOOSE A COLOR
        </label>
        <input type="color" id="colorPicker" value="#000">
        <b>Color Code: <code id="colorCode"></code></b>
    </div>
    <script src="script.js"></script>
</body>

</html>

style.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    margin-top: 250px;
}

label {
    font-size: 2em;
    font-weight: 500;
    font-style: italic;
}

input[type="color"] {
    background-color: #fff;
    padding: 10px;
    width: 200px;
    height: 50px;
    cursor: pointer;
    border: 2px solid #000;
    border-radius: 10px;
    margin: 30px;
    outline: none;
}

b {
    background-color: #fff;
    padding: 16px;
    color: #000;
    border: 2px solid #000;
    border-radius: 10px;
}

code {
    font-size: 1.2rem;
    color: #000;
    background-color: #e9e1e1;
    border-radius: 3px;
    border: 2px solid #000;
    padding: 5px;
}

script.js

          
const body = document.querySelector("body");
const input = document.getElementById("colorPicker");
const colorCode = document.getElementById("colorCode");

setColor();
input.addEventListener("input", setColor);

function setColor() {
    body.style.backgroundColor = input.value;
    colorCode.innerHTML = input.value;
}

Note: The browser can read this code and according to the code it will display the color in the website. Wherever you have add any color, just copy the Hex code given by the HTML color picker and paste it as a value to the ‘color’ attribute.

Sagar Developer

How To Make Color Pickers Using HTML, CSS And JavaScript | RGB | HEX | HSL colors |

Color Pickers Using HTML, CSS And JavaScript

0/Post a Comment/Comments

Post a Comment

About Us

Contact Form

How To Make Color Pickers Using HTML, CSS And JavaScript | RGB | HEX | HSL colors |

Color Pickers Using HTML, CSS And JavaScript

Related Posts

0/Post a Comment/Comments

Post a Comment

Contact Form