Skip to content

Instantly share code, notes, and snippets.

@vprus

vprus/color.min.js

Last active September 9, 2015 09:40
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save vprus/ee45903160a3fb479360 to your computer and use it in GitHub Desktop.
Save vprus/ee45903160a3fb479360 to your computer and use it in GitHub Desktop.
Download ZIP
Material Colors
Raw
color.min.js
"undefined"==typeof Map?(Map=function(){this.clear()},Map.prototype={set:function(t,e){return this._[t]=e,this},get:function(t){return this._[t]},has:function(t){return t in this._},"delete":function(t){return t in this._&&delete this._[t]},clear:function(){this._=Object.create(null)},get size(){var t=0;for(var e in this._)++t;return t},forEach:function(t){for(var e in this._)t(this._[e],e,this)}}):function(){var t=new Map;t.set(0,0)!==t&&(t=t.set,Map.prototype.set=function(){return t.apply(this,arguments),this})}(),function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e(t.color={})}(this,function(t){"use strict";function e(t,e){var s=t-e;return s>180||-180>s?s-360*Math.round(s/360):s}function s(){}function n(t){var e;return t=(t+"").trim().toLowerCase(),(e=j.exec(t))?(e=parseInt(e[1],16),i(e>>8&15|e>>4&240,e>>4&15|240&e,(15&e)<<4|15&e)):(e=C.exec(t))?r(parseInt(e[1],16)):(e=$.exec(t))?i(e[1],e[2],e[3]):(e=H.exec(t))?i(2.55*e[1],2.55*e[2],2.55*e[3]):(e=I.exec(t))?h(e[1],.01*e[2],.01*e[3]):G.has(t)?r(G.get(t)):null}function r(t){return i(t>>16&255,t>>8&255,255&t)}function i(t,e,r){return 1===arguments.length&&(t instanceof s||(t=n(t)),t?(t=t.rgb(),r=t.b,e=t.g,t=t.r):t=e=r=NaN),new a(t,e,r)}function a(t,e,s){this.r=+t,this.g=+e,this.b=+s}function o(t,e,s){return"#"+(isNaN(t)?"00":(t=Math.round(t))<16?"0"+Math.max(0,t).toString(16):Math.min(255,t).toString(16))+(isNaN(e)?"00":(e=Math.round(e))<16?"0"+Math.max(0,e).toString(16):Math.min(255,e).toString(16))+(isNaN(s)?"00":(s=Math.round(s))<16?"0"+Math.max(0,s).toString(16):Math.min(255,s).toString(16))}function h(t,e,r){if(1===arguments.length)if(t instanceof l)r=t.l,e=t.s,t=t.h;else if(t instanceof s||(t=n(t)),t){if(t instanceof l)return t;t=t.rgb();var i=t.r/255,a=t.g/255,o=t.b/255,h=Math.min(i,a,o),u=Math.max(i,a,o),c=u-h;r=(u+h)/2,c?(e=.5>r?c/(u+h):c/(2-u-h),t=i===u?(a-o)/c+6*(o>a):a===u?(o-i)/c+2:(i-a)/c+4,t*=60):(t=NaN,e=r>0&&1>r?0:t)}else t=e=r=NaN;return new l(t,e,r)}function l(t,e,s){this.h=+t,this.s=+e,this.l=+s}function u(t,e,s){return 255*(60>t?e+(s-e)*t/60:180>t?s:240>t?e+(s-e)*(240-t)/60:e)}function c(t,e,s){if(1===arguments.length)if(t instanceof g)s=t.b,e=t.a,t=t.l;else if(t instanceof m){var n=t.h*U;s=Math.sin(n)*t.c,e=Math.cos(n)*t.c,t=t.l}else{t instanceof a||(t=i(t));var r=b(t.r),o=b(t.g),s=b(t.b),h=f((.4124564*r+.3575761*o+.1804375*s)/A),l=f((.2126729*r+.7151522*o+.072175*s)/B),u=f((.0193339*r+.119192*o+.9503041*s)/D);s=200*(l-u),e=500*(h-l),t=116*l-16}return new g(t,e,s)}function g(t,e,s){this.l=+t,this.a=+e,this.b=+s}function f(t){return t>Q?Math.pow(t,1/3):t/K+F}function d(t){return t>J?t*t*t:K*(t-F)}function p(t){return 255*(.0031308>=t?12.92*t:1.055*Math.pow(t,1/2.4)-.055)}function b(t){return(t/=255)<=.04045?t/12.92:Math.pow((t+.055)/1.055,2.4)}function N(t,e,s){return 1===arguments.length&&(t instanceof m?(s=t.l,e=t.c,t=t.h):(t instanceof g||(t=c(t)),s=t.l,e=Math.sqrt(t.a*t.a+t.b*t.b),t=Math.atan2(t.b,t.a)*V,0>t&&(t+=360))),new m(t,e,s)}function m(t,e,s){this.h=+t,this.c=+e,this.l=+s}function w(t,e,s){if(1===arguments.length)if(t instanceof y)s=t.l,e=t.s,t=t.h;else{t instanceof a||(t=i(t));var n=t.r/255,r=t.g/255,o=t.b/255;s=(rt*o+st*n-nt*r)/(rt+st-nt);var h=o-s,l=(et*(r-s)-Z*h)/tt;e=Math.sqrt(l*l+h*h)/(et*s*(1-s)),t=e?Math.atan2(l,h)*V-120:NaN,0>t&&(t+=360)}return new y(t,e,s)}function y(t,e,s){this.h=+t,this.s=+e,this.l=+s}function v(t){return function(s,n){s=w(s),n=w(n);var r=isNaN(s.h)?n.h:s.h,i=isNaN(s.s)?n.s:s.s,a=s.l,o=isNaN(n.h)?0:e(n.h,r),h=isNaN(n.s)?0:n.s-i,l=n.l-a;return function(e){return s.h=r+o*e,s.s=i+h*e,s.l=a+l*Math.pow(e,t),s+""}}}function M(t){return function(e,s){e=w(e),s=w(s);var n=isNaN(e.h)?s.h:e.h,r=isNaN(e.s)?s.s:e.s,i=e.l,a=isNaN(s.h)?0:s.h-n,o=isNaN(s.s)?0:s.s-r,h=s.l-i;return function(s){return e.h=n+a*s,e.s=r+o*s,e.l=i+h*Math.pow(s,t),e+""}}}function k(t,e){t=N(t),e=N(e);var s=isNaN(t.h)?e.h:t.h,n=isNaN(t.c)?e.c:t.c,r=t.l,i=isNaN(e.h)?0:e.h-s,a=isNaN(e.c)?0:e.c-n,o=e.l-r;return function(e){return t.h=s+i*e,t.c=n+a*e,t.l=r+o*e,t+""}}function x(t,s){t=N(t),s=N(s);var n=isNaN(t.h)?s.h:t.h,r=isNaN(t.c)?s.c:t.c,i=t.l,a=isNaN(s.h)?0:e(s.h,n),o=isNaN(s.c)?0:s.c-r,h=s.l-i;return function(e){return t.h=n+a*e,t.c=r+o*e,t.l=i+h*e,t+""}}function q(t,e){t=c(t),e=c(e);var s=t.l,n=t.a,r=t.b,i=e.l-s,a=e.a-n,o=e.b-r;return function(e){return t.l=s+i*e,t.a=n+a*e,t.b=r+o*e,t+""}}function _(t,e){t=h(t),e=h(e);var s=isNaN(t.h)?e.h:t.h,n=isNaN(t.s)?e.s:t.s,r=t.l,i=isNaN(e.h)?0:e.h-s,a=isNaN(e.s)?0:e.s-n,o=e.l-r;return function(e){return t.h=s+i*e,t.s=n+a*e,t.l=r+o*e,t+""}}function S(t,s){t=h(t),s=h(s);var n=isNaN(t.h)?s.h:t.h,r=isNaN(t.s)?s.s:t.s,i=t.l,a=isNaN(s.h)?0:e(s.h,n),o=isNaN(s.s)?0:s.s-r,l=s.l-i;return function(e){return t.h=n+a*e,t.s=r+o*e,t.l=i+l*e,t+""}}function L(t,e){t=i(t),e=i(e);var s=t.r,n=t.g,r=t.b,a=e.r-s,h=e.g-n,l=e.b-r;return function(t){return o(Math.round(s+a*t),Math.round(n+h*t),Math.round(r+l*t))}}var j=/^#([0-9a-f]{3})$/,C=/^#([0-9a-f]{6})$/,$=/^rgb\(\s*([-+]?\d+)\s*,\s*([-+]?\d+)\s*,\s*([-+]?\d+)\s*\)$/,H=/^rgb\(\s*([-+]?\d+(?:\.\d+)?)%\s*,\s*([-+]?\d+(?:\.\d+)?)%\s*,\s*([-+]?\d+(?:\.\d+)?)%\s*\)$/,I=/^hsl\(\s*([-+]?\d+(?:\.\d+)?)\s*,\s*([-+]?\d+(?:\.\d+)?)%\s*,\s*([-+]?\d+(?:\.\d+)?)%\s*\)$/;n.prototype=s.prototype={displayable:function(){return this.rgb().displayable()},toString:function(){return this.rgb()+""}};var G=(new Map).set("aliceblue",15792383).set("antiquewhite",16444375).set("aqua",65535).set("aquamarine",8388564).set("azure",15794175).set("beige",16119260).set("bisque",16770244).set("black",0).set("blanchedalmond",16772045).set("blue",255).set("blueviolet",9055202).set("brown",10824234).set("burlywood",14596231).set("cadetblue",6266528).set("chartreuse",8388352).set("chocolate",13789470).set("coral",16744272).set("cornflowerblue",6591981).set("cornsilk",16775388).set("crimson",14423100).set("cyan",65535).set("darkblue",139).set("darkcyan",35723).set("darkgoldenrod",12092939).set("darkgray",11119017).set("darkgreen",25600).set("darkgrey",11119017).set("darkkhaki",12433259).set("darkmagenta",9109643).set("darkolivegreen",5597999).set("darkorange",16747520).set("darkorchid",10040012).set("darkred",9109504).set("darksalmon",15308410).set("darkseagreen",9419919).set("darkslateblue",4734347).set("darkslategray",3100495).set("darkslategrey",3100495).set("darkturquoise",52945).set("darkviolet",9699539).set("deeppink",16716947).set("deepskyblue",49151).set("dimgray",6908265).set("dimgrey",6908265).set("dodgerblue",2003199).set("firebrick",11674146).set("floralwhite",16775920).set("forestgreen",2263842).set("fuchsia",16711935).set("gainsboro",14474460).set("ghostwhite",16316671).set("gold",16766720).set("goldenrod",14329120).set("gray",8421504).set("green",32768).set("greenyellow",11403055).set("grey",8421504).set("honeydew",15794160).set("hotpink",16738740).set("indianred",13458524).set("indigo",4915330).set("ivory",16777200).set("khaki",15787660).set("lavender",15132410).set("lavenderblush",16773365).set("lawngreen",8190976).set("lemonchiffon",16775885).set("lightblue",11393254).set("lightcoral",15761536).set("lightcyan",14745599).set("lightgoldenrodyellow",16448210).set("lightgray",13882323).set("lightgreen",9498256).set("lightgrey",13882323).set("lightpink",16758465).set("lightsalmon",16752762).set("lightseagreen",2142890).set("lightskyblue",8900346).set("lightslategray",7833753).set("lightslategrey",7833753).set("lightsteelblue",11584734).set("lightyellow",16777184).set("lime",65280).set("limegreen",3329330).set("linen",16445670).set("magenta",16711935).set("maroon",8388608).set("mediumaquamarine",6737322).set("mediumblue",205).set("mediumorchid",12211667).set("mediumpurple",9662683).set("mediumseagreen",3978097).set("mediumslateblue",8087790).set("mediumspringgreen",64154).set("mediumturquoise",4772300).set("mediumvioletred",13047173).set("midnightblue",1644912).set("mintcream",16121850).set("mistyrose",16770273).set("moccasin",16770229).set("navajowhite",16768685).set("navy",128).set("oldlace",16643558).set("olive",8421376).set("olivedrab",7048739).set("orange",16753920).set("orangered",16729344).set("orchid",14315734).set("palegoldenrod",15657130).set("palegreen",10025880).set("paleturquoise",11529966).set("palevioletred",14381203).set("papayawhip",16773077).set("peachpuff",16767673).set("peru",13468991).set("pink",16761035).set("plum",14524637).set("powderblue",11591910).set("purple",8388736).set("rebeccapurple",6697881).set("red",16711680).set("rosybrown",12357519).set("royalblue",4286945).set("saddlebrown",9127187).set("salmon",16416882).set("sandybrown",16032864).set("seagreen",3050327).set("seashell",16774638).set("sienna",10506797).set("silver",12632256).set("skyblue",8900331).set("slateblue",6970061).set("slategray",7372944).set("slategrey",7372944).set("snow",16775930).set("springgreen",65407).set("steelblue",4620980).set("tan",13808780).set("teal",32896).set("thistle",14204888).set("tomato",16737095).set("turquoise",4251856).set("violet",15631086).set("wheat",16113331).set("white",16777215).set("whitesmoke",16119285).set("yellow",16776960).set("yellowgreen",10145074),O=.7,P=1/O,z=i.prototype=a.prototype=new s;z.brighter=function(t){return t=null==t?P:Math.pow(P,t),new a(this.r*t,this.g*t,this.b*t)},z.darker=function(t){return t=null==t?O:Math.pow(O,t),new a(this.r*t,this.g*t,this.b*t)},z.rgb=function(){return this},z.displayable=function(){return 0<=this.r&&this.r<=255&&0<=this.g&&this.g<=255&&0<=this.b&&this.b<=255},z.toString=function(){return o(this.r,this.g,this.b)};var E=h.prototype=l.prototype=new s;E.brighter=function(t){return t=null==t?P:Math.pow(P,t),new l(this.h,this.s,this.l*t)},E.darker=function(t){return t=null==t?O:Math.pow(O,t),new l(this.h,this.s,this.l*t)},E.rgb=function(){var t=this.h%360+360*(this.h<0),e=isNaN(t)||isNaN(this.s)?0:this.s,s=this.l,n=s+(.5>s?s:1-s)*e,r=2*s-n;return new a(u(t>=240?t-240:t+120,r,n),u(t,r,n),u(120>t?t+240:t-120,r,n))},E.displayable=function(){return(0<=this.s&&this.s<=1||isNaN(this.s))&&0<=this.l&&this.l<=1};var R=18,A=.95047,B=1,D=1.08883,F=4/29,J=6/29,K=3*J*J,Q=J*J*J,T=c.prototype=g.prototype=new s;T.brighter=function(t){return new g(this.l+R*(null==t?1:t),this.a,this.b)},T.darker=function(t){return new g(this.l-R*(null==t?1:t),this.a,this.b)},T.rgb=function(){var t=(this.l+16)/116,e=isNaN(this.a)?t:t+this.a/500,s=isNaN(this.b)?t:t-this.b/200;return t=B*d(t),e=A*d(e),s=D*d(s),new a(p(3.2404542*e-1.5371385*t-.4985314*s),p(-.969266*e+1.8760108*t+.041556*s),p(.0556434*e-.2040259*t+1.0572252*s))};var U=Math.PI/180,V=180/Math.PI,W=N.prototype=m.prototype=new s;W.brighter=function(t){return new m(this.h,this.c,this.l+R*(null==t?1:t))},W.darker=function(t){return new m(this.h,this.c,this.l-R*(null==t?1:t))},W.rgb=function(){return c(this).rgb()};var X=-.14861,Y=1.78277,Z=-.29227,tt=-.90649,et=1.97294,st=et*tt,nt=et*Y,rt=Y*Z-tt*X,it=w.prototype=y.prototype=new s;it.brighter=function(t){return t=null==t?P:Math.pow(P,t),new y(this.h,this.s,this.l*t)},it.darker=function(t){return t=null==t?O:Math.pow(O,t),new y(this.h,this.s,this.l*t)},it.rgb=function(){var t=isNaN(this.h)?0:(this.h+120)*U,e=+this.l,s=isNaN(this.s)?0:this.s*e*(1-e),n=Math.cos(t),r=Math.sin(t);return new a(255*(e+s*(X*n+Y*r)),255*(e+s*(Z*n+tt*r)),255*(e+s*et*n))},t.interpolateCubehelix=v(1),t.interpolateCubehelixLong=M(1),t.color=n,t.rgb=i,t.hsl=h,t.lab=c,t.hcl=N,t.cubehelix=w,t.interpolateRgb=L,t.interpolateHsl=S,t.interpolateHslLong=_,t.interpolateLab=q,t.interpolateHcl=x,t.interpolateHclLong=k,t.interpolateCubehelixGamma=v,t.interpolateCubehelixGammaLong=M});
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.color {
width: 300px;
height: 20px;
border: 1px solid #333;
text-align: right;
padding-right: 16px;
}
.component {
width: 40px;
padding-right: 10px;
}
</style>
<table id='color-table'>
<thead>
<tr>
<th>Color</th>
<th>H</th>
<th>S</th>
<th>V</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinycolor/1.1.2/tinycolor.min.js"></script>
<script src="color.min.js"></script>
<script>
function rgbToHsl(r, g, b){
r /= 255, g /= 255, b /= 255;
var max = Math.max(r, g, b), min = Math.min(r, g, b);
var h, s, l = (max + min) / 2;
if(max == min){
h = s = 0; // achromatic
}else{
var d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch(max){
case r: h = (g - b) / d + (g < b ? 6 : 0); break;
case g: h = (b - r) / d + 2; break;
case b: h = (r - g) / d + 4; break;
}
h /= 6;
}
return [h, s, l];
}
// Amber
amber = ["#FFF8E1", "#FFECB3", "#FFE082", "#FFD54F", "#FFCA28", "#FFC107",
"#FFB300", "#FFA000", "#FF8F00", "#FF6F00"]
// Deep orange
deepOrange = [
"#FBE9E7",
"#FFCCBC",
"#FFAB91",
"#FF8A65",
"#FF7043",
"#FF5722",
"#F4511E",
"#E64A19",
"#D84315",
"#BF360C"]
green = [
"#E8F5E9",
"#C8E6C9",
"#A5D6A7",
"#81C784",
"#66BB6A",
"#4CAF50", // 500
"#43A047",
"#388E3C",
"#2E7D32",
"#1B5E20"
];
colors = green
$e = $("tbody");
function addColors(colors) {
var base = tinycolor(colors[5]);
colors.forEach(function(color) {
$r = $e.append("<tr class='row'></tr>");
/*
var r = parseInt(color.substring(1, 3), 16);
var g = parseInt(color.substring(3, 5), 16);
var b = parseInt(color.substring(5, 7), 16);
var t = "<div class='color' style='background-color: rgb(%r, %g, %b)'/>"
t = t.replace("%r", r);
t = t.replace("%g", g);
t = t.replace("%b", b);
$r.append(t); */
/*var hsl = rgbToHsl(r, g, b);
var h = hsl[0];
var s = hsl[1];
var l = hsl[2];
$r.append("<div class='component'>" + h.toFixed(2) + "</div>");
$r.append("<div class='component'>" + s.toFixed(2) + "</div>");
$r.append("<div class='component'>" + l.toFixed(2) + "</div>"); */
var rawColor = tinycolor(color);
var c = color.hcl(color);
var t = "<td class='color' style='background-color: %c; color: %tc'>%c</td>"
var r = /%c/g;
t = t.replace(r, color);
var r = /%tc/g;
t = t.replace(r, rawColor.isLight() ? "black" : "white");
$r.append(t);
$r.append("<td class='component'>" + c.h.toFixed(2) + "</td>");
$r.append("<td class='component'>" + c.c.toFixed(2) + "</td>");
$r.append("<td class='component'>" + c.l.toFixed(2) + "</td>");
})
}
//addColors(green)
addColors(amber)
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment