Donation  Momo Buy me a coffee!

Amazing 50 Shades Of HEX Color Generator Tool In Blogger


Amazing 50 Shades Of HEX Color Generator Tool In Blogger


elcome to SoiPro. In this post, we will know how to make amazing 50 shades of HEX color generator tool in blogger, which instantly creates 50 shades of color scheme from your primary color. Just follow our steps carefully to avoid any errors. But first, Let’s talk about it a little.

In the past, finding colors for a web page or any design was a tedious process where you had to go to a color editor and manually pick from thousands of colors that were a bit harder to match with your primary color.

The 50 shades of hex color generator help streamline the process by giving you the ability to quickly browse through 50 shades of colors scheme from your given Hex code.

What Are 50 Shades Of HEX Color Generator Tool?

This tool has been designed to help you find the best HEX color scheme for your blog or any design. Whether you’re looking for something sophisticated and elegant or fun and vibrant,

We have 50 shades of HEX color generators to help you find the perfect color scheme for your design. All you need to do is enter your current blog colors, your main primary color, and let the color generator do the rest!

If you want to know more about What Is HEX Color? You can check our recent article on how to create a random hex color generator tool in blogger?.

Benefit Of Using 50 Shades Of HEX Color Generator

The hex color scheme generator tool gives you a list of hexadecimal colors. The benefit of using the 50 shades of HEX color generator tool is that you can scroll through the colors quickly and select the best scheme for your design.

This tool proves to be the best when you need a light color for your design Because it is a bit difficult to select the light color from the main primary color.

View Demo

How To Make 50 Shades Of HEX Color Generator Tool?

To make 50 shades of HEX color generator tool for your blogger site, you need to add HTML, CSS, and JavaScript codes for it. These codes have to be added in 3 steps. We will add HTML code in the 1st step, CSS in 2nd, and JavaScript in the last step.

Step 1 - Adding HTML (Color Tint Shade Generator)

Change The highlighted HTML according to your requirement, For Example:- Headline and TextBox Placeholder.

<h1 align="center">Color Shades Generator</h1>
<div class="container">
<input class="hex" placeholder="Enter hex color"/>
<div class="palette"></div>

Step 2 - Adding CSS Color Shades Generator

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

body{padding:30px;overflow-x:hidden;font-family:'noto sans',sans-serif;}.hex{padding:10px;font-size:1.5rem;outline:none;margin-bottom:0px;text-transform:uppercase;letter-spacing:0.05em;font-family:'noto sans',sans-serif;border:2px solid #d3d3d3;border-radius:1px;outline:none;color:#292929;}.hex::placeholder{color:#cecece;}.hex.error{border-color:#f00!important;color:#f00;}.hex:focus{border-color:#777;}.palette{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));}.color{padding:15px;font-size:0.7em;letter-spacing:0.07em;text-transform:uppercase;transition:all 200ms ease;border:3px solid transparent;}.color:hover,.color.current{transform:scale(1.2);border-radius:5px;z-index:1;border:3px solid;box-shadow:0 10px 15px -3px rgba(0,0,0,0.2),0 4px 6px -2px rgba(0,0,0,0.15);}.color:hover{z-index:2;}.container{max-width:800px;margin:0 auto;display:flex;flex-direction:column;}.generate{padding:20px;font-size:1.5rem;background:#000;color:#fff;outline:none;border:none;cursor:pointer;margin-bottom:30px;text-transform:uppercase;letter-spacing:0.1em;}.generate:hover{background:rgba(0,0,0,0.8);}

Step 3 - Adding JavaScript (Hex Color Generator JavaScript)

These JavaScript codes are in a compressed format. If you want to beautify, you can use our tool by Following this Link – JavaScript Beautifier Tool.

Change The highlighted JavaScript according to your requirement. For Example:- The Default Color “#777777”

function hexToHSL(t){let e=0,n=0,o=0;4==t.length?(e="0x"+t[1]+t[1],n="0x"+t[2]+t[2],o="0x"+t[3]+t[3]):7==t.length&&(e="0x"+t[1]+t[2],n="0x"+t[3]+t[4],o="0x"+t[5]+t[6]),e/=255,n/=255,o/=255;let r=Math.min(e,n,o),a=Math.max(e,n,o),l=a-r,s=0,u=0,x=0;return s=0==l?0:a==e?(n-o)/l%6:a==n?(o-e)/l+2:(e-n)/l+4,(s=Math.round(60*s))<0&&(s+=360),x=(a+r)/2,[s,u=+(100*(u=0==l?0:l/(1-Math.abs(2*x-1)))).toFixed(1),x=+(100*x).toFixed(1)]}function HSLToHex(t,e,n){e/=100,n/=100;let o=(1-Math.abs(2*n-1))*e,r=o*(1-Math.abs(t/60%2-1)),a=n-o/2,l=0,s=0,u=0;return 0<=t&&t<60?(l=o,s=r,u=0):60<=t&&t<120?(l=r,s=o,u=0):120<=t&&t<180?(l=0,s=o,u=r):180<=t&&t<240?(l=0,s=r,u=o):240<=t&&t<300?(l=r,s=0,u=o):300<=t&&t<360&&(l=o,s=0,u=r),l=Math.round(255*(l+a)).toString(16),s=Math.round(255*(s+a)).toString(16),u=Math.round(255*(u+a)).toString(16),1==l.length&&(l="0"+l),1==s.length&&(s="0"+s),1==u.length&&(u="0"+u),"#"+l+s+u}const isValidHex=t=>/^#([0-9A-F]{3}){1,2}$/i.test(t),palettes=document.querySelector(".palette"),hexInput=document.querySelector(".hex");hexInput.addEventListener("input",t=>{const;if(isValidHex(e)){"error"),palettes.innerHTML="";const[e,n,o]=hexToHSL(hexInput.value);paletteGen(e,n,o)}else"error"),error=!0});const textColor=(t,e,n)=>{return HSLToHex(t,e,n+(n<50?50:-50))},paletteGen=(t,e,n)=>{for(let o=n%10;o<100;o+=2){const r=HSLToHex(t,e,o),a=document.createElement("div");a.className="color",,,e,o),n===o&&a.classList.add("current"),a.textContent=r,palettes.appendChild(a)}},defaultColor="#777777";paletteGen(...hexToHSL("#777777")),hexInput.value="#777777";


So, there you have the best 50 shades of HEX color generator tool for bloggers to find the perfect HEX color scheme for your design or webpage.

I hope this post helped you make 50 shades of HEX color generator tool on your blogger website. Do let us know if you have any other questions regarding the HEX color scheme generator. You can get in touch with us via our contact, comment form, or Fb.

About the Author

Hello this is NVH Corp, I am Web Designer and Expert at SoiPro(dot)Com

Đăng nhận xét

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.