├── .gitignore
├── README.md
├── colors.js
├── index.html
├── prefixfree.min.js
└── style.css


/.gitignore:
--------------------------------------------------------------------------------
1 | *.png
2 | *.zip
3 | list.txt


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # [CSS colors](http://leaverou.github.io/css-colors)
 2 | 
 3 | ## Purpose
 4 | CSS.coloratum is a nifty little tool that helps you:
 5 | 
 6 | * Share colors with friends and colleagues (never have to go through describing a shade again, just give them the link!)
 7 | * Check out what RGB & HSL values correspond to that color keyword you keep using
 8 | * Covert HSL to RGB, because you're done with your prototype and now it has to work in IE8 too
 9 | * ...and much more!
10 | 
11 | ## Technical details (cause we're geeks after all!)
12 | CSS.coloratum is built with cutting edge open web technologies, so it only works with modern browsers. In its 3KB, it makes use of cool new technologies like:
13 | 
14 | * HTML5: canvas, autofocus, output, oninput event, hashchange event
15 | * CSS3: gradients, media queries, box-sizing, background-clip, border-radius, shadows, RGBA
16 | * ES5: Array#map()
17 | * Selectors API
18 | 
19 | ## Links
20 | 
21 | * CSS Colors is one of my 2 entries to the 10K contest. If you like it, [vote for it](http://10k.aneventapart.com/Entry/Details/538)!
22 | * [My blog post about it](http://lea.verou.me/2011/09/css-coloratum-convert-and-share-css-colors/)
23 | * It's released under an MIT-like License, like most of my stuff. In short, do whatever the eff you want with it, as long as you give me credit in some decent way.
24 | 


--------------------------------------------------------------------------------
/colors.js:
--------------------------------------------------------------------------------
  1 | function $(expr) { return document.querySelector(expr); }
  2 | function $$(expr) { return document.querySelectorAll(expr); }
  3 | 
  4 | var body = document.body,
  5 | 	canvas = document.createElement('canvas'),
  6 | 	ctx = canvas.getContext('2d'),
  7 | 	input = $('#color'),
  8 | 	form = $('form'),
  9 | 	out = $$('output > input');
 10 | 	
 11 | canvas.width = canvas.height = 16;
 12 | body.appendChild(canvas);
 13 | 
 14 | // Simple class for handling sRGB colors
 15 | function Color(rgba) {
 16 | 	if (rgba === 'transparent') {
 17 | 		rgba = [0,0,0,0];
 18 | 	}
 19 | 	else if (typeof rgba === 'string') {
 20 | 		var rgbaString = rgba;
 21 | 		rgba = rgbaString.match(/rgba?\(([\d.]+), ([\d.]+), ([\d.]+)(?:, ([\d.]+))?\)/);
 22 | 		
 23 | 		if (rgba) {
 24 | 			rgba.shift();
 25 | 		}
 26 | 		else {
 27 | 			throw new Error('Invalid string: ' + rgbaString);
 28 | 		}
 29 | 	}
 30 | 	
 31 | 	if (rgba[3] === undefined) {
 32 | 		rgba[3] = 1;	
 33 | 	}
 34 | 	
 35 | 	rgba = rgba.map(function (a) { return Math.round(a * 100)/100 });
 36 | 	
 37 | 	this.rgba = rgba;
 38 | }
 39 | 
 40 | Color.prototype = {
 41 | 	get rgb () {
 42 | 		return this.rgba.slice(0,3);
 43 | 	},
 44 | 	
 45 | 	get alpha () {
 46 | 		return this.rgba[3];
 47 | 	},
 48 | 	
 49 | 	set alpha (alpha) {
 50 | 		this.rgba[3] = alpha;
 51 | 	},
 52 | 	
 53 | 	get hex () {
 54 | 		var hex = this.rgb.map(function(a) {
 55 | 			return (a < 16? '0' : '') + a.toString(16);
 56 | 		}).join('')
 57 | 		
 58 | 		if(this.alpha >= 1) {
 59 | 			if(/(([\da-z])\2){3}/i.test(hex)) {
 60 | 				hex = hex.charAt(0) + hex.charAt(2) + hex.charAt(4);
 61 | 			}
 62 | 		}
 63 | 		else {
 64 | 			var alpha255 = Math.round(this.alpha * 255);
 65 | 			
 66 | 			hex += (alpha255 < 16? '0' : '') + alpha255.toString(16);
 67 | 		}
 68 | 		
 69 | 		return '#' + hex;
 70 | 	},
 71 | 	
 72 | 	get hsl () {
 73 | 		var rgb = this.rgb.map(function(a) { return a / 2.55 });
 74 | 		
 75 | 		var hsl = [],
 76 | 			max = Math.max.apply(Math, rgb),
 77 | 			min = Math.min.apply(Math, rgb);
 78 | 			
 79 | 		hsl[2] = Math.round((min + max)/2);
 80 | 		
 81 | 		var d = max - min;
 82 | 		
 83 | 		if(d !== 0) {
 84 | 			hsl[1] = Math.round(d*100 / (100 - Math.abs(2*hsl[2] - 100))) + '%';
 85 | 			
 86 | 			switch(max){
 87 | 				case rgb[0]: hsl[0] = (rgb[1] - rgb[2]) / d + (rgb[1] < rgb[2] ? 6 : 0); break;
 88 | 				case rgb[1]: hsl[0] = (rgb[2] - rgb[0]) / d + 2; break;
 89 | 				case rgb[2]: hsl[0] = (rgb[0] - rgb[1]) / d + 4;
 90 | 			}
 91 | 			
 92 | 			hsl[0] = Math.round(hsl[0]*60);
 93 | 		}
 94 | 		else {
 95 | 			hsl[0] = 0;
 96 | 			hsl[1] = '0%';
 97 | 		}
 98 | 		
 99 | 		hsl[2] += '%';
100 | 		
101 | 		return hsl;
102 | 	},
103 | 	
104 | 	toString: function() {
105 | 		return 'rgb' + (this.alpha < 1? 'a' : '') + '(' + (this.rgba.slice(0, this.alpha >= 1? 3 : 4).join(', ') + ')').replace(/\b0\./, '.');
106 | 	},
107 | 	
108 | 	toHSLString: function() {
109 | 		var hsl = this.hsl;
110 | 		
111 | 		return 'hsl' + (this.alpha < 1? 'a' : '') + '(' + hsl.join(', ') + ((this.alpha < 1? ', ' + this.alpha : '') + ')').replace(/\b0\./, '.');
112 | 	},
113 | 	
114 | 	clone: function() {
115 | 		return new Color(this.rgba);
116 | 	}
117 | }
118 | 
119 | form.onsubmit = function(e) {
120 | 	e && e.preventDefault();
121 | 	
122 | 	var oldColor = getComputedStyle(document.body).backgroundColor;
123 | 	
124 | 	document.body.style.background = '';
125 | 	document.body.style.background = input.value;
126 | 
127 | 	var newColor = document.body.style.background;
128 | 	
129 | 	if (!newColor) {
130 | 		// Invalid color
131 | 		document.body.style.background = oldColor;
132 | 		input.className = 'invalid';
133 | 		
134 | 		return;
135 | 	}
136 | 	
137 | 	newColor = getComputedStyle(document.body).backgroundColor;
138 | 	
139 | 	input.removeAttribute('class');
140 | 	
141 | 	var color = new Color(newColor);
142 | 	
143 | 	out[1].value = color.hex;
144 | 	
145 | 	out[0].value = color + '';
146 | 	
147 | 	out[2].value = color.toHSLString();
148 | 	
149 | 	ctx.fillStyle = color + '';
150 | 	ctx.clearRect(0, 0, 16, 16);
151 | 	ctx.fillRect(0, 0, 16, 16);
152 | 	
153 | 	$('link[rel="shortcut icon"]').setAttribute('href', canvas.toDataURL());
154 | 	document.title = color + ' ✿ CSS.coloratum';
155 | 	
156 | 	if(history.pushState) {
157 | 		history.pushState(null, null, '#' + encodeURIComponent(input.value));
158 | 	}
159 | 	
160 | 	return false;
161 | };
162 | 
163 | input.onblur = function() {
164 | 	if(input.className) {
165 | 		return;
166 | 	}
167 | 	
168 | 	var hashchange = onhashchange;
169 | 	window.onhashchange = null;
170 | 	location.hash = '#' + encodeURIComponent(input.value);
171 | 	window.onhashchange = hashchange;
172 | }
173 | 
174 | input.oninput = function() { form.onsubmit() };
175 | 
176 | (onhashchange = function() { 
177 | 	var color = location.hash.slice(1) || 'slategray';
178 | 	
179 | 	try {
180 | 		input.value = decodeURIComponent(color);
181 | 	}
182 | 	catch(e) { input.value = color };
183 | 	
184 | 	form.onsubmit();
185 | })();
186 | 
187 | for(var i=0; i<out.length; i++) {
188 | 	out[i].onclick = function () { this.select(); }
189 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | 
 5 | <meta charset="utf-8" />
 6 | <title>CSS Colors: Convert and share CSS colors</title>
 7 | <link rel="stylesheet" href="style.css" />
 8 | <script src="prefixfree.min.js"></script>
 9 | <link rel="shortcut icon"  type="image/png" href="about:blank" />
10 | <meta name="keywords" content="RGB, HSL, RGBA, HSLA, hex, color keywords, convert, conversion" />
11 | </head>
12 | <body>
13 | 
14 | <h1><a href="#">CSS Colors</a></h1>
15 | <form>
16 | 	<label>
17 | 		Type a CSS color <span>keyword, #hex, hsl(), rgba(), whatever</span>:
18 | 		<input type="text" name="color" id="color" value="slategray" autofocus />
19 | 	</label>
20 | 	<output for="color"><input id="rgb" readonly /></output>
21 | 	<output for="color"><input id="hex" readonly /></output>
22 | 	<output for="color"><input id="hsl" readonly /></output>	
23 | </form>
24 | <footer>
25 | 	By <a href="http://lea.verou.me">Lea Verou</a>
26 | 	✿ <a href="https://www.w3.org/TR/css3-color/">Specification</a> 
27 | 	✿ <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=me%40leaverou%2eme&lc=GR&item_name=Lea%20Verou&currency_code=EUR&bn=PP%2dDonationsBF%3abtn_donate_SM%2egif%3aNonHosted" rel="nofollow">Donate</a>
28 | </footer>
29 | 
30 | <script src="colors.js"></script>
31 | 
32 | <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://leaverou.github.io/css-colors" data-count="vertical" data-via="LeaVerou">Tweet</a>
33 | <script src="https://platform.twitter.com/widgets.js"></script>
34 | 
35 | <script>_gaq = [['_setAccount', 'UA-25106441-2'], ['_trackPageview']];</script>
36 | <script src="https://www.google-analytics.com/ga.js" async></script>
37 | 
38 | </body>
39 | </html>
40 | 


--------------------------------------------------------------------------------
/prefixfree.min.js:
--------------------------------------------------------------------------------
1 | /**
2 |  * StyleFix 1.0.3 & PrefixFree 1.0.7
3 |  * @author Lea Verou
4 |  * MIT license
5 |  */(function(){function t(e,t){return[].slice.call((t||document).querySelectorAll(e))}if(!window.addEventListener)return;var e=window.StyleFix={link:function(t){try{if(t.rel!=="stylesheet"||t.hasAttribute("data-noprefix"))return}catch(n){return}var r=t.href||t.getAttribute("data-href"),i=r.replace(/[^\/]+$/,""),s=t.parentNode,o=new XMLHttpRequest,u;o.onreadystatechange=function(){o.readyState===4&&u()};u=function(){var n=o.responseText;if(n&&t.parentNode&&(!o.status||o.status<400||o.status>600)){n=e.fix(n,!0,t);if(i){n=n.replace(/url\(\s*?((?:"|')?)(.+?)\1\s*?\)/gi,function(e,t,n){return/^([a-z]{3,10}:|\/|#)/i.test(n)?e:'url("'+i+n+'")'});var r=i.replace(/([\\\^\$*+[\]?{}.=!:(|)])/g,"\\$1");n=n.replace(RegExp("\\b(behavior:\\s*?url\\('?\"?)"+r,"gi"),"$1")}var u=document.createElement("style");u.textContent=n;u.media=t.media;u.disabled=t.disabled;u.setAttribute("data-href",t.getAttribute("href"));s.insertBefore(u,t);s.removeChild(t);u.media=t.media}};try{o.open("GET",r);o.send(null)}catch(n){if(typeof XDomainRequest!="undefined"){o=new XDomainRequest;o.onerror=o.onprogress=function(){};o.onload=u;o.open("GET",r);o.send(null)}}t.setAttribute("data-inprogress","")},styleElement:function(t){if(t.hasAttribute("data-noprefix"))return;var n=t.disabled;t.textContent=e.fix(t.textContent,!0,t);t.disabled=n},styleAttribute:function(t){var n=t.getAttribute("style");n=e.fix(n,!1,t);t.setAttribute("style",n)},process:function(){t('link[rel="stylesheet"]:not([data-inprogress])').forEach(StyleFix.link);t("style").forEach(StyleFix.styleElement);t("[style]").forEach(StyleFix.styleAttribute)},register:function(t,n){(e.fixers=e.fixers||[]).splice(n===undefined?e.fixers.length:n,0,t)},fix:function(t,n,r){for(var i=0;i<e.fixers.length;i++)t=e.fixers[i](t,n,r)||t;return t},camelCase:function(e){return e.replace(/-([a-z])/g,function(e,t){return t.toUpperCase()}).replace("-","")},deCamelCase:function(e){return e.replace(/[A-Z]/g,function(e){return"-"+e.toLowerCase()})}};(function(){setTimeout(function(){t('link[rel="stylesheet"]').forEach(StyleFix.link)},10);document.addEventListener("DOMContentLoaded",StyleFix.process,!1)})()})();(function(e){function t(e,t,r,i,s){e=n[e];if(e.length){var o=RegExp(t+"("+e.join("|")+")"+r,"gi");s=s.replace(o,i)}return s}if(!window.StyleFix||!window.getComputedStyle)return;var n=window.PrefixFree={prefixCSS:function(e,r,i){var s=n.prefix;n.functions.indexOf("linear-gradient")>-1&&(e=e.replace(/(\s|:|,)(repeating-)?linear-gradient\(\s*(-?\d*\.?\d*)deg/ig,function(e,t,n,r){return t+(n||"")+"linear-gradient("+(90-r)+"deg"}));e=t("functions","(\\s|:|,)","\\s*\\(","$1"+s+"$2(",e);e=t("keywords","(\\s|:)","(\\s|;|\\}|$)","$1"+s+"$2$3",e);e=t("properties","(^|\\{|\\s|;)","\\s*:","$1"+s+"$2:",e);if(n.properties.length){var o=RegExp("\\b("+n.properties.join("|")+")(?!:)","gi");e=t("valueProperties","\\b",":(.+?);",function(e){return e.replace(o,s+"$1")},e)}if(r){e=t("selectors","","\\b",n.prefixSelector,e);e=t("atrules","@","\\b","@"+s+"$1",e)}e=e.replace(RegExp("-"+s,"g"),"-");e=e.replace(/-\*-(?=[a-z]+)/gi,n.prefix);return e},property:function(e){return(n.properties.indexOf(e)?n.prefix:"")+e},value:function(e,r){e=t("functions","(^|\\s|,)","\\s*\\(","$1"+n.prefix+"$2(",e);e=t("keywords","(^|\\s)","(\\s|$)","$1"+n.prefix+"$2$3",e);return e},prefixSelector:function(e){return e.replace(/^:{1,2}/,function(e){return e+n.prefix})},prefixProperty:function(e,t){var r=n.prefix+e;return t?StyleFix.camelCase(r):r}};(function(){var e={},t=[],r={},i=getComputedStyle(document.documentElement,null),s=document.createElement("div").style,o=function(n){if(n.charAt(0)==="-"){t.push(n);var r=n.split("-"),i=r[1];e[i]=++e[i]||1;while(r.length>3){r.pop();var s=r.join("-");u(s)&&t.indexOf(s)===-1&&t.push(s)}}},u=function(e){return StyleFix.camelCase(e)in s};if(i.length>0)for(var a=0;a<i.length;a++)o(i[a]);else for(var f in i)o(StyleFix.deCamelCase(f));var l={uses:0};for(var c in e){var h=e[c];l.uses<h&&(l={prefix:c,uses:h})}n.prefix="-"+l.prefix+"-";n.Prefix=StyleFix.camelCase(n.prefix);n.properties=[];for(var a=0;a<t.length;a++){var f=t[a];if(f.indexOf(n.prefix)===0){var p=f.slice(n.prefix.length);u(p)||n.properties.push(p)}}n.Prefix=="Ms"&&!("transform"in s)&&!("MsTransform"in s)&&"msTransform"in s&&n.properties.push("transform","transform-origin");n.properties.sort()})();(function(){function i(e,t){r[t]="";r[t]=e;return!!r[t]}var e={"linear-gradient":{property:"backgroundImage",params:"red, teal"},calc:{property:"width",params:"1px + 5%"},element:{property:"backgroundImage",params:"#foo"},"cross-fade":{property:"backgroundImage",params:"url(a.png), url(b.png), 50%"}};e["repeating-linear-gradient"]=e["repeating-radial-gradient"]=e["radial-gradient"]=e["linear-gradient"];var t={initial:"color","zoom-in":"cursor","zoom-out":"cursor",box:"display",flexbox:"display","inline-flexbox":"display",flex:"display","inline-flex":"display"};n.functions=[];n.keywords=[];var r=document.createElement("div").style;for(var s in e){var o=e[s],u=o.property,a=s+"("+o.params+")";!i(a,u)&&i(n.prefix+a,u)&&n.functions.push(s)}for(var f in t){var u=t[f];!i(f,u)&&i(n.prefix+f,u)&&n.keywords.push(f)}})();(function(){function s(e){i.textContent=e+"{}";return!!i.sheet.cssRules.length}var t={":read-only":null,":read-write":null,":any-link":null,"::selection":null},r={keyframes:"name",viewport:null,document:'regexp(".")'};n.selectors=[];n.atrules=[];var i=e.appendChild(document.createElement("style"));for(var o in t){var u=o+(t[o]?"("+t[o]+")":"");!s(u)&&s(n.prefixSelector(u))&&n.selectors.push(o)}for(var a in r){var u=a+" "+(r[a]||"");!s("@"+u)&&s("@"+n.prefix+u)&&n.atrules.push(a)}e.removeChild(i)})();n.valueProperties=["transition","transition-property"];e.className+=" "+n.prefix;StyleFix.register(n.prefixCSS)})(document.documentElement);


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | * {
  2 | 	margin: 0;
  3 | }
  4 | 
  5 | html {
  6 | 	background: white;
  7 | 	background: linear-gradient(45deg, #bbb 25%,  transparent 25%, transparent 75%, #bbb 75%, #bbb) 5px 5px, 
  8 | 		linear-gradient(45deg, #bbb 25%,  #eee 25%,  #eee 75%, #bbb 75%, #bbb) 15px 15px;
  9 | 	background-size:20px 20px;
 10 | 	height: 100%;
 11 | }
 12 | 
 13 | body {
 14 | 	min-height: 100%;
 15 | 	color: rgba(0,0,0,.6);
 16 | 	font-family: 'Palatino Linotype', Palatino, Georgia, serif;
 17 | 	font-size: 110%;
 18 | 	text-align: center;
 19 | }
 20 | 
 21 | form {
 22 | 	width: 30em;
 23 | 	margin: auto;
 24 | 	padding: 1em 1.2em 1.2em;
 25 | 	background: rgba(0,0,0,.6);
 26 | 	background-image: linear-gradient(transparent, rgba(0,0,0,.5));
 27 | 	color: white;
 28 | 	font-size: 90%;
 29 | 	text-shadow: 1px 1px .3em rgba(0,0,0,.6);
 30 | 	border-radius: 1.5em;
 31 | }
 32 | 
 33 | input {
 34 | 	display: block;
 35 | 	width: 100%;
 36 | 	padding: .4em 0 .2em;
 37 | 	box-sizing: border-box;
 38 | 	font-family: Consolas, 'Andale Mono', 'Lucida Console', monospace;
 39 | 	font-weight: bold;
 40 | 	text-align: inherit;
 41 | 	outline: none;
 42 | }
 43 | 
 44 | input:focus {
 45 | 	box-shadow: 2px 2px 8px rgba(0,0,0,.7) inset;
 46 | }
 47 | 
 48 | a {
 49 | 	color: inherit;
 50 | 	text-decoration: none;
 51 | }
 52 | 
 53 | h1 {
 54 | 	overflow: hidden;
 55 | 	padding-top: .8em;
 56 | 	font-size: 340%;
 57 | 	line-height: .37;
 58 | }
 59 | 
 60 | span {
 61 | 	color: rgba(255,255,255,.5);
 62 | 	font-weight: normal;
 63 | }
 64 | 
 65 | label {
 66 | 	display: block;
 67 | }
 68 | 
 69 | 	label span {
 70 | 		font-style: italic;
 71 | 	}
 72 | 
 73 | 	label input {
 74 | 		border: 8px solid rgba(0,0,0,.3);
 75 | 		background-clip: padding-box;
 76 | 		font-size: 210%;
 77 | 		border-radius: 15px;
 78 | 	}
 79 | 	
 80 | 	input.invalid {
 81 | 		border-color: rgba(200,0,0,.4);
 82 | 	}
 83 | 
 84 | label + output {
 85 | 	display: block;
 86 | 	margin-top: .5em;	
 87 | }
 88 | 
 89 | 	output > input {
 90 | 		background: transparent;
 91 | 		border: 0;
 92 | 		color: inherit;
 93 | 		font-size: 180%;
 94 | 		text-shadow: inherit;
 95 | 		border-radius: 10px;
 96 | 	}
 97 | 
 98 | canvas {
 99 | 	display: none;
100 | }
101 | 
102 | footer {
103 | 	margin-top: .3em;
104 | 	font-weight: bold;
105 | 	color: rgba(0,0,0,.8);
106 | }
107 | 
108 | .twitter-share-button {
109 | 	position: absolute;
110 | 	top: 10px;
111 | 	left: 10px;
112 | }
113 | 
114 | @media (max-width: 500px) {
115 | 	body { font-size: 90%; }
116 | }
117 | 
118 | @media (max-width: 400px) {
119 | 	body { font-size: 80%; }
120 | }


--------------------------------------------------------------------------------