Random Color Generator in JavaScript

Random color generator in JavaScript, CSS, and HTML

Colors have a significant impact on our emotions and overall aesthetic experience. Whether you are a web designer, artist, or simply someone who appreciates the beauty of colors, a random color generator in javascript can be a great tool. It is an easy and helpful tool if you are learning web development.

Hey Guys! In this blog post, I will teach you how you can make this color generator tool. This is beginner friendly. If you are a beginner, it is an excellent project for you. With its responsive layout, we will add some advanced features to it.

About the tool

This is a color generator made using HTML, CSS, and JavaScript. Unlike other tools, it generates custom colors threw HSLA (Hue, Saturation, Lightness, Alpha) format. And convert it into different colors format such as hex, RGB, etc. It is a 100% client-side and real-time data fetching tool. With it, you can create accurate colors for you. It is compatible and responsive. You can use it on every device.

Understanding HSLA color

It is an advanced type of color format. With this, you can create more accurate, UI-based, high-quality colors. This tool has four inputs to generate a color. These inputs are the values of the HSLA color format like hsl(H,S,L) or hsla(H,S,L,A). These functional values are hsla(Hue, Saturation, Lightness, Alpha). Let's understand them:

Hue:- It is represented as the angle of the color circle like the rainbow represents the circle. Every angle from 0 to 360 deg has different colors.
Saturation:- It represents a percentage of saturation and shades of gray.
Lightness:- is the blend of white and black colors in the Hue value. 50% is standard, greater than 50% is a blend of white, and less than 50% is a blend of black color.
Alpha:- Alpha is an optional value. It represents the transparency of color from 0 to 1.

It is enough to understand it. Let's make it.

Creating Random Color Generator

Create an HTML, CSS, and javascript file and connect them. Now, let's divide it into simpler parts.

HTML Structure

To begin, set up the HTML structure that will contain the elements needed for the color generator:

<!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">

    <title>Color Generator</title>

    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <div class="container">
      <h2>Color Generator</h2>
      <div class="generator_div">
        <div id="color_display_screen_div">
          <div id="color_display_screen"></div>


          <div class="code_display_div">
            <div class="code_display">
              <label for="hsl_code">hsla:</label>
              <div class="inputdiv">
                <input type="text" id="hsl_code" value="hsla(133,50%,50%,1)" readonly>
                <svg class="svg-icon"
                  style="width: 1.8em; height: 1.8em;vertical-align: middle;fill: currentColor;overflow: hidden;"
                  viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
                  <path
                    d="M838.4 68.266667h-512c-46.933333 0-85.333333 36.266667-85.333333 81.066666v38.4H185.6c-46.933333 0-85.333333 38.4-85.333333 85.333334v597.333333c0 46.933333 38.4 85.333333 85.333333 85.333333h512c46.933333 0 85.333333-38.4 85.333333-85.333333v-36.266667h55.466667c46.933333 0 85.333333-38.4 85.333333-85.333333v-597.333333c0-44.8-38.4-83.2-85.333333-83.2z m-98.133333 802.133333c0 23.466667-19.2 42.666667-42.666667 42.666667h-512c-23.466667 0-42.666667-19.2-42.666667-42.666667v-597.333333c0-23.466667 19.2-42.666667 42.666667-42.666667h512c23.466667 0 42.666667 19.2 42.666667 42.666667v597.333333z m140.8-119.466667c0 23.466667-19.2 42.666667-42.666667 42.666667h-55.466667V273.066667c0-46.933333-38.4-85.333333-85.333333-85.333334H283.733333V149.333333c0-21.333333 19.2-38.4 42.666667-38.4h512c23.466667 0 42.666667 19.2 42.666667 42.666667v597.333333z m-450.133334-83.2h-204.8c-12.8 0-21.333333 8.533333-21.333333 21.333334s8.533333 21.333333 21.333333 21.333333h204.8c12.8 0 21.333333-8.533333 21.333334-21.333333s-10.666667-21.333333-21.333334-21.333334z m98.133334-10.666666c-17.066667 0-32 14.933333-32 32s14.933333 32 32 32 32-14.933333 32-32-12.8-32-32-32z m128-234.666667H224c-12.8 0-21.333333 8.533333-21.333333 21.333333s8.533333 21.333333 21.333333 21.333334h433.066667c12.8 0 21.333333-8.533333 21.333333-21.333334s-8.533333-21.333333-21.333333-21.333333z" />
                </svg>

              </div>

            </div>
            <div class="code_display">
              <label for="rgb_code">rgba:</label>
              <div class="inputdiv">
                <input type="text" id="rgb_code" value="rgba(133,180,22,1)" readonly>
                <svg class="svg-icon"
                  style="width: 1.8em; height: 1.8em;vertical-align: middle;fill: currentColor;overflow: hidden;"
                  viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
                  <path
                    d="M838.4 68.266667h-512c-46.933333 0-85.333333 36.266667-85.333333 81.066666v38.4H185.6c-46.933333 0-85.333333 38.4-85.333333 85.333334v597.333333c0 46.933333 38.4 85.333333 85.333333 85.333333h512c46.933333 0 85.333333-38.4 85.333333-85.333333v-36.266667h55.466667c46.933333 0 85.333333-38.4 85.333333-85.333333v-597.333333c0-44.8-38.4-83.2-85.333333-83.2z m-98.133333 802.133333c0 23.466667-19.2 42.666667-42.666667 42.666667h-512c-23.466667 0-42.666667-19.2-42.666667-42.666667v-597.333333c0-23.466667 19.2-42.666667 42.666667-42.666667h512c23.466667 0 42.666667 19.2 42.666667 42.666667v597.333333z m140.8-119.466667c0 23.466667-19.2 42.666667-42.666667 42.666667h-55.466667V273.066667c0-46.933333-38.4-85.333333-85.333333-85.333334H283.733333V149.333333c0-21.333333 19.2-38.4 42.666667-38.4h512c23.466667 0 42.666667 19.2 42.666667 42.666667v597.333333z m-450.133334-83.2h-204.8c-12.8 0-21.333333 8.533333-21.333333 21.333334s8.533333 21.333333 21.333333 21.333333h204.8c12.8 0 21.333333-8.533333 21.333334-21.333333s-10.666667-21.333333-21.333334-21.333334z m98.133334-10.666666c-17.066667 0-32 14.933333-32 32s14.933333 32 32 32 32-14.933333 32-32-12.8-32-32-32z m128-234.666667H224c-12.8 0-21.333333 8.533333-21.333333 21.333333s8.533333 21.333333 21.333333 21.333334h433.066667c12.8 0 21.333333-8.533333 21.333333-21.333334s-8.533333-21.333333-21.333333-21.333333z" />
                </svg>
              </div>

            </div>
            <div class="code_display">
              <label for="rgb_code">hexa:</label>
              <div class="inputdiv">
                <input type="text" id="hex_code" value="#40bf5bff" readonly>
                <svg class="svg-icon"
                  style="width: 1.8em; height: 1.8em;vertical-align: middle;fill: currentColor;overflow: hidden;"
                  viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
                  <path
                    d="M838.4 68.266667h-512c-46.933333 0-85.333333 36.266667-85.333333 81.066666v38.4H185.6c-46.933333 0-85.333333 38.4-85.333333 85.333334v597.333333c0 46.933333 38.4 85.333333 85.333333 85.333333h512c46.933333 0 85.333333-38.4 85.333333-85.333333v-36.266667h55.466667c46.933333 0 85.333333-38.4 85.333333-85.333333v-597.333333c0-44.8-38.4-83.2-85.333333-83.2z m-98.133333 802.133333c0 23.466667-19.2 42.666667-42.666667 42.666667h-512c-23.466667 0-42.666667-19.2-42.666667-42.666667v-597.333333c0-23.466667 19.2-42.666667 42.666667-42.666667h512c23.466667 0 42.666667 19.2 42.666667 42.666667v597.333333z m140.8-119.466667c0 23.466667-19.2 42.666667-42.666667 42.666667h-55.466667V273.066667c0-46.933333-38.4-85.333333-85.333333-85.333334H283.733333V149.333333c0-21.333333 19.2-38.4 42.666667-38.4h512c23.466667 0 42.666667 19.2 42.666667 42.666667v597.333333z m-450.133334-83.2h-204.8c-12.8 0-21.333333 8.533333-21.333333 21.333334s8.533333 21.333333 21.333333 21.333333h204.8c12.8 0 21.333333-8.533333 21.333334-21.333333s-10.666667-21.333333-21.333334-21.333334z m98.133334-10.666666c-17.066667 0-32 14.933333-32 32s14.933333 32 32 32 32-14.933333 32-32-12.8-32-32-32z m128-234.666667H224c-12.8 0-21.333333 8.533333-21.333333 21.333333s8.533333 21.333333 21.333333 21.333334h433.066667c12.8 0 21.333333-8.533333 21.333333-21.333334s-8.533333-21.333333-21.333333-21.333333z" />
                </svg>
              </div>

            </div>


          </div>
        </div>



        <div class="slider_div_box">
          <div class="range_div">
            <span class="color_components">Hue:</span>
            <span id="hue_value_div" class="slider_value">231</span>
            <div class="range_box">
              <div class="left_value">0</div>
              <div class="slider_div">
                <input type="range" id="hue_slider" class="slider" min="0" max="100" step="1" value="64">

                <div id="hue_progressBar" class="prograssBar"></div>

              </div>
              <div class="right_value">360</div>

            </div>
          </div>


          <div class="range_div">
            <span class="color_components">Saturation:</span>
            <span id="saturation_value_div" class="slider_value">50%</span>
            <div class="range_box">
              <div class="left_value">0</div>
              <div class="slider_div">
                <input type="range" id="saturation_slider" class="slider" min="0" max="100" step="1" value="100">

                <div id="saturation_progressBar" class="prograssBar"></div>

              </div>
              <div class="right_value">100</div>

            </div>
          </div>


          <div class="range_div">
            <span class="color_components">Lightness:</span>
            <span id="lightness_value_div" class="slider_value">50%</span>
            <div class="range_box">
              <div class="left_value">0</div>
              <div class="slider_div">
                <input type="range" id="lightness_slider" class="slider" min="0" max="100" step="1" value="62">

                <div id="lightness_progressBar" class="prograssBar"></div>

              </div>
              <div class="right_value">100</div>

            </div>
          </div>


          <div class="range_div">
            <span class="color_components">Alpha:</span>
            <span id="alpha_value_div" class="slider_value">100%</span>
            <div class="range_box">
              <div class="left_value">0</div>
              <div class="slider_div">
                <input type="range" id="alpha_slider" class="slider" min="0" max="100" step="1" value="100">

                <div id="alpha_progressBar" class="prograssBar"></div>

              </div>
              <div class="right_value">100</div>

            </div>
          </div>


        </div>
      </div>
    </div>
    <!-- Project -->
    <script src="main.js"></script>
  </body>

</html>

CSS Styling:

Next, let's style the elements to create an appealing visual experience. You can add your own design if you want. Or you can copy the given CSS styling properties.

:root {
  --themeColor1: hsl(230, 100%, 10%);
  --themeColor2: hsl(240, 100%, 99%);
  --themeColor3: hsl(230, 100%, 62%);
  --themeColor4: hsla(0, 0%, 100%, 0.1);
  --themeColor5: hsla(214, 78%, 7%, 0.1);
  --inner_div_width: 100%;
  --inner_div_radius: 5px;
  --slider_height: 0.3em;
}


body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
  font-family: monospace;
  background: var(--themeColor2);
  color: var(--themeColor1);
}

.container {
  width: 100%;
  height: 100%;
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  box-sizing: border-box;

}

.container h2 {
  color: var(--themeColor1);
}

.container .generator_div {
  width: 95%;
  padding: 1em;
  margin-bottom: 1em;
  border-radius: var(--inner_div_radius);
  box-sizing: border-box;
  background: var(--themeColor4);
  box-shadow: 0 0px 20px hsla(214, 79%, 7%, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.container .generator_div #color_display_screen_div {
  width: var(--inner_div_width);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.container .generator_div #color_display_screen_div #color_display_screen {
  width: 100%;
  height: 10em;
  border-radius: var(--inner_div_radius);
  box-sizing: border-box;
  background-color: var(--themeColor3);
}

/* Code display div styling starts */
.container .generator_div .code_display_div {
  width: var(--inner_div_width);
  border-radius: var(--inner_div_radius);
  margin: 1em 0;
  padding: 0.5em 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: var(--themeColor4);
  border: 1px solid hsla(214, 79%, 7%, 0.2);
}

.container .generator_div .code_display_div .code_display {
  width: 95%;
  margin: 0.5em 0;
}

.container .generator_div .code_display_div .code_display label {
  font-size: 1.2em;
  margin: 0 0 0 1%;
}

.container .generator_div .code_display_div .code_display .inputdiv {
  /* border: 1px solid #41FF7A; */
  width: 98%;
  position: relative;
}

.container .generator_div .code_display_div .code_display .inputdiv input {
  width: 100%;
  height: 1.8em;
  font-size: 1.2em;
  padding-left: 2%;
  outline: none;
  border: none;
  border-radius: 3px;
  background: hsl(230, 100%, 62%, 0.05);
  color: var(--themeColor1);
  box-sizing: border-box;
}

.container .generator_div .code_display_div .code_display .inputdiv .svg-icon {
  position: absolute;
  top: 50%;
  right: 2%;
  transform: translateY(-50%);
  width: 1.8em;
  height: 1.8em;
  vertical-align: middle;
  fill: currentColor;
  overflow: hidden;
  cursor: pointer;
}

.copied {
  color: var(--themeColor3);
}

/* Code display div styling ends */


/* Slider div styling starts */
.container .generator_div .slider_div_box {
  width: var(--inner_div_width);
  border-radius: var(--inner_div_radius);
  background: var(--themeColor4);
    border: 1px solid hsla(214, 79%, 7%, 0.2);
}

.container .generator_div .slider_div_box .range_div {
  margin-top: 0.8em;
  padding-top: 0.5em;
  border-radius: var(--inner_div_radius);
  box-sizing: border-box;

}

.container .generator_div .slider_div_box .range_div .color_components {
  margin: 0 0 0 2%;
  font-size: 1.2em;

}

.container .generator_div .slider_div_box .range_div .slider_value {
  font-size: 1.2em;
}

.container .generator_div .slider_div_box .range_div .range_box {
  width: 96%;
  height: 3.8em;
  margin: 1% auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--themeColor4);
  border-radius: var(--inner_div_radius);
  /* background: hsl(230, 100%, 62%, 0.05); */

}

.container .generator_div .slider_div_box .range_div .range_box .left_value,
.container .generator_div .slider_div_box .range_div .range_box .right_value {
  font-size: 1.2em;
  margin: 0.2em;
  color: var(--themeColor3);
}

.container .generator_div .slider_div_box .range_div .range_box .slider_div {
  width: 95%;
  height: 100%;
  position: relative;
}

.container .generator_div .slider_div_box .range_div .range_box .slider_div .slider {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: var(--slider_height);
  margin: 0;
  padding: 0;
  border-radius: var(--inner_div_radius);
  background: var(--themeColor5);
}

.container .generator_div .slider_div_box .range_div .range_box .slider_div .slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  cursor: pointer;
  width: 1em;
  height: 1em;
  background: var(--themeColor3);
  border-radius: 50%;
  box-sizing: border-box;
}

.container .generator_div .slider_div_box .range_div .range_box .slider_div .prograssBar {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  background: var(--themeColor3);
  border-radius: var(--inner_div_radius);
  width: 50%;
  height: var(--slider_height);
}

/* Slider div styling ends */


/* Making it responsive */
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  .container .generator_div {
    width: 48rem;
  }

  .container .generator_div #color_display_screen_div {
    flex-direction: row;
    gap: 1em;
  }

  .container .generator_div #color_display_screen_div #color_display_screen {
    height: 13rem;
  }
}=

Projects you may like!

JavaScript Functionality

Finally, add the JavaScript code generates the colors and updates the color-display element. First, we call all the required HTML elements.

  //other elements
  let color_display_screen = document.getElementById('color_display_screen');
  let hsl_code = document.getElementById('hsl_code');
  let rgb_code = document.getElementById('rgb_code');
  let hex_code = document.getElementById('hex_code');


  //hue Elements starts
  let hue_slider = document.getElementById('hue_slider');
  let hue_progressBar = document.getElementById('hue_progressBar');
  let hue_value_div = document.getElementById('hue_value_div');
  //hue Elements ends


  //Saturation Elements starts
  let saturation_slider = document.getElementById('saturation_slider');
  let saturation_progressBar = document.getElementById('saturation_progressBar');
  let saturation_value_div = document.getElementById('saturation_value_div');
  //Saturation Elements ends


  //Lightness Elements starts
  let lightness_slider = document.getElementById('lightness_slider');
  let lightness_progressBar = document.getElementById('lightness_progressBar');
  let lightness_value_div = document.getElementById('lightness_value_div');
  //Lightness Elements ends


  //Alpha Elements starts
  let alpha_slider = document.getElementById('alpha_slider');
  let alpha_progressBar = document.getElementById('alpha_progressBar');
  let alpha_value_div = document.getElementById('alpha_value_div');
  //Alpha Elements ends

It's time to make a function setHSL() that takes input values from the range elements and generates HSL color values. And pass these values to others that update the color code dynamically. Later, it calls two javascript functions display_hsl_code() and hslaToRgba() . Then it passed hue, saturation, lightness, and alpha value to the functions.

  //Function to set HSL values
  function setHSL() {

    // Getting Hue value using slider
    const hue = Math.round(hue_slider.value * (360 / 100));
    const saturation = saturation_slider.value;
    const lightness = lightness_slider.value;
    const alpha = alpha_slider.value;

    hue_progressBar.style.width = `${hue_slider.value}%`;
    hue_value_div.textContent = `${hue}`;

    //Set Saturation values
    saturation_progressBar.style.width = `${saturation}%`;
    saturation_value_div.textContent = `${saturation}%`;

    //Set Lightness values
    lightness_progressBar.style.width = `${lightness}%`;
    lightness_value_div.textContent = `${lightness}%`;

    //Set Alpha values
    alpha_progressBar.style.width = `${alpha}%`;
    alpha_value_div.textContent = `${alpha}%`;


    display_hsl_code({ hue, saturation, lightness, alpha })
    hslaToRgba({ hue, saturation, lightness, alpha })

  }

Adding a function display_hsl_code() to display the HSL code. This function takes color code values as arguments and shows them on the web page.

  // Function to display hsla values
  function display_hsl_code({ hue, saturation, lightness, alpha }) {

    let alpha_value = alpha / 100
    // console.log(alpha);
    let hsla = `hsla(${hue},${saturation}%,${lightness}%, ${alpha_value})`

    hsl_code.value = hsla;

    color_display_screen.style.backgroundColor = hsla;
  }

Now, making a function hslaToRgba() to convert the HSL color format into RGB format. In the end, it calls other javascript functions to display RGB code and to convert it into hexadecimal color format.

 // Function that converts hsla values into rgba values
  function hslaToRgba({ hue, saturation, lightness, alpha }) {
    saturation /= 100;
    lightness /= 100;
    let c = (1 - Math.abs(2 * lightness - 1)) * saturation;
    hue = hue / 60;
    x = c * (1 - Math.abs(hue % 2 - 1));
    let r = g = b = 0;
    if (hue >= 0 && hue < 1) {
      r = c;
      g = x;
    } else if (hue >= 1 && hue < 2) {
      r = x;
      g = c;
    } else if (hue >= 2 && hue < 3) {
      g = c;
      b = x;
    } else if (hue >= 3 && hue < 4) {
      g = x;
      b = c;
    } else if (hue >= 4 && hue < 5) {
      r = x;
      b = c;
    } else {
      r = c;
      b = x;
    }
    let m = lightness - c / 2;
    r += m;
    g += m;
    b += m;
    r *= 255.0;
    g *= 255.0;
    b *= 255.0;
    let red = Math.round(r);
    let green = Math.round(g);
    let blue = Math.round(b);

    display_rgb_code({ red, green, blue, alpha })
    rgbaToHexa({ r: red, g: green, b: blue, a: alpha })

  }

Function display_rgb() takes the color value as an argument and displays it in the HTML document.

  // Function to display rgb values
  function display_rgb_code({ red, green, blue, alpha }) {
    let alpha_value = alpha / 100

    //console.log(r,g,b,a);
    let rgba = `rgba(${red}, ${green},${blue}, ${alpha_value})`
    rgb_code.value = rgba;
  }

Create a javascript function rgbaToHexa() to convert RGB code into hexadecimal color format. And function display_hex_code() to display hexadecimal color code

  //Function to convert RGBA values to Hexa values
  function rgbaToHexa({ r, g, b, a }) {

    let alpha_value = Math.round(a * 2.55);
    let red = parseInt(r).toString(16).padStart(2, 0);
    let green = parseInt(g).toString(16).padStart(2, 0);
    let blue = parseInt(b).toString(16).padStart(2, 0);
    let alpha = parseInt(alpha_value).toString(16).padStart(2, 0);

    display_hex_code({ red, green, blue, alpha })
  }


  // Function to display hexa values
  function display_hex_code({ red, green, blue, alpha }) {

    let hexa = `#${red}${green}${blue}${alpha}`;
    hex_code.value = hexa;

  }

We made all the code to generate a color. Now, we need to create copyCode() a function to copy the color code.

 // Function to copy code 
  function copyCode(e) {
    if (e.target.classList[0] == 'svg-icon') {
      e.target.parentElement.children[0].select();
      e.target.parentElement.children[0].setSelectionRange(0, 9999);
      navigator.clipboard.writeText(e.target.parentElement.children[0].value)
      e.target.classList.add('copied');
      setTimeout(() => {
        e.target.classList.remove('copied');
      }, 1000);
    }


  }

In the end, we call these functions at specific events.

 // calling functions at the event
  hue_slider.addEventListener('input', setHSL)
  saturation_slider.addEventListener('input', setHSL)
  lightness_slider.addEventListener('input', setHSL)
  alpha_slider.addEventListener('input', setHSL)
  document.addEventListener('click', copyCode);

  // Calling it once when page is reload
  setHSL();

Finally, we finished the whole javascript. Here is the complete code of the javascript file.

window.onload = function () {

  //other elements
  let color_display_screen = document.getElementById('color_display_screen');
  let hsl_code = document.getElementById('hsl_code');
  let rgb_code = document.getElementById('rgb_code');
  let hex_code = document.getElementById('hex_code');


  //hue Elements starts
  let hue_slider = document.getElementById('hue_slider');
  let hue_progressBar = document.getElementById('hue_progressBar');
  let hue_value_div = document.getElementById('hue_value_div');
  //hue Elements ends


  //Saturation Elements starts
  let saturation_slider = document.getElementById('saturation_slider');
  let saturation_progressBar = document.getElementById('saturation_progressBar');
  let saturation_value_div = document.getElementById('saturation_value_div');
  //Saturation Elements ends


  //Lightness Elements starts
  let lightness_slider = document.getElementById('lightness_slider');
  let lightness_progressBar = document.getElementById('lightness_progressBar');
  let lightness_value_div = document.getElementById('lightness_value_div');
  //Lightness Elements ends


  //Alpha Elements starts
  let alpha_slider = document.getElementById('alpha_slider');
  let alpha_progressBar = document.getElementById('alpha_progressBar');
  let alpha_value_div = document.getElementById('alpha_value_div');
  //Alpha Elements ends



  //Function to set HSL values
  function setHSL() {

    // Getting Hue value using slider
    const hue = Math.round(hue_slider.value * (360 / 100));
    const saturation = saturation_slider.value;
    const lightness = lightness_slider.value;
    const alpha = alpha_slider.value;

    hue_progressBar.style.width = `${hue_slider.value}%`;
    hue_value_div.textContent = `${hue}`;

    //Set Saturation values
    saturation_progressBar.style.width = `${saturation}%`;
    saturation_value_div.textContent = `${saturation}%`;

    //Set Lightness values
    lightness_progressBar.style.width = `${lightness}%`;
    lightness_value_div.textContent = `${lightness}%`;

    //Set Alpha values
    alpha_progressBar.style.width = `${alpha}%`;
    alpha_value_div.textContent = `${alpha}%`;


    display_hsl_code({ hue, saturation, lightness, alpha })
    hslaToRgba({ hue, saturation, lightness, alpha })


  }


  // Function to display hsla values
  function display_hsl_code({ hue, saturation, lightness, alpha }) {

    let alpha_value = alpha / 100
    // console.log(alpha);
    let hsla = `hsla(${hue},${saturation}%,${lightness}%, ${alpha_value})`

    hsl_code.value = hsla;

    color_display_screen.style.backgroundColor = hsla;
  }


  // Function that converts hsla values into rgba values
  function hslaToRgba({ hue, saturation, lightness, alpha }) {
    saturation /= 100;
    lightness /= 100;
    let c = (1 - Math.abs(2 * lightness - 1)) * saturation;
    hue = hue / 60;
    x = c * (1 - Math.abs(hue % 2 - 1));
    let r = g = b = 0;
    if (hue >= 0 && hue < 1) {
      r = c;
      g = x;
    } else if (hue >= 1 && hue < 2) {
      r = x;
      g = c;
    } else if (hue >= 2 && hue < 3) {
      g = c;
      b = x;
    } else if (hue >= 3 && hue < 4) {
      g = x;
      b = c;
    } else if (hue >= 4 && hue < 5) {
      r = x;
      b = c;
    } else {
      r = c;
      b = x;
    }
    let m = lightness - c / 2;
    r += m;
    g += m;
    b += m;
    r *= 255.0;
    g *= 255.0;
    b *= 255.0;
    let red = Math.round(r);
    let green = Math.round(g);
    let blue = Math.round(b);

    display_rgb_code({ red, green, blue, alpha })
    rgbaToHexa({ r: red, g: green, b: blue, a: alpha })

  }


  // Function to display rgb values
  function display_rgb_code({ red, green, blue, alpha }) {
    let alpha_value = alpha / 100

    //console.log(r,g,b,a);
    let rgba = `rgba(${red}, ${green},${blue}, ${alpha_value})`
    rgb_code.value = rgba;
  }

  

  //Function to convert RGBA values to Hexa values
  function rgbaToHexa({ r, g, b, a }) {

    let alpha_value = Math.round(a * 2.55);
    let red = parseInt(r).toString(16).padStart(2, 0);
    let green = parseInt(g).toString(16).padStart(2, 0);
    let blue = parseInt(b).toString(16).padStart(2, 0);
    let alpha = parseInt(alpha_value).toString(16).padStart(2, 0);

    display_hex_code({ red, green, blue, alpha })
  }



  // Function to display hexa values
  function display_hex_code({ red, green, blue, alpha }) {

    let hexa = `#${red}${green}${blue}${alpha}`;
    hex_code.value = hexa;

  }



  // Function to copy code 
  function copyCode(e) {
    if (e.target.classList[0] == 'svg-icon') {
      e.target.parentElement.children[0].select();
      e.target.parentElement.children[0].setSelectionRange(0, 9999);
      navigator.clipboard.writeText(e.target.parentElement.children[0].value)
      e.target.classList.add('copied');
      setTimeout(() => {
        e.target.classList.remove('copied');
      }, 1000);
    }


  }

  // calling functions at the event
  hue_slider.addEventListener('input', setHSL)
  saturation_slider.addEventListener('input', setHSL)
  lightness_slider.addEventListener('input', setHSL)
  alpha_slider.addEventListener('input', setHSL)
  document.addEventListener('click', copyCode);


  setHSL();

}

Conclusion

A random color generator is a versatile tool that can inspire creativity, helps you to discover new solar combinations, and enhance your design process. Whether you're a designer or simply someone who creates a web app. By creating this project, you can learn many things about web development.

Happy coding!

Code Armor

Random Color Generator in JavaScript

About the tool

Understanding HSLA color

Creating Random Color Generator

HTML Structure

CSS Styling:

JavaScript Functionality

Conclusion

About the Author

Post a Comment

Deploy vite app to GitHub pages for Free

Building React Todo App using chat GPT

Online HTML Encoder Decoder (100% Free)

Code Armor