Simple RGB Color Generator Using JavaScript & CSS

RGB Color Generator Using JavaScript

In this article, you will learn how to create RGB Color Generator using JavaScript. Earlier I shared with you the project of different types of JavaScript color generators. Some projects create background colors, some gradient colors, and some generate random colors. 

Using this simple RGB Color Generator you can manually generate RGB color. It is much more modern and professional than other color generators. Here you can mix different colors together and create gradients. 

This JavaScript RGB Color Generator project has various control buttons. With the help of which you can create gradients by adding colors in different ways. 

JavaScript RGB Color Generator

Many times I use different applications or websites to create my gradient color. In that case, such a project will help you. You can get the required code of the color you have created from here. Which you can copy directly and use as CSS code.

Below I have given a demo that will help you to know how this project (RGB Color Generator Using JavaScript) works. Here you will find the required source code which you can copy directly.

See the Pen Untitled by Foolish Developer (@foolishdevweb) on CodePen.


As you can see above, this is a color generator project that I created with HTML CSS, and JavaScript.

First created a box on the webpage. I used shadows to highlight the box. First of all, we have made a small display where the CSS codes can be seen. That means the color code can be found here. You can copy these codes and use them in your work.

Then there is a large display in which the colors can be seen. This means that the colors that you select can be found here. At the bottom of this display is a small area where there is a variety of information to control. From there you can select different colors and angles.

How to Make RGB Color Generator Using JavaScript

Now is the time to create JavaScript RGB Color Generator. It is very easy to make. If you have a basic idea about HTML, CSS, and JavaScript then you can easily create it. Here I have shared the necessary information and tutorials.

HTML, CSS, and JavaScript have been used to build it. The color picker element of HTML has been used to capture the color. 

Step 1: Basic structure of Color Generator

First of all, I did the basic design of the color generator project, that is, I created a box on the webpage. For which the following HTML and CSS codes have been used.

<div class="random-color">

</div>

I designed the web page using the following codes.

html {
  height: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-repeat:no-repeat;
}

body {
  color: #035aab;
  text-align: center;
}

I have added the required CSS code for this box using the following CSS codes. This box has width: 480px and height: 400px. Box-shadow, margins, and padding have been used to enhance the beauty.

.random-color{
  width: 480px;
  box-shadow: 0 0 20px rgba(0,139,253,0.25);
  margin: 50px auto;
  padding: 20px;
  height: 400px;
}
Basic structure of Color Generator

Step 2: Color code viewing display

Now is the time to create a display in which the color codes can be seen. You can use these codes directly in your work. This color code depends on the height and size of the box padding. Box-shadow is used here for highlighting.

<div class="codess"></div>

.codess{
  padding: 5px;
  margin-top: 10px;
  margin-bottom: 30px;
  font-family: sans-serif;
  letter-spacing: 1px;
  box-shadow: 0 0 20px rgba(0,139,253,0.25);
}
Color code viewing display

Step 3: Create an RGB Color viewing display

Now a display has been created in which the colors can be seen. When you select a color, with the help of color input, those colors can be seen in this display. 

The display's width: 480px, height: 300px and two pixels white border has been used to enhance the beauty. Here a background color is selected by default.

<div class="display" id="gradient"></div>

.display{
  width: 480px;
  height: 300px;
  border: 2px solid white;
  box-shadow: 0 0 20px rgba(1,1,1,0.35);
  background: linear-gradient(to right, #FFAAAA, #734C8F)
}
Create an RGB Color viewing display

Step 4: Control area for creating color

Now I have added different information to control. First I created two caller inputs where you can select the color of your choice.

We all know that we get a lot of input from HTML. Color is one of them. Then select box has been created here. In other words, you can select which angle these two colors will be connected to each other.

<div class="control">
   <input type="color" class="color1" name="color1" value="#FFAAAA">
   <input type="color" class="color2" name="color2" value="#734C8F">

  <select name="toDirection">
    <option value="to right">to right</option>
    <option value="to right bottom">to right bottom</option>
    <option value="to right top">to right top</option>
    <option value="to left">to left</option>
    <option value="to left bottom">to left bottom</option>
    <option value="to left top">to left top</option>
    <option value="to bottom">to bottom</option>
    <option value="to top">to top</option>
  </select>

</div>

The following codes have been used to design the control areas. Its width: 250px and it is in float condition on the color display.

.control{
  background-color: white;
  width: 250px;
  float: right;
  margin-top: -70px;
}

The following codes have been used to design the two color boxes and the selector space. Color box width: 50px, height: 40px and Sylhet box width: 90px, height: 35px.

.color1,.color2{
  width: 50px;
  height: 40px;
  float: left;
  margin: 10px;
  margin-top: 15px;
}

select{
 float: right;
 margin-top: 20px;
 width: 90px;
 height: 35px;
}
Control area for creating color
RGB Color Generator with JavaScript

Step 5: Activate RGB Color Generator with JavaScript

Above we have done all kinds of designs. Now is the time to implement a Simple RGB Color Generator with the help of JavaScript. Here I have given the step-by-step JavaScript and the explanation required for each line.

First I set the constants of some HTML elements. Because we can't directly use any HTML element in JavaScript. For that, a global constant has to be determined.

//Some classes and html functions need to determine a constant
var css = document.querySelector(".codess") // color code
var color1 = document.querySelector(".color1") // 1st color
var color2 = document.querySelector(".color2") // 2nd color
var bodys = document.getElementById("gradient") // color display
var linearDirection = document.getElementsByName("toDirection")[0]  //Select box

Using the following JavaScript I have arranged to display it in the color code box. Here we have stored all the calculations in a constant called "CSSprop". Then I have arranged to display the information in the display using "textContent".


//displays default CSS RGBA values for linear-gradient

function currentSettings() {
    var CSSprop = window.getComputedStyle(bodys,null).getPropertyValue("background-image")
   // console.log(CSSprop)
    css.textContent = CSSprop
}

currentSettings()

I have given two types of instructions using the following codes.

    ➤ This will determine how the color codes appear in the code box.

    ➤ According to the color code, the colors can be seen in the display.

Here we have basically given the format of linear-gradient with which the value of the degree, color 1, color 2 will be added.


//You have to make arrangements to see the color code in the display

 function returnColor(){

  bodys.style.background =
    "linear-gradient("
    + linearDirection.value
    + ", "
    + color1.value
    + ","
    + color2.value
    + ")";

    currentSettings()

}

We have added the values ​​of the input to "returnColor" using the following three-line code. The "addEventListener" has been used to add this.


document.querySelector('select[name="toDirection"]').onchange=returnColor;
color1.addEventListener("input", returnColor)
color2.addEventListener("input", returnColor)

Activate RGB Color Generator with JavaScript

Hopefully from the above tutorial, you have learned how to create a Simple RGB Color Generator using JavaScript.






Comments

Post a Comment

Tell me what you think ??😎

Popular posts from this blog

Simple Day Night Toggle Button Using HTML and CSS

Image
Day-Night Toggle Button is a common web element that is often found on websites. This Day Night Toggle Switch in the navigation bar helps to choose the dark and light theme of the website. Currently, the Day And Night Toggle Switch can be seen on almost all major websites starting from Facebook and Instagram. Demo Download This article will help you to know step by step how to create Day Night Toggle Button using CSS . This type of CSS Toggle Button is used to create HTML checkboxes . Here's how to easily create a Toggle Switch using the checkboxes. CSS Day Night Toggle Button Although there are many such tutorials on the Internet. But here I will tell you how to make Day Night Toggle Button and how to implement it in your project. A check box was first created using HTML input to create this button. Then that checkbox is shaped like a button by CSS. To make CSS Day Night Toggle Switch you must have some idea about HTML and CSS. This is not the first time I ha
Read more

Splash Image Mask Using HTML and CSS (Free Code)

Image
Here you will learn how to create Splash Image Mask using HTML CSS . The CSS mask image is a kind of simple design where there will be a background color on the image.  Some parts of that background will be transparent. As a result, we get to see some of the images in the background. You can use this CSS Splash Image Mask in any background image.  Here I used HTML in Aklin which added image. Then I designed it with CSS. You can use this CSS mask background image in the background of any project. Below is a preview that will help you to know how this Splash Image Mask CSS was created. See the Pen Splash Image Mask using Html CSS by Shantanu Jana ( @shantanu-jana ) on CodePen . Here HTML and CSS are used to create this CSS mask-image property . For this, you create an HTML and CSS file.  Copy all the code given below and add it to your file. Or use the download button at the bottom of the article to download the code for this Splash Image Mask . HTML Code: The following
Read more