text: (this["webpackJsonpcolor-tool"]=this["webpackJsonpcolor-tool"]||[]).push([[0],{13:function(n,e,t){n.exports=t.p+"static/media/wiking.0101b028.svg"},14:function(n,e,t){n.exports=t.p+"static/media/github.04e2615d.svg"},20:function(n,e,t){n.exports=t(28)},28:function(n,e,t){"use strict";t.r(e);var a=t(0),r=t.n(a),l=t(12),u=t.n(l),o=t(18),i=t(3),c=t.n(i),s=t(19),h=t(6),p=t.n(h),g={red:function(n,e){return n.rgb.r=e},green:function(n,e){return n.rgb.g=e},blue:function(n,e){return n.rgb.b=e},redValue:function(n,e){return n.rgb.r=e},greenValue:function(n,e){return n.rgb.g=e},blueValue:function(n,e){return n.rgb.b=e},hue:function(n,e){return n.hsv.h=e},saturation:function(n,e){return n.hsv.s=e/100},value:function(n,e){return n.hsv.v=e/100},hueValue:function(n,e){return n.hsv.h=e},saturationValue:function(n,e){return n.hsv.s=e/100},valueValue:function(n,e){return n.hsv.v=e/100},hueL:function(n,e){return n.hsl.h=e},saturationL:function(n,e){return n.hsl.s=e/100},lightness:function(n,e){return n.hsl.l=e/100},hueLValue:function(n,e){return n.hsl.h=e},saturationLValue:function(n,e){return n.hsl.s=e/100},lightnessValue:function(n,e){return n.hsl.l=e/100},hex:function(n,e){return n.hex.set(e)},alpha:function(n,e){return n.alpha=e/100},alphaValue:function(n,e){return n.alpha=e/100}},d={red:function(n){return n.rgb.r},green:function(n){return n.rgb.g},blue:function(n){return n.rgb.b},redValue:function(n){return n.rgb.r},greenValue:function(n){return n.rgb.g},blueValue:function(n){return n.rgb.b},hue:function(n){return Math.round(n.hsv.h)},saturation:function(n){return Math.round(100*n.hsv.s)},value:function(n){return Math.round(100*n.hsv.v)},hueValue:function(n){return Math.round(n.hsv.h)},saturationValue:function(n){return Math.round(100*n.hsv.s)},valueValue:function(n){return Math.round(100*n.hsv.v)},hueL:function(n){return Math.round(n.hsl.h)},saturationL:function(n){return Math.round(100*n.hsl.s)},lightness:function(n){return Math.round(100*n.hsl.l)},hueLValue:function(n){return Math.round(n.hsl.h)},saturationLValue:function(n){return Math.round(100*n.hsl.s)},lightnessValue:function(n){return Math.round(100*n.hsl.l)},hex:function(n){return n.hex.get()},alpha:function(n){return Math.round(100*n.alpha)},alphaValue:function(n){return Math.round(100*n.alpha)}},m=function(n,e){return function(t){var a=t.target,r=t.currentTarget;if(a instanceof HTMLInputElement){var l=g[a.id],u="hex"===a.id?a.value:Number.parseInt(a.value);try{l(n,u)}catch(o){return}Array.from(r.elements).forEach((function(e){e instanceof HTMLInputElement&&e!==a&&d.hasOwnProperty(e.id)&&(e.value="".concat(d[e.id](n)))})),e(n.copy())}}},b=function(n){n.preventDefault(),n.stopPropagation()},f=function(n){var e=n.direction,t=void 0===e?"90deg":e,a=n.colorStops,r=n.colorInterface,l=1/(a.length-1);return"linear-gradient(".concat([t].concat(Object(s.a)(a.map((function(n,e){return"".concat(r.set(n).toCss()," ").concat(Math.round(e*l*100),"%")})))).join(", "),")")},v=t(1),x=t(2),E=t(13),y=t.n(E),V=t(8),k=t.n(V),w=t(14),L=t.n(w);function j(){var n=Object(v.a)(["\n  display: block;\n  background-image: url(",");\n  background-repeat: no-repeat;\n  background-position: 0 50%;\n  background-size: 20px;\n  padding-left: 32px;\n  height: 24px;\n  line-height: 24px;\n  text-decoration: none;\n  &:hover {\n    text-decoration: underline;\n  }\n  /*\nposition: absolute;\nbottom: -36px;\nleft: 0;\n*/\n  color: inherit;\n  float: right;\n  width: 68px;\n"]);return j=function(){return n},n}function M(){var n=Object(v.a)(["\n  display: flex;\n  width: 170px;\n  padding: 18px 36px;\n  flex-direction: column;\n  position: relative;\n  white-space: nowrap;\n  &::before {\n    position: absolute;\n    content: '';\n    width: 100%;\n    height: 100%;\n    top: 0;\n    left: 0;\n    z-index: -1;\n    background-image: url(",");\n  }\n"]);return M=function(){return n},n}function I(){var n=Object(v.a)(["\n  display: flex;\n  align-items: center;\n\n  label {\n    width: 100px;\n    text-align: right;\n    padding-right: 12px;\n  }\n"]);return I=function(){return n},n}function O(){var n=Object(v.a)([""]);return O=function(){return n},n}function S(){var n=Object(v.a)(["\n  margin: 0;\n  padding: 0;\n  width: 140px;\n  font-size: 90px;\n  font-weight: 100;\n  display: flex;\n  align-items: center;\n  color: hsl(0, 0%, 35%);\n"]);return S=function(){return n},n}function C(){var n=Object(v.a)(["\n  padding: 8px 0;\n  display: flex;\n  flex-direction: row;\n  input {\n    font: inherit;\n    color: inherit;\n  }\n  input:active,\n  input:focus {\n    outline: none;\n  }\n  input[type='range'] {\n    width: 720px;\n    height: 21px;\n    -webkit-appearance: none;\n    margin: 6px -6px;\n    background-color: transparent;\n    background-image: linear-gradient(\n      90deg,\n      rgba(255, 255, 255, 0.05) 0,\n      rgba(255, 255, 255, 0.05) 100%\n    );\n    background-size: 708px;\n    background-repeat: no-repeat;\n    background-position: 6px 0;\n  }\n\n  input[type='range']::-webkit-slider-thumb {\n    margin: 0;\n    -webkit-appearance: none;\n    height: 36px;\n    width: 12px;\n    background: transparent;\n    background-image: url(",");\n    background-repeat: no-repeat;\n    background-position: 50% 100%;\n    opacity: 0.3;\n  }\n\n  input[type='range']:hover::-webkit-slider-thumb {\n    opacity: 1;\n  }\n\n  input[type='range']::-moz-range-thumb {\n    margin: 0;\n    -webkit-appearance: none;\n    height: 36px;\n    width: 12px;\n    background: transparent;\n    background-image: url(",");\n    background-repeat: no-repeat;\n    background-position: 50% 100%;\n    opacity: 0.3;\n    border: none;\n    border-radius: none;\n  }\n\n  input[type='range']:hover::-moz-range-thumb {\n    opacity: 1;\n  }\n  input[type='number'],\n  input[type='text'] {\n    border: none;\n    padding: 0 2px;\n    margin: 0 0 0 16px;\n    background: transparent;\n  }\n  input[type='number'] {\n    margin-left: 12px;\n    width: 68px;\n  }\n  input[type='text'] {\n    margin-left: 1px;\n    width: 6em;\n  }\n  textarea {\n    resize: none;\n    border: none;\n  }\n  /*\nopacity: 0;\ntransition: opacity 0.5s;\n&:hover {\n  opacity: 1;\n}\n*/\n"]);return C=function(){return n},n}function z(){var n=Object(v.a)(["\n  display: flex;\n  flex-direction: column;\n  padding: 0;\n  margin: 0;\n"]);return z=function(){return n},n}function T(){var n=Object(v.a)(["\n  display: flex;\n  justify-content: center;\n  margin: 50px 0;\n"]);return T=function(){return n},n}function H(){var n=Object(v.a)(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0 80px 0 250px;\n  background-image: url(",");\n  background-repeat: no-repeat;\n  background-position: 35px 50%;\n  background-size: 85px;\n"]);return H=function(){return n},n}function J(){var n=Object(v.a)(["\n  padding: 50px 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  min-height: 100%;\n  box-sizing: border-box;\n"]);return J=function(){return n},n}function P(){var n=Object(v.a)(["\nhtml,\nbody {\n  color: hsl(0, 0%, 75%);\n  font-family: 'Roboto', sans-serif;\n  font-weight: 300;\n  margin: 0;\n  padding: 0;\n}\n\nhtml {\n  height: 100%;\n  background-image: linear-gradient(0deg, hsl(0, 0%, 10%), hsl(0, 0%, 25%));\n}\n\nbody {\n  height: 100%;\n\n}\n\n#root {\n  height: 100%;\n  overflow: auto;\n\n}\n\nh1,\nh2,\nh3 {\n  font-weight: 300;\n  font-size: 1em;\n}\n\nh1 {\n  margin: 0;\n  padding: 0;\n  font-size: 90px;\n  font-weight: 100;\n  color: hsl(0, 0%, 35%);\n}\n\n"]);return P=function(){return n},n}var A=Object(x.a)(P()),B=x.b.div(J()),D=x.b.header(H(),y.a),N=x.b.div(T()),R=x.b.form(z()),W=x.b.div(C(),k.a,k.a),q=x.b.h3(S()),F=x.b.div(O()),G=x.b.div(I()),K=x.b.div(M(),p.a),Q=x.b.a(j(),L.a),U=function(n){var e=n.color,t=e.copy().mixWithColor(new c.a([0,0,.95],i.ColorType.HSL),1-e.alpha).getLuminance()<.35,a={backgroundColor:e.rgba.toCss(),color:t?"white":"black"};return r.a.createElement(K,{style:a},r.a.createElement("div",null,e.hex.toCss()),r.a.createElement("div",null,e.rgb.toCss()),r.a.createElement("div",null,e.hsl.toCss()),r.a.createElement("div",null,e.hexa.toCss()),r.a.createElement("div",null,e.rgba.toCss()),r.a.createElement("div",null,e.hsla.toCss()))},X=function(n){var e=n.color;return r.a.createElement("style",null,function(n){var e=new c.a;return"\n    #red:hover {\n      background-image: ".concat(f({colorStops:[[0,n.rgb.g,n.rgb.b],[255,n.rgb.g,n.rgb.b]],colorInterface:e.rgb}),";\n    }\n\n    #green:hover {\n      background-image: ").concat(f({colorStops:[[n.rgb.r,0,n.rgb.b],[n.rgb.r,255,n.rgb.b]],colorInterface:e.rgb}),";\n    }\n\n    #blue:hover {\n      background-image: ").concat(f({colorStops:[[n.rgb.r,n.rgb.g,0],[n.rgb.r,n.rgb.g,255]],colorInterface:e.rgb}),";\n    }\n\n    #hue:hover {\n      background-image: ").concat(f({colorStops:[[0,n.hsv.s,n.hsv.v],[60,n.hsv.s,n.hsv.v],[120,n.hsv.s,n.hsv.v],[180,n.hsv.s,n.hsv.v],[240,n.hsv.s,n.hsv.v],[300,n.hsv.s,n.hsv.v],[360,n.hsv.s,n.hsv.v]],colorInterface:e.hsv}),";\n    }\n\n    #saturation:hover {\n      background-image: ").concat(f({colorStops:[[n.hsv.h,0,n.hsv.v],[n.hsv.h,1,n.hsv.v]],colorInterface:e.hsv}),";\n    }\n\n    #value:hover {\n      background-image: ").concat(f({colorStops:[[n.hsv.h,n.hsv.s,0],[n.hsv.h,n.hsv.s,1]],colorInterface:e.hsv}),";\n    }\n\n    #hueL:hover {\n      background-image: ").concat(f({colorStops:[[0,n.hsl.s,n.hsl.l],[60,n.hsl.s,n.hsl.l],[120,n.hsl.s,n.hsl.l],[180,n.hsl.s,n.hsl.l],[240,n.hsl.s,n.hsl.l],[300,n.hsl.s,n.hsl.l],[360,n.hsl.s,n.hsl.l]],colorInterface:e.hsl}),";\n    }\n\n    #saturationL:hover {\n      background-image: ").concat(f({colorStops:[[n.hsl.h,0,n.hsl.l],[n.hsl.h,1,n.hsl.l]],colorInterface:e.hsl}),";\n    }\n\n    #lightness:hover {\n      background-image: ").concat(f({colorStops:[[n.hsl.h,n.hsl.s,0],[n.hsl.h,n.hsl.s,.5],[n.hsl.h,n.hsl.s,1]],colorInterface:e.hsl}),";\n    }\n\n    #alpha:hover {\n      background-image: ").concat(f({colorStops:[[n.rgba.r,n.rgba.g,n.rgba.b,0],[n.rgba.r,n.rgba.g,n.rgba.b,1]],colorInterface:e.rgba}),", url(").concat(p.a,");\n    }\n  ")}(e))},Y=function(){var n=Object(a.useState)(new c.a([246,232,17])),e=Object(o.a)(n,2),t=e[0],l=e[1];return r.a.createElement(B,null,r.a.createElement("div",null,r.a.createElement(A,null),r.a.createElement(D,null,r.a.createElement("h1",null,"color tool"),r.a.createElement(U,{color:t})),r.a.createElement(X,{color:t}),r.a.createElement(N,null,r.a.createElement(R,{onInput:m(t,l),onSubmit:b},r.a.createElement(W,null,r.a.createElement(q,null),r.a.createElement(F,null,r.a.createElement(G,null,r.a.createElement("label",null,"hex"),r.a.createElement("span",null,"#"),r.a.createElement("input",{type:"text",id:"hex",defaultValue:t.hex.get(),spellCheck:!1})))),r.a.createElement(W,null,r.a.createElement(q,null,"rgb"),r.a.createElement(F,null,r.a.createElement(G,null,r.a.createElement("label",null,"red"),r.a.createElement("div",null,r.a.createElement("input",{type:"range",id:"red",min:"0",max:"255",defaultValue:t.rgb.r})),r.a.createElement("input",{type:"number",id:"redValue",min:"0",max:"255",defaultValue:t.rgb.r})),r.a.createElement(G,null,r.a.createElement("label",null,"green"),r.a.createElement("input",{type:"range",id:"green",min:"0",max:"255",defaultValue:t.rgb.g}),r.a.createElement("input",{type:"number",id:"greenValue",min:"0",max:"255",defaultValue:t.rgb.b})),r.a.createElement(G,null,r.a.createElement("label",null,"blue"),r.a.createElement("input",{type:"range",id:"blue",min:"0",max:"255",defaultValue:t.rgb.b}),r.a.createElement("input",{type:"number",id:"blueValue",min:"0",max:"255",defaultValue:t.rgb.b})))),r.a.createElement(W,null,r.a.createElement(q,null,"hsv"),r.a.createElement(F,null,r.a.createElement(G,null,r.a.createElement("label",null,"hue"),r.a.createElement("input",{type:"range",id:"hue",min:"0",max:"360",defaultValue:d.hue(t)}),r.a.createElement("input",{type:"number",id:"hueValue",min:"0",max:"360",defaultValue:d.hue(t)})),r.a.createElement(G,null,r.a.createElement("label",null,"saturation"),r.a.createElement("input",{type:"range",id:"saturation",min:"0",max:"100",defaultValue:d.saturation(t)}),r.a.createElement("input",{type:"number",id:"saturationValue",min:"0",max:"100",defaultValue:d.saturation(t)})),r.a.createElement(G,null,r.a.createElement("label",null,"value"),r.a.createElement("input",{type:"range",id:"value",min:"0",max:"100",defaultValue:d.value(t)}),r.a.createElement("input",{type:"number",id:"valueValue",min:"0",max:"100",defaultValue:d.value(t)})))),r.a.createElement(W,null,r.a.createElement(q,null,"hsl"),r.a.createElement(F,null,r.a.createElement(G,null,r.a.createElement("label",null,"hue"),r.a.createElement("input",{type:"range",id:"hueL",min:"0",max:"360",defaultValue:d.hueL(t)}),r.a.createElement("input",{type:"number",id:"hueLValue",min:"0",max:"360",defaultValue:d.hueL(t)})),r.a.createElement(G,null,r.a.createElement("label",null,"saturation"),r.a.createElement("input",{type:"range",id:"saturationL",min:"0",max:"100",defaultValue:d.saturationL(t)}),r.a.createElement("input",{type:"number",id:"saturationLValue",min:"0",max:"100",defaultValue:d.saturationL(t)})),r.a.createElement(G,null,r.a.createElement("label",null,"lightness"),r.a.createElement("input",{type:"range",id:"lightness",min:"0",max:"100",defaultValue:d.lightness(t)}),r.a.createElement("input",{type:"number",id:"lightnessValue",min:"0",max:"100",defaultValue:d.lightness(t)})))),r.a.createElement(W,null,r.a.createElement(q,null),r.a.createElement(F,null,r.a.createElement(G,null,r.a.createElement("label",null,"alpha"),r.a.createElement("input",{type:"range",id:"alpha",min:"0",max:"100",defaultValue:d.alpha(t)}),r.a.createElement("input",{type:"number",id:"alphaValue",min:"0",max:"100",defaultValue:d.alpha(t)})))))),r.a.createElement(Q,{href:"https://github.com/chriskr/color-tool"},"color-tool")))};u.a.render(r.a.createElement(r.a.StrictMode,null,r.a.createElement(Y,null)),document.getElementById("root"))},6:function(n,e,t){n.exports=t.p+"static/media/bg2.808fc923.svg"},8:function(n,e,t){n.exports=t.p+"static/media/dot.863d1f3e.svg"}},[[20,1,2]]]);
  //# sourceMappingURL=main.3055ec26.chunk.js.map