How To Create Random HEX Color Generator

 

How To Create Random HEX Color Generator

W

elcome to SoiPro. In this post, we will learn how to create a Random HEX Color Generator Tool for personal and commercial use. Just follow our steps carefully to avoid any errors. But first, Let’s talk about it a little.

What Is Random HEX Color Generator

The HEX color generator is a tool that can help you generate random colors for your projects. It offers a wide range of colors, and the interface is easy to use. All you have to do is press the new color button, and it will generate a random, HEX color for you!

The HEX color generator should be useful for graphic designers, web developers, app makers, and anyone who needs a quick way to generate a random color. Keep reading to create a javascript random hex color generator in Blogger or WordPress.

A Random HEX Color Generator, What Does It Do?

If you’re new to HTML5, you may have missed the big trend, HEX colors. Yes, hex colors are slowly becoming the new norm for web design, being used on projects by the big guys such as Adobe and Google, and becoming more popular by the day.

With that said, a random HEX color generator is a tool that can help you generate web colors. You can use it to quickly and easily create new colors for your next project.

However, what do hex colors mean? Hex colors are a way of naming a color. Imagine this, a site with red in it, and you’re unsure what color it is. You could pick blue as your favorite color, but you’ll still be stuck with a red if you’re looking at it in the browser.

What Is A HEX Color?

HEX colors are a common way to represent colors in the computer. The HEX code for a color can be divided into three parts, each representing a certain range of values.

Red, Green, and Blue (RGB) are the three colors that result in a HEX color. For example, a HEX color of #FFFFFF is all white, made up of red, green, and blue. And this task random HEX color generator performs very well.

HEX colors are a much more precise way to specify colors because they can be broken down into individual parts. In addition to the number value as the first character, the next two characters represent Red, Green, and Blue values. For example, #BF0040 is a HEX color with red as 128, green as 0, and blue as 64.

How Does Random HEX Color Generator Work?

In case you don’t know what a random HEX color generator does, let me explain. A color generator generates colors at random from a set of predefined colors. It uses a collection of RGB colors as input and outputs a random HEX color. The main benefits of a color generator over random colors are easier creation, better aesthetic, ease of use, and the ability to add accent colors.

How To Use The Random HEX Color Generator?

To use the HEX color generator, press the “new color” button, and it will generate HEX colors for you. You can generate up to unlimited colors simultaneously, and the colors will refresh every time you press the new color button.

How To Make Random HEX Color Generator?

To make Random HEX Color Generator, you need some codes for it. These codes have to be added in a few steps. We will add HTML code in the 1st step, CSS in the 2nd step, and javascript in the last step.

View Demo

Step 1 - Adding HTML

<div align="center">
<div class="RHCG">
  <h3 id="colour" class="clr-ch">#e63c44</h3>
  <button id="change">New Colour</button>
  <a href="https://www.soipro.com/" rel="dofollow" target="_blank">SoiPro (dot) com</a>
</div>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

Step 2 - Adding CSS

These CSS Codes for random hex color are in Compressed format. If you want to beautify, you can use our tool by Following this Link – CSS Beautifier Tool.

<style type="text/css">
html{height:100%;}body{background:#e63c44;width:100%;height:100%;position:relative;-webkit-font-smoothing:antialiased;color:#fff;font-family:"noto sans",sans-serif;text-align:center;display:flex;align-items:center;justify-content:center;}.RHCG h3{font-size:37px;font-weight:bold;text-transform:uppercase;margin-bottom:20px;}.RHCG button#change{position:relative;display:block;margin:0 auto;width:140px;height:40px;border-radius:10px;background:#fff;color:#e63c44;border:none;font-weight:bold;font-size:12px;cursor:pointer;outline:none;text-transform:capitalize;}.RHCG a{color:#fff;display:block;position:relative;font-size:10px;text-decoration:none;font-weight:bold;top:40px;}body,button#change{transition:all 0.4s ease-in-out;}.clr-ch{padding-bottom:0;}
</style>

Step 3 - Adding (Generate Random Hex Color JavaScript)

<script type="text/javascript">
  var btn = document.getElementById('change');
var text = document.getElementById('colour');
var generator = function() {
  newColour = '#'+(Math.random()*0xFFFFFF<<0).toString(16);
  console.log(newColour.length);
  if(newColour.length < 7) {
    generator();
  }
}
btn.addEventListener('click', function() {
    generator();
    
    document.body.style.background = newColour;
    btn.style.color = newColour;
    text.innerText = newColour;
});
</script>

Conclusion

Hopefully, I’ve given you a code to create a Random HEX Color Generator. I hope you like it. Would you please share your thoughts below on which topic you think I should cover next?