Create a Simple Color Picker using JavaScript
Last Updated :
09 May, 2023
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, and JavaScript is required.
Example: In this example, we will create a simple color picker using JS.
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
Similar Reads
Create a Colour Flipper using JavaScript Color flippers are an entertaining way to add a bit of life to a website or application. With the help of JavaScript, it is possible to create a color flipper that will change the background color of an element with a click of a button. In this article, we will guide you through the steps required t
3 min read
Color Pallete Generator using JavaScript Color Palette Generator App using HTML CSS and JavaScript is a web application that enables useÂrs to effortlessly geneÂrate random color palettes, vieÂw the colors, and copy the color codes to the clipboard with just a single click. There is also a search bar that allows the user to check differen
4 min read
Create a Reflex Game using JavaScript A reflex game is a simple fun game that measures your responding speed. It is quite simple to make and understand. We will be designing a reflex game that will calculate your responding speed. The rules are simple just press the stop button when you see the change in background color, and the time y
6 min read
Creating a Simple Image Editor using JavaScript In this article, we will be creating a Simple Image Editor that can be used to adjust the image values like brightness, contrast, hue, saturation, grayscale, and sepia. Image editors allow one to quickly edit pictures after they have been captured for enhancing them or completely changing their look
10 min read
Random Choice Picker using HTML CSS and JavaScript The Random Choice Picker is a fully functional project that lets you enter some choices and then it will randomly pick any one of them. You can create this super useful project using HTML, CSS, and JavaScript. The basic idea is to input all your choices separated by 'commas', here choices can be any
4 min read
How to create RGB color generator using HTML CSS and JavaScript ? In this article, we will create a RGB color generator using HTML, CSS, and JavaScript. Using RGB color generator, we can construct all the colors from the combination of Red, Green, Blue colors. Each color is represented by the range of decimal numbers from 0 to 255 (256 levels for each color). So,
3 min read