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, the total number of available colors is 256 x 256 x 256, or 16,777,216 possible colors.
Approach:
- Create an input type range slider for each color.
- Set the min and max value of the slider as 0 and 255 respectively.
- Get the value of each color and store it in the three variables.
- Use rgb() function to generate the color by giving value of three colors as parameters.
index.html
<!DOCTYPE html> <html> Â Â <head> Â Â Â Â <meta charset="utf-8"> Â Â Â Â <title>RGB Colour Generator</title> Â Â Â Â Â Â <link rel="stylesheet" type="text/css"Â Â Â Â Â Â Â Â Â href="style.css"> </head> Â Â <body> Â Â Â Â <h1>RGB Colour Generator</h1> Â Â Â Â Â Â Â Â Â Â <div class="main"> Â Â Â Â Â Â Â Â Result:<input type="text" id="box"Â Â Â Â Â Â Â Â Â Â Â Â value="rgb(255,255,255)"> Â Â Â Â Â Â Â Â Â Â <!--Â Range slider for red colour -->Â Â Â Â Â Â Â Â Red:<input type="range" id="red"Â Â Â Â Â Â Â Â Â Â Â Â Â value="255" min="0" max="255"> Â Â Â Â Â Â Â Â Â Â <!-- Range slider for green colour -->Â Â Â Â Â Â Â Â Green:<input type="range" id="green"Â Â Â Â Â Â Â Â Â Â Â Â Â value="255" min="0" max="255"> Â Â Â Â Â Â Â Â Â Â <!-- Range slider for blue colour -->Â Â Â Â Â Â Â Â Blue:<input type="range" id="blue"Â Â Â Â Â Â Â Â Â Â Â Â Â value="255" min="0" max="255"> Â Â Â Â </div> Â Â Â Â Â Â <script src="script.js"></script> </body> Â Â </html> |
style.css
body { Â Â Â Â margin: 0; Â Â Â Â padding: 0; Â Â Â Â display: grid; Â Â Â Â place-items: center; Â Â Â Â height: 100vh; } Â Â .main { Â Â Â Â height: 400px; Â Â Â Â width: 250px; Â Â Â Â background: #333; Â Â Â Â border-radius: 10px; Â Â Â Â display: grid; Â Â Â Â place-items: center; Â Â Â Â color: #fff; Â Â Â Â font-family: verdana; } Â Â #box { Â Â Â Â height: 40px; Â Â Â Â width: 80%; Â Â Â Â border: none; Â Â Â Â outline: none; Â Â Â Â outline: none; Â Â Â Â border-radius: 50px; Â Â Â Â text-align: center; } Â Â Â Â /* CSS property for slider */input[type="range"] { Â Â Â Â -webkit-appearance: none; Â Â Â Â height: 10px; Â Â Â Â width: 80%; Â Â Â Â border-radius: 50px; Â Â Â Â outline: none; } Â Â /* CSS property for slider thumb */input[type="range"]::-webkit-slider-thumb { Â Â Â Â -webkit-appearance: none; Â Â Â Â height: 25px; Â Â Â Â width: 25px; Â Â Â Â background: #fff; Â Â Â Â border-radius: 50%; Â Â Â Â cursor: pointer; } Â Â .main #red { Â Â Â Â background: linear-gradient(90deg, #000, red); } Â Â .main #green { Â Â Â Â background: linear-gradient(90deg, #000, green); } Â Â .main #blue { Â Â Â Â background: linear-gradient(90deg, #000, blue); } |
script.js
function myColour() {       // Get the value of red color     var red = document.getElementById('red').value;       // Get the value of green color     var green = document.getElementById('green').value;       // Get the value of blue color     var blue = document.getElementById('blue').value;       // rgb() function is used to create the color     // from red, green and blue values     var colour = 'rgb(' + red + ',' + green + ',' + blue + ')';       // Change background colour with the     // color obtained by rgb function     document.body.style.backgroundColor = colour;       // Set the obtained rgb() colour code in the     // input text field having id=box      document.getElementById('box').value = colour;   }   // On changing red range slider myColour() // function is called  document.getElementById('red')     .addEventListener('input', myColour);   // On changing green range slider myColour() // function is called document.getElementById('green')     .addEventListener('input', myColour);   // On changing blue range slider myColour() // function is called document.getElementById('blue')     .addEventListener('input', myColour); |
Output:
