diff --git a/bubbly.js b/bubbly.js
index bf6f1f1..937e638 100644
--- a/bubbly.js
+++ b/bubbly.js
@@ -1,7 +1,13 @@
+function changeValue(who){
+	if(who=='picker') picker_color.value = color.value;
+	if(who=='color') color.value = picker_color.value;
+	update();
+}
+
 function update() {
 	var side = getRadioValue('side'),
 	    triangle = getRadioValue('triangle');
-	    
+
 	code.textContent = bubbleCSS('.speech-bubble', {
 		side: side,
 		triangle: triangle,
@@ -9,10 +15,10 @@ function update() {
 		color: color.value,
 		ems: ems.checked
 	});
-	
+
 	// Update labels
 	var labelCSS ='';
-	
+
 	['top', 'right', 'bottom', 'left'].forEach(function(value) {
 		labelCSS += bubbleCSS('label[for="side-' + value + '"]', {
 			side: value,
@@ -21,7 +27,7 @@ function update() {
 			color: 'yellowgreen'
 		}) + '\n\n';
 	});
-	
+
 	['symmetrical', 'right', 'left'].forEach(function(value) {
 		labelCSS += bubbleCSS('label[for="triangle-' + value + '"]', {
 			side: side,
@@ -30,17 +36,17 @@ function update() {
 			color: 'deeppink'
 		}) + '\n\n';
 	});
-	
+
 	labels.textContent = labelCSS;
 }
 
 function bubbleCSS(selector, settings) {
 	var props = {}, propsBefore = {};
-	
+
 	props['position'] = 'relative';
 	props['background'] = settings.color;
 	props['border-radius'] = '.4em';
-	
+
 	var side = settings.side,
 	    triangle = settings.triangle,
 	    isHorizontal = side == 'top' || side == 'bottom',
@@ -51,61 +57,61 @@ function bubbleCSS(selector, settings) {
 			'left': 'right'
 		}[side],
 		offset = isHorizontal? 'left' : 'top';
-	
+
 	propsBefore['content'] = "''";
 	propsBefore['position'] = 'absolute';
 	propsBefore[side] = '0';
 	propsBefore[offset] = '50%';
-	
+
 	propsBefore['width'] = '0';
 	propsBefore['height'] = '0';
-	
+
 	propsBefore['border'] = getLength(settings.size, settings.ems) + ' solid transparent';
 	propsBefore['border-' + opposite + '-color'] = settings.color;
 	propsBefore['border-' + side] = '0';
-	
+
 	if (triangle != 'symmetrical') {
 		propsBefore['border-' + (isHorizontal? triangle : (triangle == 'right'? 'top' : 'bottom'))] = '0';
 	}
-	
+
 	propsBefore['margin-' + offset] = getLength(-settings.size/(triangle == 'symmetrical'? 1 : 2), settings.ems); // to center it
 	propsBefore['margin-' + side] = getLength(-settings.size, settings.ems); // to put it outside the box
-	
+
 	return cssRule(selector, props) + '\n\n' + cssRule(selector + ':after', propsBefore);
 }
 
 function getLength(px, useEms) {
 	if (useEms) {
 		var base = parseInt(getComputedStyle($('.speech-bubble')).fontSize);
-		
+
 		return Math.round(1000 * px/base)/1000 + 'em';
 	}
-	
+
 	return px + 'px';
 }
 
 function cssRule(selector, props) {
 	var css = selector + ' {\n';
-	
-	
+
+
 	$u.each(props, function (value, property) {
 		css += '	' + property + ': ' + value + ';\n';
 	});
-	
+
 	css += '}';
-	
+
 	return css;
 }
 
 function getRadioValue(name) {
 	var radios = document.getElementsByName(name);
-	
+
 	for (var i=0, radio; radio = radios[i++];) {
 		if (radio.checked) {
 			return radio.value;
 		}
 	}
-	
+
 	return '';
 }
 
@@ -117,4 +123,4 @@ $$('input[type="radio"] + label').forEach(function (label) {
 	label.title = label.textContent;
 });
 
-update();
\ No newline at end of file
+update();
diff --git a/index.html b/index.html
index 3c8db18..079a421 100644
--- a/index.html
+++ b/index.html
@@ -18,38 +18,38 @@ <h2>CSS speech bubbles made easy!</h2>
 
 <section>
 	<h1>Side</h1>
-	
+
 	<input type="radio" name="side" value="top" id="side-top" />
 	<label for="side-top">Top</label>
-	
+
 	<input type="radio" name="side" value="right" id="side-right" />
 	<label for="side-right">Right</label>
-	
+
 	<input type="radio" name="side" value="bottom" id="side-bottom" checked />
 	<label for="side-bottom">Bottom</label>
-	
+
 	<input type="radio" name="side" value="left" id="side-left" />
 	<label for="side-left">Left</label>
 </section>
 
 <section>
 	<h1>Pointer triangle</h1>
-	
+
 	<input type="radio" name="triangle" value="symmetrical" id="triangle-symmetrical" />
 	<label for="triangle-symmetrical">Symmetrical</label>
-	
+
 	<input type="radio" name="triangle" value="right" id="triangle-right" />
 	<label for="triangle-right">Right</label>
-	
+
 	<input type="radio" name="triangle" value="left" id="triangle-left" checked />
 	<label for="triangle-left">Left</label>
 </section>
 
 <section>
 	<h1>Pointer size</h1>
-	
+
 	<input type="range" min="2" max="100" value="20" name="size" id="size" />
-	
+
 	<label>
 		<input type="checkbox" name="ems" id="ems" />
 		Use ems
@@ -58,8 +58,8 @@ <h1>Pointer size</h1>
 
 <section>
 	<h1>Background color</h1>
-	
-	<input type="color" id="color" value="#00aabb" />
+	<input type="color" id="picker_color" value="#00aabb" onchange="changeValue('color')" />
+	<input type="text" id="color" value="#00aabb" maxlength="7" onchange="changeValue('picker')" />
 </section>
 
 <footer></footer>
diff --git a/style.css b/style.css
index 15339bd..2651596 100644
--- a/style.css
+++ b/style.css
@@ -1,5 +1,5 @@
 html {
-	
+
 }
 
 body {
@@ -42,7 +42,7 @@ body {
 		font-size: 150%;
 		font-family: sniglet;
 	}
-	
+
 	.speech-bubble h2 {
 		margin: 0;
 		font-size: 40%;
@@ -63,7 +63,7 @@ input[type="radio"] + label {
 }
 
 input[type="radio"]:checked + label {
-	
+
 }
 
 input[type="radio"]:checked + label:before {
diff --git a/utopia.js b/utopia.js
index 178b842..b2b73d0 100644
--- a/utopia.js
+++ b/utopia.js
@@ -1,10 +1,10 @@
-/**
- * Utopia: A JavaScript util library that assumes modern standards support and doesn't fix any browser bugs
+/**
+ * Utopia: A JavaScript util library that assumes modern standards support and doesn't fix any browser bugs
  * @author Lea Verou (http://lea.verou.me)
- * MIT license (http://www.opensource.org/licenses/mit-license.php)
+ * MIT license (http://www.opensource.org/licenses/mit-license.php)
  * Last update: 2012-4-29
- */
- 
+ */
+
 function $(expr, con) {
 	return typeof expr === 'string'? (con || document).querySelector(expr) : expr;
 }
@@ -23,12 +23,12 @@ $$('[id]').forEach(function(element) {
 String.prototype.splice = function(i, remove, add) {
 	remove = +remove || 0;
 	add = add || '';
-	
+
 	return this.slice(0,i) + add + this.slice(i + remove);
-};
+};
 
 (function(){
-
+
 var _ = window.Utopia = {
 	/**
 	 * Returns the [[Class]] of an object in lowercase (eg. array, date, regexp, string etc)
@@ -56,7 +56,7 @@ var _ = window.Utopia = {
 	/**
 	 * Iterate over the properties of an object. Checks whether the properties actually belong to it.
 	 * Can be stopped if the function explicitly returns a value that isn't null, undefined or NaN.
-	 * 
+	 *
 	 * @param obj {Object} The object to iterate over
 	 * @param func {Function} The function used in the iteration. Can accept 2 parameters: one of the
 	 * 							value of the object and one for its name.
@@ -92,18 +92,18 @@ var _ = window.Utopia = {
 	 */
 	merge: function(objects) {
 		var ret = {};
-		
+
 		for(var i=0; i<arguments.length; i++) {
 			var o = arguments[i];
-			
+
 			for(var j in o) {
 				ret[j] = o[j];
 			}
 		}
-		
+
 		return ret;
 	},
-	
+
 	/**
 	 * Copies the properties of one or more objects onto the first one
 	 * When there is a collision, the first object wins
@@ -111,22 +111,22 @@ var _ = window.Utopia = {
 	attach: function(object, objects) {
 		for(var i=0; i<arguments.length; i++) {
 			var o = arguments[i];
-			
+
 			for(var j in o) {
 				if(!(j in object)) {
 					object[j] = o[j];
 				}
 			}
 		}
-		
+
 		return object;
 	},
-	
-	element: {
-		/**
-		 * Creates a new DOM element
-		 * @param options {Object} A set of key/value pairs for attributes, properties, contents, placement in the DOM etc
-		 * @return The new DOM element
+
+	element: {
+		/**
+		 * Creates a new DOM element
+		 * @param options {Object} A set of key/value pairs for attributes, properties, contents, placement in the DOM etc
+		 * @return The new DOM element
 		 */
 		create: function() {
 			var options;
@@ -142,7 +142,7 @@ var _ = window.Utopia = {
 					options = {
 						tag: arguments[0]
 					};
-					
+
 					// Utopia.element.create('div', [contents]);
 					if(_.type(arguments[1]) === 'array') {
 						options.contents = arguments[1];
@@ -156,24 +156,24 @@ var _ = window.Utopia = {
 			else {
 				options = arguments[0];
 			}
-			
+
 			var namespace = options.namespace || '', element;
-			
+
 			if(namespace) {
 				element = document.createElementNS(namespace, options.tag);
 			}
 			else {
 				element = document.createElement(options.tag);
 			}
-			
+
 			if(options.className) {
 				options.properties = options.properties || {};
 				options.properties.className = options.className;
 			}
-			
+
 			// Set properties, attributes and contents
 			_.element.set(element, options);
-			
+
 			// Place the element in the DOM (inside, before or after an existing element)
 			// This could be a selector
 			if(options.inside) {
@@ -181,28 +181,28 @@ var _ = window.Utopia = {
 			}
 			else if(options.before) {
 				var before = $(options.before);
-				
+
 				before.parentNode.insertBefore(element, before)
 			}
 			else if(options.after) {
 				var after = $(options.after);
-				
+
 				after.parentNode.insertBefore(element, after.nextSibling)
 			}
-			
+
 			return element;
 		},
-		
+
 		set: function(element, options) {
 			_.element.prop(element, options.properties || options.prop);
-					
+
 			_.element.attr(element, options.attributes || options.attr);
-			
+
 			_.element.contents(element, options.contents);
-	
+
 			return element;
 		},
-		
+
 		prop: function (element, properties) {
 			if (properties) {
 				for (var prop in properties) {
@@ -212,20 +212,20 @@ var _ = window.Utopia = {
 					catch(e) {}
 				}
 			}
-			
+
 			return element;
 		},
-		
+
 		attr: function (element, attributes) {
 			if (attributes) {
 				for (attr in attributes) {
 					element.setAttribute(attr, attributes[attr]);
 				}
 			}
-			
+
 			return element;
 		},
-		
+
 		/**
 		 * Sets an element’s contents
 		 * Contents could be: One or multiple (as an array) of the following:
@@ -238,12 +238,12 @@ var _ = window.Utopia = {
 				if (_.type(contents) !== 'array') {
 					contents = [contents];
 				}
-				
+
 				var firstChild = element.firstChild;
-				
+
 				for (var i=0; i<contents.length; i++) {
 					var content = contents[i], child;
-					
+
 					switch(_.type(content)) {
 						case 'string':
 							if(content === '') {
@@ -260,7 +260,7 @@ var _ = window.Utopia = {
 							child = content;
 
 					}
-					
+
 					if(child) {
 						if (!where || where === 'end') {
 							element.appendChild(child);
@@ -269,17 +269,17 @@ var _ = window.Utopia = {
 							element.insertBefore(child, firstChild);
 						}
 					}
-				}	
+				}
 			}
-			
+
 			return element;
 		}
 	},
-	
+
 	elements: {
 		// set, attr, prop, contents functions from Utopia.element, but for multiple elements
 	},
-	
+
 	event: {
 		/**
 		 * Binds one or more events to one or more elements
@@ -287,7 +287,7 @@ var _ = window.Utopia = {
 		bind: function(target, event, callback, traditional) {
 			if(_.type(target) === 'string' || _.type(target) === 'array') {
 				var elements = _.type(target) === 'string'? $$(target) : target;
-				
+
 				elements.forEach(function(element) {
 					_.event.bind(element, event, callback, traditional);
 				});
@@ -311,24 +311,24 @@ var _ = window.Utopia = {
 				}
 			}
 		},
-		
+
 		/**
 		 * Fire a custom event
 		 */
 		fire: function(target, type, properties) {
 			if(_.type(target) === 'string' || _.type(target) === 'array') {
 				var elements = _.type(target) === 'string'? $$(target) : target;
-				
+
 				elements.forEach(function(element) {
 					_.event.fire(element, type, properties);
 				});
 			}
 			else {
 				var evt = document.createEvent("HTMLEvents");
-		
+
 				evt.initEvent(type, true, true );
 				evt.custom = true;
-		
+
 				if(properties) {
 					_.attach(evt, properties);
 				}
@@ -337,52 +337,52 @@ var _ = window.Utopia = {
 			}
 		}
 	},
-	
+
 	/**
 	 * Helper for XHR requests
 	 */
 	xhr: function(o) {
 		document.body.setAttribute('data-loading', '');
-		
+
 		var xhr = new XMLHttpRequest(),
 			method = o.method || 'GET',
 			data = o.data || '';
-		
+
 		o.headers = o.headers || {};
-		
+
 		xhr.open(method, o.url + (method === 'GET' && data? '?' + data : ''), !o.sync);
-		
+
 		if (method !== 'GET' && !o.headers['Content-type'] && !o.headers['Content-Type']) {
 			xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
 		}
-		
+
 		for (var header in o.headers) {
 			xhr.setRequestHeader(header, o.headers[header]);
 		}
-		
+
 		var callback = function() {
 			document.body.removeAttribute('data-loading');
-			
+
 			o.callback(xhr);
 		};
-		
+
 		xhr.onreadystatechange = function(){
 			if (xhr.readyState === 4) {
 				callback();
 			}
 		};
-		
+
 		xhr.send(method === 'GET'? null : data);
-		
+
 		return xhr;
 	},
-	
+
 	/**
 	 * Lazy loads an external script
 	 */
 	script: function(url, callback, doc) {
 		doc = doc || document;
-		
+
 		return _.element.create('script', {
 			properties: {
 				src: url,
@@ -392,51 +392,51 @@ var _ = window.Utopia = {
 			inside: doc.documentElement
 		});
 	},
-	
+
 	/**
 	 * Returns the absolute X, Y offsets for an element
 	 */
 	offset: function(element) {
 	    var left = 0, top = 0, el = element;
-	    
+
 	    if (el.parentNode) {
 			do {
 				left += el.offsetLeft;
 				top += el.offsetTop;
 			} while ((el = el.offsetParent) && el.nodeType < 9);
-			
+
 			el = element;
-			
+
 			do {
 				left -= el.scrollLeft;
 				top -= el.scrollTop;
 			} while ((el = el.parentNode) && !/body/i.test(el.nodeName));
 		}
-	
+
 	    return {
 			top: top,
 	    	right: innerWidth - left - element.offsetWidth,
 	    	bottom: innerHeight - top - element.offsetHeight,
 	    	left: left,
 	    };
-	}
+	}
 };
 
 ['set', 'prop', 'attr', 'contents'].forEach(function(method) {
 	_.elements[method] = function(elements) {
 		elements = _.type(elements) === 'string'? $$(elements) : Array.prototype.slice.call(elements);
-		
+
 		var args = Array.prototype.slice.call(arguments);
 		args.shift(); // Remove the elements argument
-		
+
 		elements = elements.map(function(element) {
 			return _.element[method](element, args);
 		});
-		
+
 		return elements;
 	}
-});
-
+});
+
 })();
 
 window.$u = window.$u || Utopia;
\ No newline at end of file