Welcome to ThemesGadget. In this post, we will learn how to make the #1 Responsive HEX To RGB HSL Converter Tool In Blogger, RGB HEX converter, how to convert HEX to RGB HSL, follow our steps carefully for avoiding any error.
Introduction
Today, we will build a blogger tool for converting any color from HEX to RGB And HSL format. The tool is 100% responsive and works fine on both mobile and laptops without any issue. It can convert any HEX color to any RGB format or HSL format.
What Is HEX To RGB HSL Converter Tool?
Hex To RGB HSL Converter Tool is a simple web app for converting hexadecimal hex and RGB color codes values into HSL values with it's name. You can use this tool in your website, blog, or any other web platform such as WordPress, Joomla, or any other web platform.
Suppose you want to understand HSL vs. HSB better, how they are equivalent, and how to convert them into each other. Then you need to read this Wikipedia Page (HSL and HSV) page.
You can learn how to convert your favorite color from one format (HEX) into another (RGB) and (HSL) with this tutorial.
Features Of HEX To RGB HSL Converter Tool
The main feature of this tool is to convert any color from HEX to RGB And HSL format in a blogger. Its features are as follows:
Convert any color from HEX to RGB format in a blogger
Convert any color from HEX to HSL format in a blogger
Generate Random HEX format in a blogger
Generate Random RGB format in a blogger
Generate Random HSL format in a blogger
Why Is Hex To RGB HSL Converter Tool Important?
In the world of web design, it is a very common thing. I’ve seen several websites using hexadecimal color spaces, such as HSL and HEX color spaces, instead of real-world color spaces.
The problem with using old web browser color spaces is that they are based on a limited palette of colors. The limitations in this limited palette are not friendly to most designers’ tastes.
It is not just the limitation in these color spaces that you need to be wary about, but also the limitation in the various ways you can modify these color spaces for your purposes (such as removing certain colors from the palette).
While working on any website development, you must have come across the requirement of making a hex to RGB HSL converter tool.
The color conversion tool is perfect for designers who cannot use a color picker tool to convert the hex code into RGB or HSL values.
Why make HEX To RGB HSL Converter Tool?
Let me explain: When you are designing your website with CSS or HTML, you will often find yourself converting from one color space to another.
For Example
If you have a website that has six different colors (black, white, blue, brown, pink, and green), But still wants to look like an actual shoe store, there are only three ways that you can go about doing so: you can only do this With HEX Color, RGB, and HSL.
How To Make A HEX To RGB HSL Converter Tool?
To make a Hex To RGB HSL Converter 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 (HEX To RGB & HSL)
<div class="Main-Container">
<main id="Main-ConT" class="Main-con">
<header class="Hed-Main">
<div>{{color_name}}</div>
<div v-on:click="hexify" style="flex: none;text-align: center;cursor: pointer;">
<span class="fa fa-refresh fa-fw"></span>
</div>
<div style="text-align: right;">
<small>Color names from <a href="http://chir.ag/projects/ntc/" rel="nofollow noopener" target="_blank">NTC</a></small>
</div>
</header>
<div v-bind:style="{ background: make_hex }">
<div>
<h2 class="Mn-H2">
hex
</h2>
<input class="Ipt-Al" type="text" v-model="color.hex" placeholder="hex →" />
</div>
</div>
<div v-bind:style="{ background: make_rgb }">
<div>
<h2 class="Mn-H2">rgb</h2>
<input class="Ipt-Al" type="text" v-model="make_rgb" placeholder="→ rgb" xreadonly />
</div>
</div>
<div v-bind:style="{ background: make_hsl }">
<div>
<h2 class="Mn-H2">hsl</h2>
<input class="Ipt-Al" type="text" v-model="make_hsl" placeholder="→ hsl" xreadonly />
</div>
</div>
</main>
</div>
Step 2 - Adding CSS (Hex To Rgb CSS)
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.
If you use the Imagz + Landing Page blogger template, add this highlighted CSS; Otherwise, leave it.
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<style type="text/css">
.onPst .blogPts{max-width:1040px;}
.Main-Container{margin:0;display:flex;font-family:'Work Sans',sans-serif;font-size:calc(1em + 1vmin);}.Main-con{flex:1;display:flex;flex-direction:column;}.Main-con>div{position:relative;flex:1;padding:1em 2em;display:flex;align-items:center;transition:background 500ms linear;}.Main-con>div+div{margin-top:.3ch;}.Main-con>div:not([style]) .Mn-H2,.Main-con>div[style=''] .Mn-H2{color:rgba(0,0,0,.25);}.Main-con>div:not([style]) .Ipt-Al,.Main-con>div[style=''] .Ipt-Al{color:#333;}.Hed-Main{padding:1em 2em;display:flex;justify-content:space-between;align-items:baseline;}.Hed-Main>*{flex:1;}.Hed-Main small{font-size:.6em;opacity:.4;font-style:italic;}a{text-decoration:none;color:#0dc7db;}.Mn-H2{margin:0 0 8px!important;font-size:8vmin!important;font-weight:100!important;text-transform:uppercase;letter-spacing:-.1ch;line-height:1!important;color:#fff;}.Ipt-Al{border:0!important;border-radius:.4ch!important;padding:.4ch!important;margin-left:-.2ch!important;width:100%!important;font-size:6vmin;font-family:inherit;font-weight:300!important;color:#fff;outline:none!important;background:transparent;line-height:unset!important;}.Ipt-Al::-moz-placeholder{color:rgba(0,0,0,.25);}.Ipt-Al:-ms-.Ipt-Al-placeholder{color:rgba(0,0,0,.25);}.Ipt-Al::placeholder{color:rgba(0,0,0,.25);}.Ipt-Al:focus{background:rgba(255,255,255,.2);border-color:transparent!important;box-shadow:none!important;}
</style>
Step 3 - Adding JavaScript (Hex To Rgb Converter JavasSript)
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 src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/107782/ntc.js'></script>
<script>
let vm=new Vue({el:"#Main-ConT",data:{color:{hex:""}},computed:{make_hex:function(){return"#"!==this.color.hex.charAt(0)?"#"+this.color.hex:this.color.hex},make_rgb:function(){let t={};if(this.color.hex.length>5)return`rgb(${(t=this.hex2rgb(this.color.hex)).r}, ${t.g}, ${t.b})`},make_hsl:function(){let t={};if(this.color.hex.length>5)return`hsl(${(t=this.hex2hsl(this.color.hex)).h}, ${t.s}%, ${t.l}%)`},color_name:function(){return 7===this.color.hex.length?ntc.name(this.color.hex)[1]:"Invalid"}},methods:{hex2rgb:function(t){return t=t.replace("#",""),{r:0|parseInt(t.substring(0,2),16),g:0|parseInt(t.substring(2,4),16),b:0|parseInt(t.substring(4,6),16)}},hex2hsl:function(t){let e=this.hex2rgb(t),r=e.r,h=e.g,n=e.b;r/=255,h/=255,n/=255;let o,i,s=Math.max(r,h,n),l=Math.min(r,h,n),c=(s+l)/2;if(s===l)o=i=0;else{let t=s-l;switch(i=c>.5?t/(2-s-l):t/(s+l),s){case r:o=(h-n)/t+(h<n?6:0);break;case h:o=(n-r)/t+2;break;case n:o=(r-h)/t+4}o/=6}return{h:360*o+.5|0,s:100*i+.5|0,l:100*c+.5|0}},hsl2rgb:function(t,e,r){let h,n,o;if(0==e)h=n=o=r;else{let l=function(t,e,r){return r<0&&(r+=1),r>1&&(r-=1),r<1/6?t+6*(e-t)*r:r<.5?e:r<2/3?t+(e-t)*(2/3-r)*6:t};var i=r<.5?r*(1+e):r+e-r*e,s=2*r-i;h=Math.round(255*l(s,i,t+1/3)),n=Math.round(255*l(s,i,t)),o=Math.round(255*l(s,i,t-1/3))}return{r:h,g:n,b:o}},hexify:function(){this.color.hex="#"+("00"+Math.floor(16777216*Math.random()).toString(16)).substr(-6)}}});Vue.nextTick(function(){vm.hexify()});
</script>
At The End
I hope that this article helped you make a Hex To RGB HSL Converter Tool on your blogger website. Do let us know if you have any other questions regarding dropdown menus. You can get in touch with us via our contact form or telegram.