Create a Simple Color Picker using JavaScript
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.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
Please Login to comment...