Skip to content
Related Articles

Related Articles

Improve Article

Create a Simple Color Picker using JavaScript

  • Last Updated : 22 Sep, 2021

It is quite easy to develop such a client-side application. The primary colors as we know are Red(R), Green(G), Blue(B) and by mixing them we can form any color that we want. 

In this article, we will learn to get the RGB value from the user and use CSS to form the color using RGB(red, green, blue) property.

Prerequisite: Basic knowledge of some front-end technologies like HTML, CSS, JavaScript are required.  

HTML code:

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">
 
    <link rel="stylesheet" href="style.css">
    <link href=
        rel="stylesheet">
</head>
 
<body>
    <div class="neumorphism-3"></div>
    <div class="inpt">
        <input type="number" id="red">
        <input type="number" id="green">
        <input type="number" id="blue">
    </div>
    <h1 class="rainbow-text">--RGB-TO-COLOR--</h1>
    <script src="script.js"></script>
</body>
 
</html>

CSS code: The CSS contains some additional lines for a cool hover effect. The following code is the content for “styles.css” code used in the above HTML code.

Filename: style.css

CSS




* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
 
body {
    background: #f7f7f7;
    padding-top: 14%;
}
 
.neumorphism-3 {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    box-shadow: -3px -3px 7px #e9e9e9a9,
        3px 3px 7px #e9e9e9a9;
    position: absolute;
    top: 40px;
    left: 490px;
}
 
.neumorphism-3:hover {
    top: 30px;
    box-shadow: -3px -3px 7px #999999a9,
        -3px -3px 12px #e9e9e9a9,
        3px 3px 7px #999999a9,
        -3px -3px 12px #e9e9e9a9;
    animation: uplift 0.1s 1 linear;
}
 
.neumorphism-3:not( :hover) {
    animation: downlift 0.1s 1 linear;
    top: 40px;
}
 
@keyframes uplift {
    0% {
        top: 40px;
    }
 
    25% {
        top: 37.5px;
    }
 
    50% {
        top: 35px;
    }
 
    75% {
        top: 32.5px;
    }
 
    100% {
        top: 30px;
    }
}
 
@keyframes downlift {
    0% {
        box-shadow: -3px -3px 7px #999999a9,
            -3px -3px 12px #e9e9e9a9,
            3px 3px 7px #999999a9,
            -3px -3px 12px #e9e9e9a9;
        top: 30px;
    }
 
    25% {
        box-shadow: -3px -3px 7px #b3b3b3a9,
            -3px -3px 12px #e9e9e9a9,
            3px 3px 7px #b3b3b3a9,
            -3px -3px 12px #e9e9e9a9;
        top: 32.5px;
    }
 
    50% {
        top: 35px;
        box-shadow: -3px -3px 7px #d6d6d6a9,
            -3px -3px 12px #e9e9e9a9,
            3px 3px 7px #d6d6d6a9,
            -3px -3px 12px #e9e9e9a9;
    }
 
    75% {
        top: 37.5px;
        box-shadow: -3px -3px 7px #f3f3f3a9,
            -3px -3px 12px #e9e9e9a9,
            3px 3px 7px #f3f3f3a9,
            -3px -3px 12px #e9e9e9a9;
    }
 
    100% {
        box-shadow: -3px -3px 7px #e9e9e9a9,
            3px 3px 7px #e9e9e9a9;
        top: 40px;
    }
}
 
div.inpt {
    position: absolute;
    top: 450px;
    left: 550px;
}
 
div.inpt input {
    height: 30px;
    width: 60px;
    font-size: 30px;
    color: seashell;
    text-align: center;
    opacity: 0.7;
    border: none;
    border-radius: 4px;
}
 
#red {
    background-color: red;
}
 
#green {
    background-color: green;
}
 
#blue {
    background-color: blue;
}
 
/* Chrome, Safari, Edge */
 
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
 
/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}
 
.rainbow-text {
    background-image: linear-gradient (
            to left, violet, indigo, blue,
            green, yellow, orange, red);
    width: 300px;
    height: 50px;
    -webkit-background-clip: text;
    color: transparent;
    font-family: "Itim";
    text-align: center;
    position: relative;
    top: 340px;
    left: 500px;
}

JavaScript code: The following is the JavaScript code “script.js” used in the above HTML code.

Filename: script.js

Javascript




let red = document.getElementById('red');
let green = document.getElementById('green');
let blue = document.getElementById('blue');
let box = document.querySelector('div.neumorphism-3');
 
let r = 0, g = 0, b = 0;
 
red.addEventListener("keyup", function (event) {
    r = red.value;
    if (!r)
        r = 0;
    box.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
});
 
green.addEventListener("keyup", function (event) {
    g = green.value;
    if (!g)
        g = 0;
    box.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
});
 
blue.addEventListener("keyup", function (event) {
    b = blue.value;
    if (!b)
        b = 0;
    box.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
});

Output: After running the file, you can choose specific values for R, G, B and get your desired colors.

RGB

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :