How To Make RGB Color Generator Using JavaScript

How To Make RGB Color Generator Using JavaScript

In this article, I have shown you how to create RGB Color Generator using JavaScript. Earlier I shared with you how to make different types of random color generators, background-color generators, etc. In this tutorial, I have shown you how to create JavaScript RGB Color Generator. RGB is a color format. RGB (Red, Green, and Blue) is one of the colors we can use to express different formats.

In this project, you can create different colors by combining Red, Green, and Blue colors of your choice. A lot of times we can’t find the color we want to use for different projects. In that case, this kind of project will help you completely.



The three colors used here are red, green, and blue respectively. You can create any color you like by combining these colors.

RGB Color Generator Using JavaScript

Below is a demo that will help you to know how this RGB Color Generator works. Here you will find the required source code and live demo. 

If you want, you can copy the source code and use it in your own work. However, for the source code, you can take the help of the download button below the article.

See the Pen
JavaScript RGB Color Generator by Raj Template (@RajTemplate)
on CodePen.

Hope you like the demo above. As you can see above, I used blue as the background color for the first web page. Then I made a small box. All information will be added to this box and its height will depend on the amount of content. First created a display in which the colors can be seen. Then I made three range slides. 

I used HTML’s input function to create the slides. Three range riders have been used for the colors Red, Green, and Blue respectively. Below all is a small box in which the color code can be seen. You can copy that code and use it in your work.

How to Create JavaScript RGB Color Generator

RGB Color Generator is built with HTML CSS and JavaScript. First I designed the basics using HTML CSS. Then I implemented it using JavaScript. To make this RGB color generator you must have some basic idea about HTML CSS JavaScript. 

If you only want the source code, you can use the download button at the bottom of the article. However, I request you to follow the tutorial below. This will allow you to know step by step how I made this.

Step 1: Basic structure of the generator

The basic structure of this project has been created using the following HTML and CSS codes. As I said before, a small box has been created at the top of the web page. I used the following HTML and CSS code to make this box. 

First I used the background color blue of the web page using CSS code. The background color of the box is white and the width: 380px. The height of the box will depend on the amount of content and the box-shadow has been used to enhance the beauty.

<div class=”container”>
</div>
body{
    background-color: #84c4e1;
}
.container{
    background-color: #ffffff;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    width: 380px;
    padding: 20px 0;
    box-shadow: 20px 20px 30px rgba(0,0,0,0.2);
    font-family: ‘Work Sans’,sans-serif;
    font-size: 20px;
    font-weight: 500;
    color: #142b37;
    border-radius: 5px;
    display: grid;
    justify-items: center;
}
Basic structure of the generator



Step 2: Color viewing display

Now is the time to create a display in which the colors can be seen. Under normal circumstances, I have used black as the background color of this display. I have used the height of this display: 200px. If you want to change its height, you can change it from here.

<div id=”outputs”></div>
#outputs{
  height: 200px;
  width: 92%;
  background-color: #000000;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
Color viewing display

Step 3: Range slider to select color

Now three range sliders have been created using HTML input. The colors of those sliders will combine to form an RGB color. Here are the minimum and maximum values of each range slider.

<div class=”wrapper”>
   R<input type=”range” min=”0″ max=”255″ value=”0″ id=”red” oninput=”colors()”>
</div>
<div class=”wrapper”>
   G<input type=”range” min=”0″ max=”255″ value=”0″ id=”green” oninput=”colors()”>
</div>
<div class=”wrapper”>
   B<input type=”range” min=”0″ max=”255″ value=”0″ id=”blue” oninput=”colors()”>
</div>
.wrapper{
    width: 100%;
    text-align: center;
}
input[type=”range”]{
    display: inline-block;
    width: 80%;
    margin-left: 10px;
    margin-top: 25px;
}
Range slider to select color

Step 4: RGB color code view box

Now I have created a box that will be at the very bottom of this project. The color codes can be found in this box. Those codes will be used to use RGB code.

 <span id=”output”>rgb(0, 0, 0)</span>
span{
    display: inline-block;
    text-align: center;
    margin: 20px 0;
    background-color: #481fae;
    color: #ffffff;
    padding: 10px 30px;
    box-shadow: 0 0 20px rgba(0,139,253,0.25);
    font-size: 18px;
    letter-spacing: 0.5px;
    border-radius: 2px;
}
RGB color code view box

Step 5: Activate RGB Color Generator using JavaScript

Above we have designed this RGB Generator. Now it needs to be implemented using JavaScript. The above codes were very simple, I hope you understand. Below I have used a little JavaScript. 

I have given the necessary explanations of those JavaScript so that you do not have difficulty understanding them. If you have difficulty understanding, you can definitely comment.

//Set a constant of the display id
let outputs = document.getElementById(“outputs”);
 function colors(){
//The values of the three range sliders are set to the constant of the id
    var red= document.getElementById(“red”).value;
    var green = document.getElementById(“green”).value;
    var blue = document.getElementById(“blue”).value;
//It has been decided which color can be seen in the display.
//Here the colors of the three range sliders are added together
    outputs.style.backgroundColor =
       ‘rgb(‘ + red + ‘,’ + green + ‘,’ + blue + ‘)’;
//Arrangements have now been made to display the color code.
//Here “innerHTML” is used which helps to look within any element webpage.
     document.getElementById(“output”).innerHTML =  ‘rgb(‘ + red + ‘,’ + green + ‘,’ + blue + ‘)’ ;
 }
RGB Color Generator using JavaScript

Hopefully the above code and tutorial have helped you to know how this RGB Color Generator was created using HTML CSS and JavaScript. 

Earlier I created different types of color generator projects like background-color color generator, random color generator, etc. Be sure to comment on how you like this javascript RGB Color Generator.