HEX To RGB & HSL Converter Tool

{{color_name}} Color names from NTC hex rgb hsl

.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;} 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 1&&(r-=1),r

Mobster Demo

HEX To RGB & HSL Converter Tool

hex

rgb

hsl

Mobster

Ad-Blocker Detected!

Cookies Consent

Cookies Policy