<a href='https://github.com/thepheer/color-wheel' target='_blank' class='github-corner' aria-label='View source on Github'><svg width='80' height='80' viewBox='0 0 250 250' style='fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;' aria-hidden='true'><path d='M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z'></path><path d='M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2' fill='currentColor' style='transform-origin: 130px 106px;' class='octo-arm'></path><path d='M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z' fill='currentColor' class='octo-body'></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
@import url("//be5invis.github.io/Iosevka/fonts.css");body{overflow:hidden;background:#2e3136}a,body{color:#717782}.highlight{color:#b0b9c9}.center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.App__app{font:2.75vh IosevkaWEB,monospace}
.ColorWheel__link{display:block}.ColorWheel__link:not(:hover){text-decoration:none}
.Slider__slider{margin-top:1em}.Slider__right{float:right}
.TextRange__range{cursor:default}
.Color__hex{position:absolute;transform:translate(-50%,-50%) translate(13em)}
!function(e,t,s,n,i){"use strict";const{E:o,LN2:r,LN10:a,LOG2E:l,LOG10E:d,PI:c,SQRT1_2:u,SQRT2:m,abs:h,acos:p,acosh:_,asin:v,asinh:f,atan:g,atan2:x,atanh:C,cbrt:$,ceil:E,clz32:R,cos:L,cosh:w,exp:M,expm1:S,floor:T,fround:k,hypot:y,imul:b,log:z,log10:F,log1p:H,log2:U,max:A,min:D,pow:P,random:G,round:N,sign:O,sin:Q,sinh:V,sqrt:W,tan:q,tanh:B,trunc:I}=Math,X=(e,t,s)=>D(A(t,e),s),Y=(e,t,s)=>t+e*(s-t),j=(e,t,s)=>(e-t)/(s-t);var J={HSL:(e,t,s)=>i.color(`hsl(${e},${t}%,${s}%)`).hex(),HSLuv:(e,t,s)=>n.hsluvToHex([e,t,s]),HPLuv:(e,t,s)=>n.hpluvToHex([e,t,s])};var K={render:function(){var e=this,t=e.$createElement,s=e._self._c||t;return s("div",{staticClass:"App__app"},[s("router-view")],1)},staticRenderFns:[],cssModules:{app:"App__app"},router:new s({linkActiveClass:"highlight",routes:[{path:"/:mode",component:{render:function(){var e=this,t=e.$createElement,s=e._self._c||t;return s("div",{staticClass:"center"},[e._l(e.modes,function(t,n){return s("router-link",{staticClass:"ColorWheel__link",attrs:{to:n,replace:""}},[e._v(e._s(n))])}),e._l(e.sliders,function([t,n],i){return s("Slider",{attrs:{min:t,max:n},model:{value:e.$data[i],callback:function(t){e.$set(e.$data,i,t)},expression:"$data[slider]"}},[e._v(e._s(e._f("title")(i)))])}),e._l(e.items,function(t){return s("Color",{staticClass:"center",attrs:{mode:e.mode,hue:t/e.items*360,saturation:e.saturation,lightness:e.lightness}})})],2)},staticRenderFns:[],cssModules:{link:"ColorWheel__link"},props:["mode"],data:()=>({modes:J,saturation:100,lightness:75,density:3,sliders:{saturation:[0,100],lightness:[0,100],density:[1,5]}}),computed:{items:e=>3*P(2,e.density)},filters:{title:e=>e.replace(/\b\w/g,e=>e.toUpperCase())},components:{Slider:{render:function(){var e=this,t=e.$createElement,s=e._self._c||t;return s("div",{staticClass:"Slider__slider"},[s("div",{staticClass:"highlight"},[s("span",{staticClass:"Slider__right"},[e._v(e._s(e.model))]),e._t("default")],2),s("TextRange",{attrs:{min:e.min,max:e.max,size:21,filler:"-"},model:{value:e.model,callback:function(t){e.model=t},expression:"model"}},[s("span",{staticClass:"highlight"},[e._v("|")])])],1)},staticRenderFns:[],cssModules:{slider:"Slider__slider",right:"Slider__right"},props:["value","min","max"],data(){return{model:this.value}},watch:{model(e){this.$emit("input",e)}},components:{TextRange:{render:function(){var e=this,t=e.$createElement;return(e._self._c||t)("MouseTracker",{staticClass:"TextRange__range",on:{input:e.update}},[e._v(e._s(e.left)),e._t("default"),e._v(e._s(e.right))],2)},staticRenderFns:[],cssModules:{range:"TextRange__range"},props:["value","min","max","size","filler"],data(){return{model:this.value}},computed:{index:e=>N(j(e.model,e.min,e.max)*(e.size-1)),left:e=>e.filler.repeat(e.index),right:e=>e.filler.repeat(e.size-e.index-1)},methods:{update(e){const{size:t,min:s,max:n}=this,i=X(e*t/(t-1)-.5/t,0,1),o=this.model=N(Y(i,s,n));this.$emit("input",o)}},components:{MouseTracker:{render:function(){var e=this,t=e.$createElement;return(e._self._c||t)("div",{ref:"root",on:{mousedown:function(t){t.preventDefault(),e.onDown(t)}}},[e._t("default")],2)},staticRenderFns:[],data:()=>({active:!1}),methods:{onDown(e){this.rect=this.$refs.root.getBoundingClientRect(),this.active=!0,this.emit(e)},onUp(e){this.active=!1},onMove(e){this.active&&this.emit(e)},emit(e){const{left:t,right:s,top:n,bottom:i}=this.rect,o=j(e.clientX,t,s),r=j(e.clientY,n,i);this.$emit("input",o,r)}},mounted(){e.addEventListener("mouseup",this.onUp),e.addEventListener("mousemove",this.onMove)},destroyed(){e.removeEventListener("mouseup",this.onUp),e.removeEventListener("mousemove",this.onMove)}}}}}},Color:{render:function(){var e=this,t=e.$createElement,s=e._self._c||t;return s("div",{style:e.style},[s("div",{staticClass:"Color__hex",attrs:{contenteditable:""}},[e._v(e._s(e._f("caps")(e.color)))])])},staticRenderFns:[],cssModules:{hex:"Color__hex"},props:["mode","hue","saturation","lightness"],computed:{color:e=>J[e.mode](e.hue,e.saturation,e.lightness),style:e=>({color:e.color,transform:`rotate(${e.hue}deg)`})},filters:{caps:e=>e.toUpperCase()}}}},props:!0},{path:"*",redirect:"HPLuv"}]})};e.addEventListener("load",()=>{document.body.appendChild(new t(K).$mount().$el)})}(window,Vue,VueRouter,hsluv,one);
This Pen doesn't use any external CSS resources.