Create a Simple Color Picker using JavaScript - GeeksforGeeks

05 Jan, 2022
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="https://fonts.googleapis.com/css2?family=Itim&display=swap"        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.input {    position: absolute;    top: 450px;    left: 550px;}  div.input 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
anikakapoor
sagar0719kumar
CSS-Properties
CSS-Questions
HTML-Questions
JavaScript-Methods
JavaScript-Questions
CSS
HTML
JavaScript
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a web page using HTML and CSS
Form validation using jQuery
How to set space between the flexbox ?
Search Bar using HTML, CSS and JavaScript
How to Create Time-Table schedule using HTML ?
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Hide or show elements in HTML using display property
How to Insert Form Data into Database using PHP ?
REST API (Introduction)