A Pen by philpill.

index.html

<script type="text/javascript">
  (function(){function f(e){var t={r:0,g:0,b:0};var n=1;var r=false;var i=false;if(typeof e=="string"){e=M(e)}if(typeof e=="object"){if(e.hasOwnProperty("r")&&e.hasOwnProperty("g")&&e.hasOwnProperty("b")){t=l(e.r,e.g,e.b);r=true;i=String(e.r).substr(-1)==="%"?"prgb":"rgb"}else if(e.hasOwnProperty("h")&&e.hasOwnProperty("s")&&e.hasOwnProperty("v")){e.s=k(e.s);e.v=k(e.v);t=d(e.h,e.s,e.v);r=true;i="hsv"}else if(e.hasOwnProperty("h")&&e.hasOwnProperty("s")&&e.hasOwnProperty("l")){e.s=k(e.s);e.l=k(e.l);t=h(e.h,e.s,e.l);r=true;i="hsl"}if(e.hasOwnProperty("a")){n=e.a}}n=w(n);return{ok:r,format:e.format||i,r:s(255,o(t.r,0)),g:s(255,o(t.g,0)),b:s(255,o(t.b,0)),a:n}}function l(e,t,n){return{r:E(e,255)*255,g:E(t,255)*255,b:E(n,255)*255}}function c(e,t,n){e=E(e,255);t=E(t,255);n=E(n,255);var r=o(e,t,n),i=s(e,t,n);var u,a,f=(r+i)/2;if(r==i){u=a=0}else{var l=r-i;a=f>.5?l/(2-r-i):l/(r+i);switch(r){case e:u=(t-n)/l+(t<n?6:0);break;case t:u=(n-e)/l+2;break;case n:u=(e-t)/l+4;break}u/=6}return{h:u,s:a,l:f}}function h(e,t,n){function o(e,t,n){if(n<0)n+=1;if(n>1)n-=1;if(n<1/6)return e+(t-e)*6*n;if(n<1/2)return t;if(n<2/3)return e+(t-e)*(2/3-n)*6;return e}var r,i,s;e=E(e,360);t=E(t,100);n=E(n,100);if(t===0){r=i=s=n}else{var u=n<.5?n*(1+t):n+t-n*t;var a=2*n-u;r=o(a,u,e+1/3);i=o(a,u,e);s=o(a,u,e-1/3)}return{r:r*255,g:i*255,b:s*255}}function p(e,t,n){e=E(e,255);t=E(t,255);n=E(n,255);var r=o(e,t,n),i=s(e,t,n);var u,a,f=r;var l=r-i;a=r===0?0:l/r;if(r==i){u=0}else{switch(r){case e:u=(t-n)/l+(t<n?6:0);break;case t:u=(n-e)/l+2;break;case n:u=(e-t)/l+4;break}u/=6}return{h:u,s:a,v:f}}function d(e,t,n){e=E(e,360)*6;t=E(t,100);n=E(n,100);var i=r.floor(e),s=e-i,o=n*(1-t),u=n*(1-s*t),a=n*(1-(1-s)*t),f=i%6,l=[n,u,o,o,a,n][f],c=[a,n,n,u,o,o][f],h=[o,o,a,n,n,u][f];return{r:l*255,g:c*255,b:h*255}}function v(e,t,n,r){var s=[C(i(e).toString(16)),C(i(t).toString(16)),C(i(n).toString(16))];if(r&&s[0].charAt(0)==s[0].charAt(1)&&s[1].charAt(0)==s[1].charAt(1)&&s[2].charAt(0)==s[2].charAt(1)){return s[0].charAt(0)+s[1].charAt(0)+s[2].charAt(0)}return s.join("")}function m(e,t,n,r){var s=[C(L(r)),C(i(e).toString(16)),C(i(t).toString(16)),C(i(n).toString(16))];return s.join("")}function b(e){var t={};for(var n in e){if(e.hasOwnProperty(n)){t[e[n]]=n}}return t}function w(e){e=parseFloat(e);if(isNaN(e)||e<0||e>1){e=1}return e}function E(e,t){if(T(e)){e="100%"}var n=N(e);e=s(t,o(0,parseFloat(e)));if(n){e=parseInt(e*t,10)/100}if(r.abs(e-t)<1e-6){return 1}return e%t/parseFloat(t)}function S(e){return s(1,o(0,e))}function x(e){return parseInt(e,16)}function T(e){return typeof e=="string"&&e.indexOf(".")!=-1&&parseFloat(e)===1}function N(e){return typeof e==="string"&&e.indexOf("%")!=-1}function C(e){return e.length==1?"0"+e:""+e}function k(e){if(e<=1){e=e*100+"%"}return e}function L(e){return Math.round(parseFloat(e)*255).toString(16)}function A(e){return x(e)/255}function M(n){n=n.replace(e,"").replace(t,"").toLowerCase();var r=false;if(g[n]){n=g[n];r=true}else if(n=="transparent"){return{r:0,g:0,b:0,a:0,format:"name"}}var i;if(i=O.rgb.exec(n)){return{r:i[1],g:i[2],b:i[3]}}if(i=O.rgba.exec(n)){return{r:i[1],g:i[2],b:i[3],a:i[4]}}if(i=O.hsl.exec(n)){return{h:i[1],s:i[2],l:i[3]}}if(i=O.hsla.exec(n)){return{h:i[1],s:i[2],l:i[3],a:i[4]}}if(i=O.hsv.exec(n)){return{h:i[1],s:i[2],v:i[3]}}if(i=O.hex8.exec(n)){return{a:A(i[1]),r:x(i[2]),g:x(i[3]),b:x(i[4]),format:r?"name":"hex8"}}if(i=O.hex6.exec(n)){return{r:x(i[1]),g:x(i[2]),b:x(i[3]),format:r?"name":"hex"}}if(i=O.hex3.exec(n)){return{r:x(i[1]+""+i[1]),g:x(i[2]+""+i[2]),b:x(i[3]+""+i[3]),format:r?"name":"hex"}}return false}var e=/^[\s,#]+/,t=/\s+$/,n=0,r=Math,i=r.round,s=r.min,o=r.max,u=r.random;var a=function _(e,t){e=e?e:"";t=t||{};if(e instanceof _){return e}if(!(this instanceof _)){return new _(e,t)}var r=f(e);this._r=r.r,this._g=r.g,this._b=r.b,this._a=r.a,this._roundA=i(100*this._a)/100,this._format=t.format||r.format;this._gradientType=t.gradientType;if(this._r<1){this._r=i(this._r)}if(this._g<1){this._g=i(this._g)}if(this._b<1){this._b=i(this._b)}this._ok=r.ok;this._tc_id=n++};a.prototype={isDark:function(){return this.getBrightness()<128},isLight:function(){return!this.isDark()},isValid:function(){return this._ok},getFormat:function(){return this._format},getAlpha:function(){return this._a},getBrightness:function(){var e=this.toRgb();return(e.r*299+e.g*587+e.b*114)/1e3},setAlpha:function(e){this._a=w(e);this._roundA=i(100*this._a)/100;return this},toHsv:function(){var e=p(this._r,this._g,this._b);return{h:e.h*360,s:e.s,v:e.v,a:this._a}},toHsvString:function(){var e=p(this._r,this._g,this._b);var t=i(e.h*360),n=i(e.s*100),r=i(e.v*100);return this._a==1?"hsv("+t+", "+n+"%, "+r+"%)":"hsva("+t+", "+n+"%, "+r+"%, "+this._roundA+")"},toHsl:function(){var e=c(this._r,this._g,this._b);return{h:e.h*360,s:e.s,l:e.l,a:this._a}},toHslString:function(){var e=c(this._r,this._g,this._b);var t=i(e.h*360),n=i(e.s*100),r=i(e.l*100);return this._a==1?"hsl("+t+", "+n+"%, "+r+"%)":"hsla("+t+", "+n+"%, "+r+"%, "+this._roundA+")"},toHex:function(e){return v(this._r,this._g,this._b,e)},toHexString:function(e){return"#"+this.toHex(e)},toHex8:function(){return m(this._r,this._g,this._b,this._a)},toHex8String:function(){return"#"+this.toHex8()},toRgb:function(){return{r:i(this._r),g:i(this._g),b:i(this._b),a:this._a}},toRgbString:function(){return this._a==1?"rgb("+i(this._r)+", "+i(this._g)+", "+i(this._b)+")":"rgba("+i(this._r)+", "+i(this._g)+", "+i(this._b)+", "+this._roundA+")"},toPercentageRgb:function(){return{r:i(E(this._r,255)*100)+"%",g:i(E(this._g,255)*100)+"%",b:i(E(this._b,255)*100)+"%",a:this._a}},toPercentageRgbString:function(){return this._a==1?"rgb("+i(E(this._r,255)*100)+"%, "+i(E(this._g,255)*100)+"%, "+i(E(this._b,255)*100)+"%)":"rgba("+i(E(this._r,255)*100)+"%, "+i(E(this._g,255)*100)+"%, "+i(E(this._b,255)*100)+"%, "+this._roundA+")"},toName:function(){if(this._a===0){return"transparent"}if(this._a<1){return false}return y[v(this._r,this._g,this._b,true)]||false},toFilter:function(e){var t="#"+m(this._r,this._g,this._b,this._a);var n=t;var r=this._gradientType?"GradientType = 1, ":"";if(e){var i=a(e);n=i.toHex8String()}return"progid:DXImageTransform.Microsoft.gradient("+r+"startColorstr="+t+",endColorstr="+n+")"},toString:function(e){var t=!!e;e=e||this._format;var n=false;var r=this._a<1&&this._a>=0;var i=!t&&r&&(e==="hex"||e==="hex6"||e==="hex3"||e==="name");if(i){if(e==="name"&&this._a===0){return this.toName()}return this.toRgbString()}if(e==="rgb"){n=this.toRgbString()}if(e==="prgb"){n=this.toPercentageRgbString()}if(e==="hex"||e==="hex6"){n=this.toHexString()}if(e==="hex3"){n=this.toHexString(true)}if(e==="hex8"){n=this.toHex8String()}if(e==="name"){n=this.toName()}if(e==="hsl"){n=this.toHslString()}if(e==="hsv"){n=this.toHsvString()}return n||this.toHexString()}};a.fromRatio=function(e,t){if(typeof e=="object"){var n={};for(var r in e){if(e.hasOwnProperty(r)){if(r==="a"){n[r]=e[r]}else{n[r]=k(e[r])}}}e=n}return a(e,t)};a.equals=function(e,t){if(!e||!t){return false}return a(e).toRgbString()==a(t).toRgbString()};a.random=function(){return a.fromRatio({r:u(),g:u(),b:u()})};a.desaturate=function(e,t){t=t===0?0:t||10;var n=a(e).toHsl();n.s-=t/100;n.s=S(n.s);return a(n)};a.saturate=function(e,t){t=t===0?0:t||10;var n=a(e).toHsl();n.s+=t/100;n.s=S(n.s);return a(n)};a.greyscale=function(e){return a.desaturate(e,100)};a.lighten=function(e,t){t=t===0?0:t||10;var n=a(e).toHsl();n.l+=t/100;n.l=S(n.l);return a(n)};a.brighten=function(e,t){t=t===0?0:t||10;var n=a(e).toRgb();n.r=o(0,s(255,n.r-i(255*-(t/100))));n.g=o(0,s(255,n.g-i(255*-(t/100))));n.b=o(0,s(255,n.b-i(255*-(t/100))));return a(n)};a.darken=function(e,t){t=t===0?0:t||10;var n=a(e).toHsl();n.l-=t/100;n.l=S(n.l);return a(n)};a.complement=function(e){var t=a(e).toHsl();t.h=(t.h+180)%360;return a(t)};a.spin=function(e,t){var n=a(e).toHsl();var r=(i(n.h)+t)%360;n.h=r<0?360+r:r;return a(n)};a.mix=function(e,t,n){n=n===0?0:n||50;var r=a(e).toRgb();var i=a(t).toRgb();var s=n/100;var o=s*2-1;var u=i.a-r.a;var f;if(o*u==-1){f=o}else{f=(o+u)/(1+o*u)}f=(f+1)/2;var l=1-f;var c={r:i.r*f+r.r*l,g:i.g*f+r.g*l,b:i.b*f+r.b*l,a:i.a*s+r.a*(1-s)};return a(c)};a.triad=function(e){var t=a(e).toHsl();var n=t.h;return[a(e),a({h:(n+120)%360,s:t.s,l:t.l}),a({h:(n+240)%360,s:t.s,l:t.l})]};a.tetrad=function(e){var t=a(e).toHsl();var n=t.h;return[a(e),a({h:(n+90)%360,s:t.s,l:t.l}),a({h:(n+180)%360,s:t.s,l:t.l}),a({h:(n+270)%360,s:t.s,l:t.l})]};a.splitcomplement=function(e){var t=a(e).toHsl();var n=t.h;return[a(e),a({h:(n+72)%360,s:t.s,l:t.l}),a({h:(n+216)%360,s:t.s,l:t.l})]};a.analogous=function(e,t,n){t=t||6;n=n||30;var r=a(e).toHsl();var i=360/n;var s=[a(e)];for(r.h=(r.h-(i*t>>1)+720)%360;--t;){r.h=(r.h+i)%360;s.push(a(r))}return s};a.monochromatic=function(e,t){t=t||6;var n=a(e).toHsv();var r=n.h,i=n.s,s=n.v;var o=[];var u=1/t;while(t--){o.push(a({h:r,s:i,v:s}));s=(s+u)%1}return o};a.readability=function(e,t){var n=a(e);var r=a(t);var i=n.toRgb();var s=r.toRgb();var o=n.getBrightness();var u=r.getBrightness();var f=Math.max(i.r,s.r)-Math.min(i.r,s.r)+Math.max(i.g,s.g)-Math.min(i.g,s.g)+Math.max(i.b,s.b)-Math.min(i.b,s.b);return{brightness:Math.abs(o-u),color:f}};a.readable=function(e,t){var n=a.readability(e,t);return n.brightness>125&&n.color>500};a.mostReadable=function(e,t){var n=null;var r=0;var i=false;for(var s=0;s<t.length;s++){var o=a.readability(e,t[s]);var u=o.brightness>125&&o.color>500;var f=3*(o.brightness/125)+o.color/500;if(u&&!i||u&&i&&f>r||!u&&!i&&f>r){i=u;r=f;n=a(t[s])}}return n};var g=a.names={aliceblue:"f0f8ff",antiquewhite:"faebd7",aqua:"0ff",aquamarine:"7fffd4",azure:"f0ffff",beige:"f5f5dc",bisque:"ffe4c4",black:"000",blanchedalmond:"ffebcd",blue:"00f",blueviolet:"8a2be2",brown:"a52a2a",burlywood:"deb887",burntsienna:"ea7e5d",cadetblue:"5f9ea0",chartreuse:"7fff00",chocolate:"d2691e",coral:"ff7f50",cornflowerblue:"6495ed",cornsilk:"fff8dc",crimson:"dc143c",cyan:"0ff",darkblue:"00008b",darkcyan:"008b8b",darkgoldenrod:"b8860b",darkgray:"a9a9a9",darkgreen:"006400",darkgrey:"a9a9a9",darkkhaki:"bdb76b",darkmagenta:"8b008b",darkolivegreen:"556b2f",darkorange:"ff8c00",darkorchid:"9932cc",darkred:"8b0000",darksalmon:"e9967a",darkseagreen:"8fbc8f",darkslateblue:"483d8b",darkslategray:"2f4f4f",darkslategrey:"2f4f4f",darkturquoise:"00ced1",darkviolet:"9400d3",deeppink:"ff1493",deepskyblue:"00bfff",dimgray:"696969",dimgrey:"696969",dodgerblue:"1e90ff",firebrick:"b22222",floralwhite:"fffaf0",forestgreen:"228b22",fuchsia:"f0f",gainsboro:"dcdcdc",ghostwhite:"f8f8ff",gold:"ffd700",goldenrod:"daa520",gray:"808080",green:"008000",greenyellow:"adff2f",grey:"808080",honeydew:"f0fff0",hotpink:"ff69b4",indianred:"cd5c5c",indigo:"4b0082",ivory:"fffff0",khaki:"f0e68c",lavender:"e6e6fa",lavenderblush:"fff0f5",lawngreen:"7cfc00",lemonchiffon:"fffacd",lightblue:"add8e6",lightcoral:"f08080",lightcyan:"e0ffff",lightgoldenrodyellow:"fafad2",lightgray:"d3d3d3",lightgreen:"90ee90",lightgrey:"d3d3d3",lightpink:"ffb6c1",lightsalmon:"ffa07a",lightseagreen:"20b2aa",lightskyblue:"87cefa",lightslategray:"789",lightslategrey:"789",lightsteelblue:"b0c4de",lightyellow:"ffffe0",lime:"0f0",limegreen:"32cd32",linen:"faf0e6",magenta:"f0f",maroon:"800000",mediumaquamarine:"66cdaa",mediumblue:"0000cd",mediumorchid:"ba55d3",mediumpurple:"9370db",mediumseagreen:"3cb371",mediumslateblue:"7b68ee",mediumspringgreen:"00fa9a",mediumturquoise:"48d1cc",mediumvioletred:"c71585",midnightblue:"191970",mintcream:"f5fffa",mistyrose:"ffe4e1",moccasin:"ffe4b5",navajowhite:"ffdead",navy:"000080",oldlace:"fdf5e6",olive:"808000",olivedrab:"6b8e23",orange:"ffa500",orangered:"ff4500",orchid:"da70d6",palegoldenrod:"eee8aa",palegreen:"98fb98",paleturquoise:"afeeee",palevioletred:"db7093",papayawhip:"ffefd5",peachpuff:"ffdab9",peru:"cd853f",pink:"ffc0cb",plum:"dda0dd",powderblue:"b0e0e6",purple:"800080",red:"f00",rosybrown:"bc8f8f",royalblue:"4169e1",saddlebrown:"8b4513",salmon:"fa8072",sandybrown:"f4a460",seagreen:"2e8b57",seashell:"fff5ee",sienna:"a0522d",silver:"c0c0c0",skyblue:"87ceeb",slateblue:"6a5acd",slategray:"708090",slategrey:"708090",snow:"fffafa",springgreen:"00ff7f",steelblue:"4682b4",tan:"d2b48c",teal:"008080",thistle:"d8bfd8",tomato:"ff6347",turquoise:"40e0d0",violet:"ee82ee",wheat:"f5deb3",white:"fff",whitesmoke:"f5f5f5",yellow:"ff0",yellowgreen:"9acd32"};var y=a.hexNames=b(g);var O=function(){var e="[-\\+]?\\d+%?";var t="[-\\+]?\\d*\\.\\d+%?";var n="(?:"+t+")|(?:"+e+")";var r="[\\s|\\(]+("+n+")[,|\\s]+("+n+")[,|\\s]+("+n+")\\s*\\)?";var i="[\\s|\\(]+("+n+")[,|\\s]+("+n+")[,|\\s]+("+n+")[,|\\s]+("+n+")\\s*\\)?";return{rgb:new RegExp("rgb"+r),rgba:new RegExp("rgba"+i),hsl:new RegExp("hsl"+r),hsla:new RegExp("hsla"+i),hsv:new RegExp("hsv"+r),hex3:/^([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,hex6:/^([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,hex8:/^([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/}}();if(typeof module!=="undefined"&&module.exports){module.exports=a}else if(typeof define==="function"&&define.amd){define(function(){return a})}else{window.tinycolor=a}})()
</script>

<img  src="http://assets.codepen.io/images/codepen-logo.svg" />

<div></div>

<svg>
  <filter id="css_hue_rotate">
    <feColorMatrix type="hueRotate" values="60"/>
    <feComponentTransfer>
     <feFuncR type="linear" slope="2"/>
     <feFuncG type="linear" slope="2"/>
     <feFuncB type="linear" slope="2"/>
    </feComponentTransfer>
    <feColorMatrix type="saturate" values="1"/>
  </filter>
</svg>

<style>
  img, div {
    filter : url(#css_hue_rotate);
    -webkit-filter : url(#css_hue_rotate);
  }
</styLe>

rofdu.markdown

rofdu

A Pen by philpill on CodePen.

License.

script.js

(function(){
  
  var color = tinycolor("yellow");
  
  var hsl = color.toHsl();
  
  // 1/lightness = slope
  
  console.log(hsl);
  
})();

style.css

div {
  background: url('http://www.chestysoft.com/aspgif/images/frame0.gif') no-repeat black center center;
  height: 300px;
  width: 300px;
}