 |
| Amazing 50 Shades Of HEX Color Generator Tool In Blogger |
W
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.
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)
<h1 align="center">Color Shades Generator</h1>
<div class="container">
<input class="hex" placeholder="Enter hex color"/>
<div class="palette"></div>
</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.
<style>
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);}
</style>
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.
<script>
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 e=t.target.value;if(isValidHex(e)){t.target.classList.remove("error"),palettes.innerHTML="";const[e,n,o]=hexToHSL(hexInput.value);paletteGen(e,n,o)}else t.target.classList.add("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",a.style.backgroundColor=r,a.style.color=textColor(t,e,o),n===o&&a.classList.add("current"),a.textContent=r,palettes.appendChild(a)}},defaultColor="#777777";paletteGen(...hexToHSL("#777777")),hexInput.value="#777777";
</script>
Conclusion
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.